Video is one of the heaviest things you can put on a page, but it does not have to slow the site. Defer the video until it is needed, show a lightweight placeholder first, reserve its space so the layout does not jump, and treat any video at the very top of the page as a special case.
Choose the delivery method first
| Approach | Good for | Watch out for |
|---|---|---|
| Third-party embed (for example a YouTube iframe) | Long videos, easy hosting and streaming | The player script and assets load even if nobody presses play |
| Facade over a third-party embed | Same videos, much lighter first load | Needs a small component or library |
| Self-hosted file with the video element | Short loops, hero clips, full design control | You own the file size, formats and bandwidth |
| Dedicated video platform | Large libraries, adaptive streaming | Another service and cost to manage |
Facade embeds: the biggest single win
A facade is a static stand-in that looks like the embed but does nothing until the visitor interacts with it. According to web.dev’s guidance on third-party embeds, the real embed loads only after a click, which makes the initial load far lighter. For YouTube, the article recommends the lite-youtube-embed facade and says it is 224 times faster than the actual player, and notes that simply adding loading="lazy" to a YouTube embed can save about 500 KB on initial page load. Those are figures from web.dev’s own article, so your results will vary with the page.
Native lazy loading is the simpler option. A facade gives you more control over when the heavy player arrives, because browsers decide the lazy-loading threshold themselves.
Self-hosted video: the details that matter
If you host a short clip yourself, web.dev’s guide to lazy loading video covers the key attributes:
preload="none"stops the browser fetching video data until it is needed. The default value ofmetadatacan download more than you want.- A
posterimage holds the video’s place and gives the visitor something to look at while nothing has loaded. loading="lazy"on the video element defers both the media and its poster where supported, but the guide still recommends setting poster and preload.- For background loops that replace an animated GIF, use
autoplay muted loop playsinline. The guide notesplaysinlineis required for autoplay on iOS. - Load metadata on hover by switching
preloadtometadatawhen the pointer enters the video, which shortens the delay before playback.
Keep loops short and purposeful. A two-second looping clip is cheap; a thirty-second autoplaying background is not.
The hero video exception
If the video is the largest visible element at the top of the page, it can be the Largest Contentful Paint element. web.dev’s guidance is that such videos should not use loading="lazy"; instead, use a poster image, preload it with fetchpriority="high", and do not defer the video. In practice that means the poster image, not the video file, is what the browser needs first. For background on why this metric matters, see Website Speed and Core Web Vitals: What They Mean for Business.
Stop layout shift
Embeds that arrive late push content around. web.dev’s embed guidance says to reserve space by setting width and height on iframes, or a fixed size on the container, so the page does not shift when the player loads. Some providers omit dimensions in their embed code, so size the container yourself.
A short checklist before publishing
- Does the page need video at all, or would a still image and a link do the same job?
- Is the video below the fold? If so, use a facade or lazy loading.
- Is there a poster image sized for the layout and compressed?
- Is the space reserved with fixed dimensions or an aspect-ratio container?
- For self-hosted clips, is
preloadset deliberately and is the file as small as quality allows? - Does it work on a mid-range phone on a mobile connection?
- Is there a text alternative or transcript where the content depends on audio?
Trade-offs
- Facades add one extra click before playback. For conversion-critical videos, a clear play button and poster usually make that acceptable.
- Self-hosting avoids third-party scripts but shifts storage, encoding and bandwidth to you, and a single large file served without adaptive streaming can perform poorly on slow connections.
- Framework choice affects how easily you can ship less JavaScript. Astro vs WordPress for High-Performance Business Websites compares approaches, and Building Interactive Websites That Go Beyond Static Pages covers where richer media fits.
Where Radiance Impact fits
Radiance Impact’s Technology team builds business websites and landing pages, and its Studio produces the video that goes on them. If you want a page that shows video without paying for it in speed, see Digital Technology and AI Solutions or contact us.
Sources
- Lazy loading video, web.dev
- Best practices for using third-party embeds, web.dev
