Video optimization
Make video fast enough to earn attention.
We improve the player, poster, loading, captions, and page position so the video supports the decision without slowing the page.
Show what the viewer will learn.
A furniture shop uses a video to show how an extending table opens. Before play, the page should show the table, explain that the video demonstrates the extension, and keep dimensions and purchase details available as text. Customers should be able to assess the table even if they do not watch.
Check the page before and during playback.
Load the page before optional playback.
For a click-to-play demonstration, use a clear preview image and avoid downloading the full video unnecessarily before the visitor chooses to watch. Check the actual behaviour on a phone; loading hints are not guarantees. See web.dev’s video performance guidance.
Keep the demonstration understandable.
Show the latch and extension clearly, with enough detail to follow the movement. Check play, pause, captions and fullscreen controls. Keep the video frame stable so starting playback does not push the product details out of reach.
Choose the video setup that fits the page.
Use the table demonstration to compare the choices and test the result.
Should the video be self-hosted or embedded?
A hosted player can provide video delivery and playback features, but its embed may add extra downloads to the page. A directly served file gives you control of the page presentation and requires you to provide suitable files, captions and controls. Compare the features you need and the actual loading behaviour.
Can video hurt Core Web Vitals?
Yes. A large preview image can delay the first useful screen, and an embed can add scripts or move the layout when it appears. Compare the same page and viewport before and after the change, then test the delay between pressing play and seeing the demonstration.
Do captions and transcripts matter?
Captions make spoken instructions available without sound. Check them for accuracy and timing. Add a text description of essential visual steps too: “Slide the latch under the right edge” is more useful than a transcript that only says “Move this.”
Do we need to replace the player?
Only if the current player cannot meet the page’s needs. First identify the failure: a blurry latch needs better video detail; a slow initial page may need different loading; an unusable pause control needs a player fix. Test the same task after the change.
Make video earn its place on the page.
Send the page and video source. Say whether the delay happens before play or during playback, which device shows it, and what the viewer needs to learn from the video.
