How to Use Video on Your Website Without Slowing It Down

Video is one of the most engaging forms of content on the web. A well-produced explainer video can communicate in 60 seconds what would take a visitor five minutes to read, and research consistently shows that pages with video achieve higher dwell times and lower bounce rates. But video is also one of the largest and most performance-threatening assets a webpage can contain.

The challenge is that loading a video file — or even just the player to play one — adds significant weight to a page. An autoplay background video in the hero section, a third-party video player with its own JavaScript bundle, or an unoptimised video file can each add several seconds to your page load time and significantly worsen your Core Web Vitals scores. Understanding how to use video well means understanding how to mitigate these risks.

Hosting Video: YouTube, Vimeo, or Self-Hosted?

Third-party hosting platforms such as YouTube and Vimeo are the most common choice for websites, and for good reason. They handle video compression, adaptive streaming, and delivery — and their players work across all devices without you needing to write any code. The trade-off is that embedding a YouTube player loads a significant amount of third-party JavaScript from Google's servers, which adds to your page's total blocking time and can harm performance scores.

A widely used optimisation technique is the "lazy load YouTube facade" approach: instead of embedding the full YouTube player, display only a thumbnail image on page load. When the visitor clicks the thumbnail, the actual YouTube player loads at that point. Since most visitors do not play every video on a page they visit, this approach means only visitors who actively choose to watch the video trigger the player load. Libraries such as lite-youtube-embed implement this pattern with minimal code.

Self-Hosted Video and Performance Considerations

Self-hosting video — serving the file directly from your own server or CDN — gives you the most control over performance but requires careful handling. Raw video files from a camera or editing software are far too large for web delivery. A 1-minute video exported from a professional camera might be 1GB or more. For web delivery, that same video should typically be under 20MB, achieved through codec selection (H.264 or H.265), resolution matching (serving 720p for most contexts rather than 4K), and compression settings in tools like Handbrake or FFmpeg.

Always include a poster attribute on the HTML video element — a static thumbnail image displayed before the video loads or plays. Without a poster, the video element displays as a blank rectangle while the file loads, which both looks poor and affects your Cumulative Layout Shift score if the video element is above the fold. Serve video over a CDN rather than your origin server to ensure fast delivery for visitors in all locations.

Autoplay, Background Video, and Accessibility

Autoplay video should be used sparingly and only with the audio muted. Unexpected audio from an autoplaying video is one of the fastest ways to cause visitors to leave a page. Most browsers block autoplay with sound by default, but even silent autoplay adds to load time and data consumption — particularly on mobile connections where users may be on a limited data plan.

Always include captions or subtitles for any video with speech or narration. This is both an accessibility requirement and a usability improvement — many people watch video in public without audio, on muted devices, or with hearing impairments. A caption file can also be indexed by search engines, giving your video content additional SEO value beyond what can be inferred from the page title and description alone.