Before we start, leave your email. If the chat drops, our reply reaches you there.
Learn how to use videos on your site without slowing it down, and discover best practices for embedding and compression.
Videos are one of the most engaging content formats on the internet. Pages with video can have conversion rates up to 80% higher than pages without. However, videos are also one of the biggest performance culprits, potentially adding seconds to load time if not implemented correctly.
The challenge is finding the perfect balance: using videos to engage and convert, without sacrificing site speed. This article shows you how to achieve that.
The first decision is where to host your videos. Hosting directly on your server (self-hosted) might seem simpler, but it's usually the worst option for performance.
Platforms like YouTube, Vimeo, or Wistia offer significant advantages: global CDN for fast delivery, automatic transcoding for different devices, adaptive streaming that adjusts quality based on user connection, and infrastructure optimized for serving videos.
The golden rule is: never host heavy videos on the same server as your website. This consumes bandwidth, memory, and can slow down the entire site.
Even when using embeds from external platforms, each embed loads scripts, styles, and preloads video data. A YouTube embed, for example, can add over 500KB of resources to your page.
The solution is to implement lazy loading: the video only loads when the user interacts with it or when it enters the viewport. Popular techniques include:
If you really need to host videos on your own server, follow these practices to minimize the performance impact:
Use the MP4 format with H.264 codec for maximum compatibility, or WebM with VP9 for better compression. Offer multiple resolutions and use the preload="none" or preload="metadata" attribute on the video tag to avoid automatic download.
Never use autoplay with heavy videos. If you need a background video (hero video), use highly compressed, short versions (5-15 seconds) without audio. Consider replacing them with optimized GIFs or CSS animations for similar visual impact.
Poorly implemented videos mainly affect two metrics: LCP (Largest Contentful Paint), if the video is the largest visible element, and CLS (Cumulative Layout Shift), if the video space is not reserved correctly.
To avoid CLS, always set width and height on the video container, maintaining the correct aspect ratio. Use CSS with aspect-ratio: 16/9 to ensure space is reserved before the video loads.
To protect LCP, avoid having the video as the main element above the fold. If you need a hero video, consider using a poster (static image) that loads instantly while the video downloads in the background.
Written by
We build websites that build themselves, for American small businesses that would rather run the business.
Images are the heaviest part of almost every website. See which formats to use, what dimensions, and how to compress without losing quality, so your site loads fast.
Every extra second of loading time hurts conversions. See, without jargon, what makes a website slow on mobile and how to find out what is slowing yours down.
The 3 numbers you need to calculate your monthly loss from poor speed. Spoiler: it's probably more than the cost of rebuilding.
The builder writes, designs, and structures your site with everything these articles teach. Watching it happen is free.
Full preview · No account · No credit card