My product video looks great but it's wrecking my Shopify page speed score — what am I doing wrong?
A looping product video looks great, but swapping it in for a photo can tank your page speed and Largest Contentful Paint. Here's how to get the visual upgrade without the performance hit.
What's going on
A lot of merchants want a looping, silent product video instead of a static photo — it shows fabric movement, a mechanism working, or just feels more premium. But swap a plain image for even a short video and your Lighthouse or PageSpeed score drops, especially on mobile: Largest Contentful Paint gets slower because the browser has to fetch and decode video data before it can paint anything, and if the video's dimensions don't match a placeholder, you also pick up Cumulative Layout Shift.
The frustrating part is that it doesn't feel like it should be this hard — you're not embedding a five-minute video, just a few seconds on loop. But naive implementations, like uploading a large uncompressed clip and letting it autoplay on page load with no poster image, end up loading video bytes in the same critical window as your fonts, main product image, and app scripts, which is exactly what tanks the score.
The fix isn't "don't use video" — it's making the video behave like an enhancement layered on top of a fast-loading photo, rather than a replacement for one.
Why it happens
Video is fundamentally heavier than a photo: even a short, compressed clip is typically much larger than a JPEG or WebP of the same visual area, and the browser has to buffer and decode it rather than just paint pixels. When a video is set to autoplay without a poster image, the browser either shows nothing until enough video data arrives, or downloads part of the file just to render a first frame — both are bad for load-speed metrics.
The other common cause is layout instability: if the video element renders at a different size than the image it replaced, or than the placeholder box the theme reserved, the page content jumps once the video is ready. That shows up directly as Cumulative Layout Shift in Core Web Vitals.
5 ways to fix it
Use a static poster image so the video isn't part of the initial page load
Shopify lets you add video to a product's media gallery the same way you add photos, and you can choose which frame (or upload a custom image) becomes that video's cover. The cover image is what actually paints first — the video file itself only needs to load once a shopper presses play or scrolls it into view. This is the single biggest lever you have: it decouples "looks like a product photo" from "has to behave like a video" during the page's critical loading window.
Keep autoplay muted, and don't trigger it on page load
Every major browser will only autoplay video that's muted; anything with sound requires a tap. If you want a silent, looping clip, that behavior typically comes from the theme's own video markup rather than a single admin toggle, and not every theme handles it the same way out of the box. Whatever your setup, trigger playback once the video scrolls into view, not the instant the page loads — that keeps it from competing with your fonts, main product image, and app scripts for bandwidth during the window that determines your speed score.
Compress and trim the source file before you upload it
Shopify's upload limits are generous, but your performance score doesn't care what the ceiling is — it cares what you actually ship. Re-encode clips in a standard, well-compressed format, trim them to the shortest loop that still reads as a demo (a few seconds is usually enough), and strip the audio track entirely if you're going the silent-loop route, since it adds weight for zero benefit on a muted video.
Reserve the layout space so swapping in the video doesn't shift the page
A lot of "video hurts my speed score" complaints are really about layout shift, not byte weight: the video element renders at a different size than the poster image, or a blank box appears before either is ready, and the page jumps once the video loads. Make sure your theme reserves a fixed-size slot for that media item so the poster and the video occupy identical dimensions. This is a theme-code fix rather than an admin setting, so if your current theme doesn't do it cleanly, it's worth raising with whoever maintains your theme.
Use video selectively instead of on every product
Video earns its cost on products where motion actually explains something a photo can't — fabric drape, a mechanism in action, texture — and costs you nothing on the products where it doesn't. Since video sits in the same media gallery as your images, you can mix formats: keep a fast-loading photo first for the grid and the initial paint, and place the looping video second or third for shoppers who scroll to it, rather than making video the hero on every listing.
Bottom line
There's no setting that makes video free, but the tradeoff is manageable with what's already available to you: a genuinely fast poster image, autoplay that's muted and scroll-triggered rather than immediate, a compressed and trimmed source file, and a theme that reserves space so nothing jumps. Most of the fix is encoding discipline and theme markup, not a paid app — though if you're managing this across a large catalog, a bulk media or performance app can save time rather than being required to solve the core problem.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.