Keeping video off your critical path

Do not mount a player until it is needed: render a poster image in a correctly-shaped box, load the player on intersection or click, keep the iframe lazy, and preload nothing beyond metadata. A video page can score as well as a text page — the cost comes from eager players and unreserved space, not from the video itself.

Updated 2026-08-18 · Markdown version

The three costs

1. Layout shift when the player appears in space that was not reserved.
2. Bytes for a player nobody used.
3. Main-thread time for scripts a visitor who never pressed play did not need.

All three are avoidable without giving up the video.

Reserve the box

<div style="aspect-ratio:16/9;width:100%">…</div>

Do this at the outermost element, not on the iframe alone, so the space exists during the very first paint. This is the single highest-leverage fix, and it is one line.

Poster first, player later

For an above-the-fold hero, render an <img> poster inside that box with a real button over it, and mount the player on click or on intersection. Details that matter:

• The poster is a modern format (WebP/AVIF) with width and height set.
• Above-the-fold posters are the one thing worth prioritising — a lazy hero image is a slow hero image.
• The button is a real <button>, so keyboard users and screen readers can start the video.

Keep the embed lazy

loading="lazy" on every iframe below the fold. And do not preload video: preload="metadata" on a native element is the ceiling, auto on a page with several videos downloads megabytes speculatively.

Third-party weight

A social-platform embed brings its own framework, its own cookies and its own domains, and you cannot trim it. A first-party player you configure is smaller by construction, which is one of the less-discussed reasons to move money-page video off a public platform.

Fonts, motion, and the rest of the page

While you are here: self-host fonts with metric-matched fallbacks so the text does not reflow, and honour prefers-reduced-motion in any player animation. Both are small and both show up in the same audit as the video.

Verify, do not assume

Run the page in a lab tool before and after, on mobile emulation, and check the layout-shift number specifically — that is the one video breaks. Then load it on a real phone and scroll fast past the video: if the page stalls, something is still eager.