A short film about your workshop, a product demo, a welcome message from the founder: video can explain a business well. It can also be the heaviest thing on the page, and much of that weight can arrive before anyone decides to watch. The aim here isn't to remove video. It's to make sure visitors download it when they choose to watch, not just because they opened the page.
What a carbon test sees
GreenTracer measures one first, uncached load of your page with Google PageSpeed Insights, on mobile and desktop, and uses the heavier run. The test doesn't scroll, click or press play. So for video, the question that matters is simple: what does the page download on its own, before anyone does anything?
- A video that starts by itself is downloading while the test runs, so it counts.
- A video player that preloads part of the file counts for whatever it fetches.
- An embedded YouTube or Vimeo player that loads its scripts with the page counts, even if the video itself never plays.
- A video that only loads after a click doesn't count, because the test never clicks.
That last point isn't a loophole. Visitors who never press play really do save that download, and those who do press play get the video they asked for.
Think twice about background video
A silent video looping behind the headline is the most expensive way to use video, because every visitor downloads it whether or not they look at it. MDN's video reference notes that the autoplay attribute takes precedence over preload: if a video is set to play by itself, the browser has to start downloading it.
Usually a strong still image does the same job. If the motion really matters, put the video further down the page behind a play button, or keep the clip very short and small. And note that setting autoplay="false" doesn't switch autoplay off; MDN says the attribute has to be removed altogether.
Self-hosted video: poster and preload
If your video file lives on your own site, two attributes on the <video> tag decide most of what loads up front. Your web person or page builder can usually set both.
posteris the image shown before the video plays. Without it, MDN says nothing is shown until the first frame is available. A well-sized poster image (see image weight) gives visitors something to look at without the video file.preload="none"tells the browser not to preload the video. web.dev's guide to lazy-loading video calls it the best chance of avoiding loading the video.preload="metadata"fetches only details such as the video's length. web.dev notes that in most browsers this is the default and a portion of the video is preloaded, so if you want nothing fetched, saynone.
Two cautions from the sources. MDN says preload is a hint the browser doesn't have to follow, and that each browser has its own default. And with none, there may be a short wait when someone presses play. For a video further down the page, that trade is usually worth it.
YouTube and Vimeo: load the player on click
Embedding a video from YouTube or Vimeo means loading their player, with its own scripts, as part of your page. web.dev's embed best practices say that lazy loading a YouTube embed can save approximately 500 KB on the initial page load. There are two ways to get that:
- Lazy-load the iframe. Adding
loading="lazy"to the embed's iframe asks the browser to defer it until it's near the screen. This helps for videos lower down the page; a video at the top will still load straight away. - Use a facade. A facade is a static preview that looks like the player, usually the thumbnail with a play button. The real player only loads when someone clicks. Google's guidance lists ready-made facades for both services, such as lite-youtube-embed and lite-vimeo-embed, and some plugins offer the same idea as a “click to load” option. This works wherever the video sits on the page.
Lighthouse used to have an audit suggesting facades; it was removed in Lighthouse 13, but the guidance page is still published. A facade also means visitors aren't sending requests to the video platform until they choose to watch, which fits well with the consent approach in our article on cookie banners and tags.
A quick video checklist
- List every page with video, and note whether each one plays by itself.
- Replace background or autoplaying video with a still image where you can.
- For self-hosted video, add a
posterimage and setpreload="none"or"metadata". - For YouTube and Vimeo, use a click-to-load facade, or at least lazy-load embeds below the fold.
- Check your page again after the changes. Saved reports keep the earlier check as history, so you can see the difference.
Under the Sustainable Web Design Model v4, each megabyte that no longer loads up front lowers the estimate by about 0.148 g CO₂e per page view (about 0.121 g on a host listed as green). Visitors who press play still download the video, and that's fine: it's data they chose. See how the grades work for what a change in page weight means for your rating.
