Keep shoppable video fast: Core Web Vitals on Shopify

Speed is part of the shopping experience and part of how search engines rank pages. The good news is that shoppable video can be added without hurting Core Web Vitals, as long as it is built the right way.

Load video only when it is needed

Videos should lazy-load, meaning they only start loading when they scroll into view. A reel near the bottom of a page should not compete for bandwidth with the content at the top. AnotherDev defers its scripts and lazy-loads video for this reason.

Keep the footprint small

A heavy storefront widget is a hidden tax on every page load. The storefront bundle here is tiny, around 12 KB gzipped, and it is designed to avoid layout shift so content does not jump around as the page loads. That protects the Cumulative Layout Shift metric.

Optimize the video files themselves

• Export in MP4 with a 9:16 ratio for vertical reels.
• Aim to keep each clip light, ideally under about 15 MB.
• Trim to the moments that matter rather than uploading long footage.

Measure after you launch

Run a Lighthouse or PageSpeed check before and after adding reels. If a metric moves in the wrong direction, look at video file size first, since that is the most common cause.

← Back to all articles