Why Your Website Videos Are Killing Your Page Speed
Unoptimized video files bloat page load times, hurt Core Web Vitals, and tank search rankings. Here's what's really happening when you drop a raw MP4 onto your site.
You spent weeks perfecting your landing page. The copy is sharp, the design is clean, and that hero video looks incredible. There's just one problem: your page takes 8 seconds to load and Google is burying you in search results.
The culprit? That 47MB video file you exported straight from Premiere and uploaded without a second thought.
The real cost of unoptimized video
Video is the heaviest asset on most web pages. According to HTTP Archive data, the median page weight for sites with video exceeds 4MB (and that's the median). Many product pages and landing pages ship videos north of 20MB without anyone noticing until bounce rates spike.
Here's what happens when a browser encounters a large video file:
- The connection stalls. Even on fast connections, downloading 30-50MB takes time. Meanwhile, everything below the video in the DOM waits.
- Core Web Vitals collapse. Largest Contentful Paint (LCP) measures when the largest visible element finishes rendering. If that element is a video poster or the video itself, you're at the mercy of your file size.
- Cumulative Layout Shift (CLS) spikes. Without proper dimensions or a poster image, the video element causes layout reflow as it loads.
- Mobile users leave. On a 4G connection, a 40MB video takes 30+ seconds to buffer. Most users abandon after 3 seconds.
What Google actually measures
Google's page experience signals directly factor into search rankings. The three Core Web Vitals that matter most:
| Metric | Good | Poor | Video impact |
|---|---|---|---|
| LCP | < 2.5s | > 4.0s | Large videos delay the largest paint |
| FID/INP | < 100ms | > 300ms | Heavy downloads block the main thread |
| CLS | < 0.1 | > 0.25 | Missing dimensions cause layout shifts |
A single unoptimized video can push all three metrics into the "poor" range.
The file size problem nobody talks about
Most video editing software exports at bitrates designed for broadcast or local playback, not the web. A 30-second 1080p clip exported from most editors lands somewhere between 30-80MB. For a website hero section, that same clip can look virtually identical at 2-3MB.
The difference? Bitrate and encoding settings.
A typical export might use a CRF (Constant Rate Factor) of 18 or lower, producing a file that's visually perfect but absurdly large for web delivery. Bumping the CRF to 23-28 reduces file size by 60-80% with minimal visible quality loss, especially for background videos where users aren't scrutinizing every pixel.
What you should actually aim for
Here are practical targets for web video:
- Hero/background videos: Under 3MB for a 15-30 second loop
- Product demos: Under 8MB for a 60-second clip
- Embedded content videos: Under 15MB for 2-3 minutes (or use a streaming service)
- Resolution: 1280x720 is sufficient for most background videos. Full 1920x1080 only when the video is the primary content.
- Frame rate: 24fps is fine for cinematic content. 30fps for screen recordings. You almost never need 60fps on the web.
Quick wins that make an immediate difference
Before you dive into encoding settings, check these basics:
1. Set explicit dimensions
Always include width and height attributes on your <video> element. This prevents layout shift.
<video width="1280" height="720" autoplay muted loop playsinline>
<source src="hero.mp4" type="video/mp4">
</video>2. Use a poster image
A poster image renders instantly while the video loads. It should be a compressed JPEG or WebP under 50KB.
<video poster="hero-poster.webp" autoplay muted loop playsinline>
<source src="hero.mp4" type="video/mp4">
</video>3. Set preload strategically
For above-the-fold videos, preload="auto" is usually fine. For anything below the fold, use preload="none" to avoid downloading video the user may never see.
4. Compress your videos properly
This is where the biggest gains are. A proper compression tool can reduce a 40MB video to 2-3MB without visible quality loss. The key settings are:
- CRF 23-28 for web-appropriate quality
- H.264 codec for maximum browser compatibility
- Strip audio for background/hero videos that play muted
- Appropriate resolution: downscale if the video doesn't need to be 4K
The bottom line
Every megabyte you shave off your video files translates directly to faster load times, better search rankings, and fewer users hitting the back button. The best part? With the right compression settings, your visitors won't notice any quality difference.
Stop uploading raw exports to your website. Your page speed score and your users will thank you.