Journal.

We shoot film for a living, so understand what it costs us to say this: most hero videos should not ship the way they ship. A visitor on hotel wifi or a aging phone waits four seconds, sees a grey box, and leaves. The video was beautiful. Nobody saw it.

The math nobody wants to do

Every extra second of load time bleeds mobile visitors. Search engines measure it too. A slow Largest Contentful Paint drags your rankings, which means the video is not just losing the people who arrive, it is shrinking the number who arrive in the first place. You pay for it twice.

How we ship film without the bloat

Short loops. Six to nine seconds, no audio track, ever. AV1 or WebM at a hard bitrate cap, with a poster frame matched to the first frame so there is no flash of nothing. Our rule is simple: the hero media plus the page’s fonts and CSS together stay under what a mid-range phone can chew through instantly on 4G. The showreel lives one click deeper, where the visitor chose to go.

Video should feel like the site is alive. If it feels like the site is loading, it has failed at the only job it had.

What the pipeline actually looks like

When we shoot hero footage for a client, the edit is only half the job. The deliverable includes a web master cut specifically for the browser: six to nine seconds, color graded for the grade to survive compression, exported in AV1 with a WebM fallback, and capped at a bitrate that keeps the file under two megabytes. The first frame of the video is exported as the poster image, so there is no flash of empty player while anything loads. If the connection is slow, the poster is the experience. And it is a frame we chose, not a grey box the browser chose.

Audio never ships. Not muted-by-default autoplay with a sound toggle. No audio track in the file at all. An empty audio track still costs bytes, and a hero video that makes noise uninvited is the fastest way to get a tab closed. If the piece needs sound, it is a showreel, and the showreel lives one click deeper where the visitor opted in.

A before and after we are allowed to share

A trades client came to us with a gorgeous forty-five-second drone opener on their homepage. Beautiful work. Also sixty megabytes. Their analytics showed mobile visitors leaving at a rate that made the owner wince when we walked him through it. We recut the footage to seven seconds, re-encoded it properly, added a matched poster frame, and moved the full drone piece to a dedicated project page where it belongs. Same footage, same brand feel. But the homepage payload dropped by ninety-five percent, and the quote-request rate on mobile climbed within the first month. The video did not get worse. The delivery got honest.

The accessibility part nobody budgets for

Motion is not neutral. A meaningful number of visitors have vestibular sensitivity, and every operating system lets them say so. We respect the reduced-motion setting on every site we ship: the video does not autoplay, the parallax is off, and the page reads as a calm, static layout. This is not charity. It is table stakes for a professional build, and it takes about an hour when it is planned and weeks when it is not.

When the hero video is worth it

None of this is an argument against video. A slow push-in on a chef’s hands, foam rolling off a freshly detailed hood, a room filling with people before an event. The right seven seconds does more brand work than three paragraphs of copy. The argument is against unearned video: stock-feeling footage chosen because “sites have video now,” encoded by whatever the editor’s default export preset was, dropped into the hero because nobody measured anything. Film is our first craft. That is exactly why we are ruthless about how it ships.

How to audit your own site in five minutes

Open your homepage on your phone, on cellular, with the cache cold. Count the seconds until the page feels done. If it is more than three, something is too heavy, and it is usually the media. Then open your browser’s network tools and sort by size. The top three rows are almost always the hero video, a font family with eight weights when two would do, and an image that was exported straight from a camera. None of these require a redesign to fix. They require someone to care about the last mile.

That is the whole discipline, honestly. Care about the last mile. The moment between a stranger tapping your link and deciding whether you are worth their time. The footage can be cinematic. The delivery has to be invisible.

The device drawer

We keep a small, unfashionable collection of hardware in the studio: a mid-range Android from a few years ago, an older iPhone, a laptop that was mid-tier when it was new. Every hero video ships only after it has played smoothly on all of them, on cellular, not office wifi. The newest flagship is a lie. It makes everything feel fast. The three-year-old phone on a bus is the truth. If the video stutters there, it gets re-encoded, shortened, or cut. The footage is never the boss of the page.

The numbers worth watching

If you take one measurement habit from this article, take this one: check your Largest Contentful Paint on mobile, monthly. It is the metric search engines actually use for page experience, and it is almost always dominated by the hero. Under two and a half seconds is the passing grade; under two is where conversions start compounding. Pair it with your bounce rate and your inquiry count, and you have a dashboard a sole proprietor can read in ninety seconds. No analytics degree required. Just the discipline to look.

What about background video above the fold entirely

Sometimes the right answer is no video at all. A striking photograph, properly compressed, arrives in a fraction of the time and never buffers. Several of our best-performing client pages lead with a still image and earn their motion further down. A gallery, a scroll moment, a project reel where the visitor chose to invest attention. Movement should be a reward for engagement, not a tax on arrival.

And if you are working with a videographer now, send them this paragraph: ask for the web master, not just the master. Six to nine seconds, silent, AV1 with a WebM fallback, a poster frame matched to frame one, under two megabytes. Any editor worth hiring will nod. The ones who push back are optimizing for their reel, not your revenue.

The caching question

One technical detail worth demanding from whoever hosts your site: hero media should be served with long-lived cache headers from a content network, so the second visit costs the visitor almost nothing. First impressions get the attention, but most business comes from the second or third visit. The person who saw you once and came back. If your hero video re-downloads in full on every return, you are taxing your warmest audience. That is a hosting configuration, not a redesign, and it takes minutes to fix once someone actually looks.

A note on measuring what changed

When you fix a heavy hero, expect the effect to show up in this order: load metrics first, within days; engagement second, over a few weeks; inquiries last, over a month or two. Clients sometimes celebrate the speed number and then panic when the phone does not ring the following Tuesday. Behavior change lags technical change. Give it a full month, compare like-for-like periods, and judge on inquiries rather than traffic. Traffic is weather, inquiries are climate.

The uncomfortable summary is this: the hero video problem was never about video. It is about whether anyone on the project was responsible for the visitor’s time. On our projects, someone is. That is the entire deliverable, and everything else, the footage, the code, the design, is in service of it.

If you take nothing else from this piece, take the order of operations: cut first, encode properly, deliver conditionally, measure after. In that order. Skipping to the end, bolting a speed plugin onto a sixty-megabyte hero, is how sites end up fast on paper and slow in pockets. The browser does not care what the report says. Neither does the visitor deciding whether you are worth a call.

One prediction, and then we will stop: within two years, connection-aware media will be the default rather than the craft move. Browsers and frameworks are already converging on it. The studios that built the habit early will look prescient. Everyone else will be retroactively embarrassed by the sixty-megabyte heroes in their portfolio. We would rather be in the first group. It is more comfortable here, and the coffee is better.