Five customer videos without the ninety megabytes

A client had five short customer clips for a new home page section, the kind that autoplay muted in a card about 350 pixels wide. Uploaded straight to Shopify and dropped into the section the obvious way, those five clips totalled a touch over ninety megabytes, all of it full 1080p, all of it downloading into cards small enough that the quality was pure waste.

What we did

The interesting part is that Shopify had already solved most of this without saying so. Every uploaded video gets transcoded into a ladder of sizes, but the template variable that lists your video files only ever hands you the largest one. The smaller versions are reachable through the streaming manifest, which is the route video players are meant to use anyway, and modern browsers now play it natively. Served that way, playback starts on the smallest rung that fills the card, which for our cards meant a fraction of the data for an image nobody could tell apart.

We paired that with honest lazy-loading. Nothing preloads, and a small observer starts each clip only when it scrolls into view. On a phone, the section now loads one clip of around five megabytes instead of five clips totalling ninety, and the rest arrive if and when the visitor reaches them.

One warning for anyone tempted by a shortcut. The smaller file URLs look guessable from the original filename, and they are not. The manifest is the supported route, guessing is a future breakage.

What to take from it

Before compressing videos or paying an app to do it, check what your platform already made. The wasteful default is not that the small versions are missing, it is that the biggest file is the easy one to reach. If your home page carries video and your phone traffic matters, how those files are served is worth one focused look, because the difference is not subtle.