Using Video on Websites Without Killing Page Speed

Video is one of the most powerful content formats on the web. Product videos increase conversion rates. Background videos create atmosphere. Testimonial videos build trust faster than written text. But video files are large, streaming requires bandwidth, and the typical approaches for embedding video — pasting a YouTube iframe into a page, or uploading an MP4 directly without any consideration for file size — can add several seconds to your page’s load time and dramatically reduce your performance scores.

At Xpose, we help businesses in Norwich and across the UK use video effectively on their websites without sacrificing performance. This guide covers the main approaches to video hosting and embedding, how to implement video so it doesn’t block page loading, and the specific techniques that allow you to have visually impressive video content while still passing Core Web Vitals assessments.

The Problem with Default Video Embedding

The simplest way to add a video to a website is to copy the embed code from YouTube or Vimeo and paste it into your page. The problem is that the standard YouTube iframe loads a significant amount of JavaScript, CSS, and tracking code from Google’s servers as soon as the page loads — regardless of whether the visitor ever clicks play. Studies have shown that a single default YouTube embed can add 500KB or more to a page’s total download size and block rendering for several hundred milliseconds, which directly harms your Largest Contentful Paint and Total Blocking Time scores.

The same issue applies to self-hosted video. Uploading an uncompressed MP4 to your media library and embedding it with a `<video>` tag might put a 50MB file in front of visitors, most of whom will never watch more than the first few seconds. Even video files that have been compressed but not properly encoded for web streaming can cause problems: the browser needs to download metadata from the start of the file before it can begin playing, and if the file isn’t structured correctly, this metadata might not arrive until much of the file has been downloaded.

Best Practices for Video Hosting

For most business websites, the best approach is to host video on a dedicated platform — YouTube, Vimeo, or a business-focused alternative like Wistia or Bunny.net — and use a lazy-loading embed technique on your website. Instead of loading the full embed iframe on page load, show a static thumbnail image with a play button overlay. Only when the visitor clicks the thumbnail does the actual video player load. This technique, sometimes called a "facade" or "lite embed," keeps your initial page load fast while still offering full video functionality to visitors who want it.

For background video — the autoplay, muted video clips used as hero backgrounds — self-hosting is often the better choice because you need precise control over when and how the video loads. Encode your background video as both MP4 (H.264 codec) and WebM (VP9 codec) for cross-browser compatibility. Compress it aggressively: a background video clip typically doesn’t need to be longer than 10–15 seconds, and at 720p resolution with appropriate codec settings can be under 1MB. Use the `preload="none"` or `preload="metadata"` attribute to prevent the browser from downloading the video file before it’s needed, and add a static poster image that displays while the video loads.

Making Video and Performance Work Together

The key principle is lazy loading: don’t load video assets until they’re needed. For embedded YouTube or Vimeo videos, use a facade library like `lite-youtube-embed` (an open-source web component) or the equivalent for Vimeo. For self-hosted videos below the fold, use the `loading="lazy"` attribute or an Intersection Observer to delay loading until the video is about to enter the viewport. These approaches ensure your initial page load is fast, your Core Web Vitals scores remain healthy, and video performance only becomes a factor for visitors who scroll to or actively choose to watch the video.

At Xpose, when we build sites with video content we also recommend hosting video assets on a CDN rather than directly on the web server. Video files are large and serving them directly from your hosting server consumes significant bandwidth and server resources. Services like Bunny.net offer video CDN hosting at very low cost, automatically transcoding your videos to multiple qualities and formats and serving them from the closest server to each visitor. This combination — facade embeds for third-party video, CDN hosting for self-hosted video, lazy loading throughout — allows businesses to use video extensively without any negative impact on page speed scores.