Lazy loading video: what it means and when it hurts

Lazy loading means not fetching something until it is about to be needed. For video, it is the difference between a page that downloads ten files nobody will watch and a page that downloads the one somebody is about to.

What happens without it

Ten video cards on a page, all beginning to load as the page parses. They compete for bandwidth with your product images, your fonts and your theme’s scripts — all of which the shopper needs immediately, and none of which get the connection.

The visible result is a page where the important things arrive late because unimportant things were asked for first. On a phone on a middling connection it is stark.

How it works in practice

The browser is told which section a card belongs to, and the card’s real content is requested as that section approaches the viewport. A short margin ahead of the fold means the video is usually ready by the time the shopper reaches it — loaded just in time rather than just in case.

Meanwhile the card shows its poster image. The shopper sees the content immediately; only the playable video waits.

The one place it hurts

Anything above the fold. A hero video, or the first card in a row at the top of a page, is needed immediately by definition — and lazily loading it adds a delay before it appears without saving anything, because it was always going to be fetched.

Worse, if that element is your LCP element, lazy loading it directly damages your LCP. This is a well-known own goal: a site applies loading=“lazy” to every image and video on the page, including the hero, and the headline speed metric gets worse.

Rule of thumb: everything below the fold is lazy, everything above it is not, and the first thing the shopper sees may even deserve a priority hint telling the browser to fetch it early.

Posters are not free either

Ten poster images on a page is still ten images. They should be sized for the card rather than being full-resolution stills, and they should be in a modern format. A page that lazy-loads its video and eagerly loads ten enormous posters has moved the problem rather than solved it.

What to check

Open the network panel, load a page with a video section below the fold, and do not scroll. If video files appear in the waterfall, lazy loading is not working. Then scroll and watch them arrive — that is the behaviour you want.