A homepage video will not slow your website down if five things are true: the file is short and small, it plays muted with a poster image behind it, it is an MP4 served from a stable address on your own domain or a video platform, phones get a lighter file or a still image, and the visitor can pause it. xCreative™ is a Melbourne creative studio in Chadstone. We film brand and property video and we build the WordPress sites the films end up on, so we see both ends of the problem: the editor’s export and the page speed report. Our own homepage runs eleven short muted MP4 loops, and the list below is the one we run on every client site before a video goes live.
Why the video is usually the slowest thing on the page
Google measures how long the largest element above the fold takes to appear and calls the result Largest Contentful Paint. Google’s guidance says a good result is 2.5 seconds or less, measured on real visitors, and for a video the clock stops at the poster image or the first frame, whichever comes first. A hero video with no poster has to download enough of the file to paint a frame before the clock stops. On a phone on the train, that can be the whole 2.5 seconds.
The files clients send us make it worse. The master export from an editing suite is routinely over 100 MB, because it was made for a screen, not a browser. An association client sent us a 104 MB event film this year. It went to 63 MB at 1080p before it went near a page, and a homepage loop cut from it would be a fraction of that.
The second common fault is a video that is not even yours. Themes ship with demo pages, and a demo background video can keep streaming from the theme vendor’s server years after launch. We found exactly that on a site we took over this year: the homepage background was loading from a staging server overseas. The clip was only 758 KB. We downloaded it and hosted it on the client’s own server.
The 88 page lesson
The audit that taught us most this year was a site where the same clip, hosted on a video platform, autoplayed on 88 pages. Each page pulled around 16 MB on a phone before anyone scrolled, and the homepage scored 35 out of 100 on Google’s mobile speed test. The fix was not to delete the video. We muted all 88 embeds in one pass and kept the sound only inside a lightbox that opens when a visitor clicks Watch Video. Whether an autoplaying clip belongs on every page at all is still with the owner, and that is the right place for it: it is a decision about what the site is for, not a technical one.
The general rule we took from it: one autoplaying video per page, on the pages where it earns its place, and a click to play everywhere else.
The format checks nobody mentions in the quote
- MP4, not MOV. Earlier this month we re-wrapped 17 case study videos on our own site from .mov to .mp4. The pictures are untouched; only the container changed. Browser support for .mov is patchy outside Apple devices, while MP4 with H.264 video plays in every browser we test.
- Muted, with playsinline. Chrome’s autoplay policy states that muted autoplay is always allowed, and sound needs the visitor to have interacted with the site first. Apple’s rules for iOS add that a muted video may autoplay only when it is visible, and that without the playsinline attribute an iPhone will open it full screen.
- A poster image. A still of the first frame, exported as a compressed JPG or WebP and set as the poster, is what stops Google’s clock. It is also what a visitor in low power mode sees instead of a black box.
- A lighter path for phones. Phones are where most visitors are and where data costs money. We either serve a smaller file below a set screen width or drop the video and show the poster.
- A pause button. The web accessibility standard, WCAG success criterion 2.2.2, requires a way to pause, stop or hide any moving content that starts automatically, lasts more than five seconds and sits alongside other content. Most hero videos fail this. A small pause control costs nothing, and we also respect the reduced motion setting so the loop never starts for people who have asked their phone for less movement.
Background loop or brand film? They are different jobs
A background loop is decoration. Eight to fifteen seconds, no sound, no story, and no need for Google to find it.
A brand film is content. The Voyage Altona film sells bayside living in ninety seconds and the Kingsley campaign video brings Glen Waverley to buyers who have not visited yet. Films like these are made to be watched and found, and Google’s video guidance is specific about what that takes: a thumbnail Google can fetch, a stable video URL, VideoObject structured data, and a page where the video is the main content. A film buried in a homepage slider does not meet that bar. So the loop goes on the homepage and the film gets its own page with a play button, a poster and a proper description.
We shoot and cut both from the same production day, planned before the camera comes out; see our video production page.
What to ask your web designer before the video goes in
- What does the homepage score on Google’s mobile speed test with the video in place, and without it?
- Who is cutting the web version? The editor’s export is not the web file. Someone has to trim it, strip the audio, encode it and make the poster.
- Which file do phones get, and what happens in low power mode or when autoplay is blocked?
- Can a visitor pause it, and does it stay still for people with reduced motion switched on?
- Is the brand film on a page Google can index, with structured data, or only in a slider?
If the answers are vague, the video will be the slowest thing on your site. If you are comparing agencies, our note on what to prepare before you brief a web design agency covers where video and photography belong in the brief, and our web design team builds the page and the video treatment together. A live site with a heavy video can be fixed without a rebuild under website maintenance, and the footage usually comes from a photography and drone day planned with the website in mind.
How long should a homepage video be?
For an autoplaying background loop, eight to fifteen seconds, cut so the end flows into the start. For a brand film that visitors click to play, ninety seconds to two minutes is the range our property and hospitality films land in. Anything longer belongs on its own page, with a shorter cut on the site.
Should I host the video on my own server or on YouTube or Vimeo?
A small muted loop is fine on your own server, with a poster and a stable file name. A brand film with sound is usually better on a video platform that handles different connection speeds for you, embedded on a page where it is the main content. Whichever you choose, the file must stay at the same address, because Google will not index a video whose URL keeps changing.
Will a homepage video help my Google ranking?
Not by itself. Google rewards pages that load quickly and answer the visitor’s question, and a heavy video works against the first part. A well made film on an indexable page with structured data can earn video results and keep visitors on the site longer, which is a more honest claim than “video boosts rankings”. The video has to pay for its own weight.
