The designer showed you the home page with a looping video behind the headline: the kitchen at work, the team on site, the product being made. It looked great on their big monitor. On your phone, on a train, the headline sits over a black box for several seconds, and the rest of the page feels sticky until the video finally starts.
A background video slowing down your site is a familiar problem on modern business websites, and it is a genuine trade-off rather than a simple mistake. This post helps you decide whether yours should stay, and if it does, how to make it far lighter.
What a background video costs the visitor
A photo at the top of a page might be a few hundred kilobytes once optimised. A video, even a short one, is almost always much heavier, because it is many images in a row. For a visitor that cost shows up in several ways.
- Download size. The browser has to fetch enough of the file to start playing, and then keeps fetching as it loops. On mobile data, that is data the visitor pays for without asking for it.
- Competition with the page. While the video downloads, it shares the connection with the fonts, styles and images that make up the rest of the page. The headline may be ready, but everything around it waits longer.
- Processing. Decoding video uses the phone’s processor and battery. On a mid-range phone, a playing video can make scrolling and tapping feel less responsive.
- The first view. Until the video has loaded, the visitor sees whatever is behind it: a poster image if you set one, a solid colour if you did not.
None of these is dramatic on fast office broadband, which is why the problem is often missed until someone looks at the site on a normal phone.
Should it stay? Four honest questions
- Does it show something a photo cannot? Movement that explains the business, such as a process, a place or a product in use, can earn its weight. A slow pan across an office or generic stock footage usually does not.
- Can people actually see it? With a headline, a button and a dark overlay on top, much of the video is hidden. On a phone, the visible strip may be tiny.
- Does it make the text harder to read? Moving footage behind words is tiring for many people. If you had to add a heavy overlay to keep the headline readable, the video is already fighting the page.
- Who is your typical visitor? If many customers arrive on phones with patchy signal, the video costs more than it gives. Our post on building a website for slow internet connections goes further into designing for those visitors.
If the answers point to “decorative”, replacing it with one strong, well-compressed photo is often the best speed fix on the page. If the video genuinely helps, keep reading.
Making a background video much lighter
Most of the gains in hero video speed come from the file itself, not from clever code. Work through these in order.
Cut it short
A background loop rarely needs to be long. A clip of several seconds that loops smoothly does the same job as a minute of footage at a fraction of the size. Pick the best moment and trim to it.
Remove the audio track
Background videos play muted anyway. An audio track that nobody hears still adds to the file. Most video editors and free converters let you export without sound.
Export at a modest resolution and bitrate
Under a text overlay, on a phone or even a laptop, a background video does not need cinema quality. Export it at a resolution close to the size it is displayed and turn the bitrate down until you can see the difference, then go back up a step. A slightly soft background is fine; it can even make the text easier to read.
Choose a widely supported format
MP4 using the H.264 codec plays in every current browser, so it is the safe main file. You can offer a WebM version as an extra source if it comes out smaller. Avoid using an animated GIF as a “lighter” alternative: GIFs are usually much heavier than a video of the same clip.
Always set a poster image
The poster is the still image the browser shows before the video plays. Without one, visitors see a blank area. With one, the page looks finished straight away, and if the video never plays, nothing looks broken. Use a well-compressed frame from the video itself so the switch is barely noticeable. On many pages this poster is the largest thing on screen when the page loads, which can make it the element measured for Largest Contentful Paint, so treat it like any other hero image.
Set the video up to play quietly
Browsers generally only allow video to autoplay without a click when it is muted, and iPhones also need the video to be marked to play inline rather than full screen. Page builders usually handle this when you choose a background video. If a developer has written the code by hand, it should include the muted, autoplay, loop and playsinline attributes, plus a poster.
Host the file sensibly
A self-hosted MP4 is served by your hosting or CDN and loads nothing else. Using a YouTube or Vimeo video as a background brings in the whole player and its scripts, the same cost described in our post on YouTube embeds that slow a page. For a short silent loop, a properly compressed file on your own site or CDN is usually lighter.
Phones: replace the video, do not just hide it
Many sites decide to show the video on desktop only. That is a reasonable choice, but how it is done matters. If the video is simply hidden with styling on small screens, some browsers may still download part of it. The better approach is to not load it at all on phones and show the poster image instead.
Most page builders have a setting for this, often something like “play on mobile” in the background video options, with a fallback image. After changing it, check on a phone-sized view in the browser’s developer tools, with the Network panel open, that no video file is being requested.
There is another reason to rely on a good poster on mobile: some phones block autoplay in battery-saving or data-saving modes. Visitors then see the poster or a play icon instead of the video. If the poster looks good, they never know they missed anything.
Motion and accessibility
Constant movement behind text can be uncomfortable for people with attention or vestibular conditions. Accessibility guidelines expect a way to pause moving content that plays automatically for more than five seconds, so a looping background video should have a visible pause button. Operating systems also let people ask for reduced motion, and a well-built site respects that by showing the poster instead of playing the video. Our explanation of the WCAG accessibility guidelines covers the wider picture.
These steps are not only about compliance. A pause button and a reduced-motion fallback also stop the video using a visitor’s battery and processor once they have seen it.
When to drop it altogether
Sometimes the honest fix for a background video slowing down your site is to take it out. These are the signs.
- The video is generic stock footage that does not show your business.
- It is hidden behind so much text and overlay that it reads as a moving texture.
- It is the main reason the home page is slow on mobile, and compressing it has not been enough.
- Your enquiries come mainly from phones, and you are already showing the poster there anyway.
- Nobody on the team can say what the video adds.
A single good photograph, or a short video lower on the page that people choose to play, often communicates just as well. Video is one of several heavy media choices covered in our overview of images and media that slow a website down.
Measuring before and after
Test the home page on mobile and desktop before you change anything, and note the size of the video file, the total page weight, the LCP time and what the first view looks like on a real phone. Make one change at a time: trimming, then compressing, then the mobile fallback. Test after each. You will see which step did the most, and you will have numbers to show anyone who asks why the video now looks slightly different. For other ways to lighten a page, the guide on how to make a website load faster covers the rest.
Frequently asked questions
How big should a background video file be?
There is no single correct number, because it depends on length, resolution and content. Aim for the smallest file that still looks acceptable under your overlay, and compare it with the rest of the page. If the video weighs more than everything else on the page combined, it is worth trimming or compressing further.
Does a background video affect Core Web Vitals?
It can. The poster or first frame is often measured as the Largest Contentful Paint, so a missing or heavy poster can slow that metric. Video decoding on a weak phone can also make interactions feel slower. Setting a light poster and not loading the video on phones usually helps most.
Is it better to use a GIF instead of a video for a short loop?
Usually not. A GIF stores every frame with a limited colour palette and little compression between frames, so it often ends up much heavier than a short MP4 of the same clip and looks worse. A muted, looping video with a poster image is normally the lighter and sharper choice.
Can I lazy load a background video?
A video at the very top of the page is visible straight away, so delaying it only means visitors stare at the poster longer. Lazy loading makes sense for videos lower down the page. For the hero, the useful steps are a light poster, a short compressed file and no video at all on phones.
Heavy media at the top of the home page is one of the things the audit in our website speed optimisation service looks at. You get a prioritised list of fixes, nothing changes without your approval, and the before-and-after comparison shows what the video was costing.
Next in this series: Do Sliders Slow Down Websites? What to Check and Change
