← InsightsTech4 min read
Whyourhomepageopenswithashortvideo,notaphoto
A photo tells a visitor the page loaded. A few seconds of movement gives them a reason to stay. Here is what a hero loop costs in load time, and how we keep the page fast anyway.
Why images are the default
Hero images are the safe choice. They load fast, they are easy to art direct, and you can swap them per campaign without rebuilding anything.
They also do a poor job of communicating atmosphere. A photograph holds attention for about as long as the eye takes to register it. Then the scroll continues.
What a loop does differently
A loop behaves differently. Six seconds of texture, light moving across a wall, type assembling itself, a hand mid gesture, gives a visitor something to settle into. The page becomes a place rather than a flyer. Most readers never work out why they paused. They just paused.
Keeping the page fast
There is a real cost to this. Video is heavier than an image, and lazy hosting will drag down Core Web Vitals if you are careless.
We handle it the obvious way. A poster image loads first and decodes inline, the video starts as soon as it has buffered, and a webm fallback covers browsers that cannot handle the encode size. The visitor sees a still hero in about 200 ms and a moving one half a second later.
What goes in the loop
What you put in the loop matters far more than the fact that it loops at all. Stock cinematography reads as exactly that, and it undoes the effect instantly.
The clip on onyxcreative.asia is a six second still life of work in progress: textures, type and the studio's own workspace. It is a self portrait, running at one frame per second of attention.
Setting the temperature
By the time the loop ends, the reader has already decided whether to keep scrolling. If the hero did its job, the rest of the homepage does not have to convince anyone of anything. It only has to deliver on the temperature the first screen set.