Performance

Video Optimization

Video optimization refers to techniques for embedding and delivering video content on web pages without degrading load performance. Best practices include lazy loading videos, using the correct embed method, serving in modern formats (MP4/WebM), and avoiding autoplay on mobile.

Why It Matters for Shopify Stores

A 10MB product video autoloading on a mobile product page can destroy Core Web Vitals scores and drain mobile data. Shopify stores using product videos should: host on Shopify (not direct self-hosted files), use the video element with poster images, disable autoplay on mobile, and consider lazy loading the video iframe. YouTube or Vimeo embeds that eagerly load can significantly increase Time to Interactive due to their heavy JavaScript payloads.

How to Check Your Store

Check product pages with videos in Chrome DevTools Network tab. Are video files loading immediately, or only when scrolled into view? How large are the video files?

Use the free shopify speed test tool

How to Fix It

Use the HTML5 video element with a poster image. Add loading='lazy' to video iframes. Disable autoplay, or use autoplay only with muted and playsinline attributes. For product videos, consider Shopify's native media support.

Related Terms

Check your store's Video Optimization with our free tools

Get a full audit across all 6 performance categories — including performance — in under 60 seconds.

Run a Free Store Audit