Reducing the page-speed impact of embedded videos

Check what an embed loads before anyone presses play. Defer offscreen work, reserve the player's space, then compare the initial page with the first-play experience. The right fix depends on the actual embed and its placement.

Find the cost on the page

A third-party player may add an iframe, scripts and other requests. Compare the page before and after the embed. Test network requests, main-thread work and layout movement on a narrow screen and a slower connection. Do not apply a standard speed penalty to every provider.

Record where the video appears. A player below several sections loads differently from one carrying the opening answer. If a page has several players, ask which are needed and whether each must load immediately.

Use PageSpeed Insights as one before-and-after check, recording its score alongside the requests, main-thread work and layout movement you observe. Keep the test setup consistent so the comparison reflects the embed change.

Defer offscreen players

For an offscreen iframe, loading="lazy" asks the browser to wait until the frame nears the viewport. Timing varies; a quick scroll may show a brief wait. Give the iframe or its container dimensions or an aspect ratio before loading, so surrounding content stays in place.

For example, a Wistia player below several sections can use its iframe embed with loading="lazy"; do not defer it if it carries the opening answer. Wistia's responsive embed pattern reserves space with a relatively positioned wrapper using padding:75% 0 0 and an absolutely positioned iframe; use that proportion only if it suits the intended player shape.

A click-to-load preview shows a static image and loads the player after a visitor acts. It may avoid early player requests, but it adds a step. Use a real, keyboard-operable control with a clear name and visible focus. Provide a usable fallback if the script that inserts the player fails; an image with a play symbol is not itself a player.

If Google video discovery matters, take special care with a dedicated watch page. Google says not to rely on user actions to load the video and to check that a JavaScript-injected video appears in the rendered HTML. Do not assume a click-to-load treatment is compatible with that goal without checking the final page.

Protect prominent content

Do not defer a player or poster the first screen depends on just because lazy loading is available. A video poster can contribute to Largest Contentful Paint. With a native HTML video, loading="lazy" also defers its poster where supported.

Avoid autoplay as a visibility tactic: it can start playback and download before a visitor asks. For a direct HTML video, preload="none" is a hint to avoid early video-data loading and may mean a longer wait after play. It does not control requests inside a third-party iframe.

Compare the whole interaction

After a change, check the initial answer, reserved space, poster, first play, captions and keyboard use in the same page layout. Revisit the page when the embed code, provider or video placement changes. A faster initial view is useful only if visitors can still reach and operate the video.

Track Largest Contentful Paint (LCP) for prominent content. A good LCP is 2.5 seconds or less at the 75th percentile, measured separately for mobile and desktop; compare before and after the change without assuming the embed is the only cause.

Key performance benchmarks for video embeds in Australia

Step-by-step approach to optimising embedded video performance