Adding video without slowing your store down

Video is, by weight, usually the largest thing on any page that has it — often by an order of magnitude. A page that adds video carelessly gets slower, and a slower page converts worse, which can quietly cancel out everything the video was doing.

It does not have to. The rules are well understood and mostly about when things load rather than how big they are.

1. Nothing loads before it is needed

The default browser behaviour for a video element is to start fetching. Ten videos on a page means ten fetches competing with your images, your fonts and your theme’s JavaScript for the same connection — most of them for videos nobody will scroll to.

Videos should load when they are close to being seen. Everything below the fold waits. This single change is usually the difference between a video page that is fine and one that is not.

2. A poster image first

A card shows a still image immediately and swaps in the video when the video is actually ready to play. The shopper sees content straight away, and they never see the grey box or the black rectangle that says something is loading.

The alternative — waiting for the video before showing anything — produces a page that looks broken for a second on a good connection and for much longer on a bad one.

3. The widget must not be the largest element

Your Largest Contentful Paint is measured on whatever the biggest thing in the viewport is. If a video widget takes that title, your page’s headline speed metric becomes a measure of how fast a video loads — which is the slowest thing you have.

Keeping widgets out of the LCP position means your score stays about your page: the hero image, the product photo, the headline. That is both a better number and a more useful one.

4. Reserve the space

A card that appears and pushes the page down is a layout shift. It is measured, it is penalised, and — more importantly — it is the thing where a shopper reaches for a link and it moves out from under their thumb.

The height a card will occupy can be known before it loads. Reserving it means the page arrives at its final shape on the first frame and nothing moves afterwards.

The one to watch on your side

Source files. A 4K sixty-second master is not a product card. Videos are processed on upload and served at sensible sizes from Shopify’s CDN, but starting from a more reasonable file makes everything downstream faster, and it makes the upload finish this afternoon.

How to check

Run the page through PageSpeed Insights before and after, and look at field data rather than the lab score if you have it — a lab test on a fast connection will not show you what a phone on a bad signal experiences, and that phone is a large share of your traffic.

The numbers to watch are LCP and CLS. If LCP moved and the new largest element is one of your video cards, the placement is wrong. If CLS moved at all, something is not reserving its space.