# 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.

- Section: Blog (https://videokr.com/blog)
- Page: https://videokr.com/blog/video-page-speed
- Last updated: 2026-08-18

## 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

```html
<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.

## FAQ

### Does embedding video slow down a page?

Only if the player is eager or the box is unreserved. A poster image plus a player mounted on click costs almost nothing until the visitor engages.

## Related

- [Five video embed mistakes that cost you conversions](https://videokr.com/blog/five-embed-mistakes)
- [How to embed a video on a website](https://videokr.com/guides/embed-video-on-website)
- [Embed codes: iframe, script loader and parameters](https://videokr.com/docs/embeds)
- [Videokr technical questions answered](https://videokr.com/answers/videokr-technical-questions)

---
Videokr — Videokr is hosted video for marketing sites: upload or link a video, brand the player, capture emails inside it, embed it anywhere and read second-by-second retention. Free tier forever, $69 lifetime, or metered plans.
Plans: https://videokr.com/#pricing · Full reference: https://videokr.com/llms-full.txt