How to Fix Core Web Vitals on Shopify: A Practical Checklist for Store Owners

#shopify #seo #performance #ecommerce

TL;DR

Slow Shopify stores lose rankings. The three culprits are almost always uncompressed images, bloated app JavaScript, and render-blocking scripts. Fix them in that order using Google PageSpeed Insights as your guide. This post gives you the exact steps.

Why This Matters for Your Shopify Store

Page speed is a direct Google ranking factor. Shopify stores that load above 3 - 4 seconds consistently lose positions to faster competitors targeting the same keywords.

Google measures speed through three Core Web Vitals:

LCP (Largest Contentful Paint) - how long the largest visible element takes to render (target: under 2.5s)
CLS (Cumulative Layout Shift) - how much elements shift around during load (target: under 0.1)
INP (Interaction to Next Paint) - how fast the page responds to clicks and input (target: under 200ms)

Stores scoring "Poor" on any of these face a ranking disadvantage against competitors scoring "Good." The problems behind bad scores are predictable. Here's how to fix them.

Step 1: Audit First - Run PageSpeed Insights on Your Key Pages

Before touching any code or installing any tool, go to pagespeed.web.dev and test:

Your top 5 collection pages (highest traffic, highest revenue impact)
Your top 5 product pages
Your homepage

Use the Mobile tab and weight those results more heavily. Google uses mobile-first indexing, so your mobile score is what matters for rankings.

Note every flagged recommendation before making any changes. PageSpeed Insights will tell you exactly which files are causing problems and the estimated time savings for each fix.

Also check Google Search Console → Experience → Core Web Vitals. This shows real-user field data across your entire store, grouped into Good / Needs Improvement / Poor. Use Search Console to track progress over time. Use PageSpeed Insights to diagnose individual pages.

Step 2: Fix Your Images (Biggest Wins, Least Technical Effort)

Uncompressed images are the most widespread speed problem on Shopify stores. A collection page with 24 unoptimized product thumbnails can easily load 15 - 20MB of image data. That directly tanks your LCP score.

What to do:

Compress and convert to WebP. Tools like TinyIMG handle this inside Shopify - compressing existing images, converting to WebP (meaningfully smaller than JPEG/PNG at comparable quality), and applying lazy loading. It also generates alt text, covering speed and on-page SEO in one step.
Add explicit width and height attributes to every <img> tag. When the browser doesn't know an image's dimensions before it loads, surrounding content shifts when the image renders - that's your CLS score taking a hit. Shopify's Liquid image tags support this natively.
Prioritize your hero image. Add fetchpriority="high" and loading="eager" to the above-the-fold hero image on collection and product pages. This tells the browser to load it first, which directly improves LCP.
Lazy load everything else. Off-screen images should only load when a user scrolls toward them.

Step 3: Audit and Remove App JavaScript

Every Shopify app that adds front-end functionality - reviews, chat widgets, pop-ups, loyalty programs, upsell tools, countdown timers - injects JavaScript into your storefront. Each script adds page weight. Multiple scripts can queue up and block the browser from processing user interactions.

This is the primary driver of poor INP scores. When a customer clicks "Add to Cart" and there's a noticeable delay, that's often the browser working through a stack of third-party scripts before it can respond.

What to do:

Go back to your PageSpeed Insights results. Look at "Reduce unused JavaScript" and "Eliminate render-blocking resources." These sections name the specific scripts adding load time and by how much.
Remove inactive or redundant apps. Uninstalling an app in Shopify does not always remove the code it injected into your theme. After uninstalling, check your theme files manually for orphaned <script> tags.
Add defer or async to non-critical scripts. Analytics tags, chat widgets, and marketing pixels (Meta Pixel, Google Ads, TikTok Pixel) don't need to run before your page is visible. Loading them with defer or async prevents them from blocking initial rendering.
Consolidate where possible. Five apps each injecting their own JavaScript is almost always slower than one tool that handles multiple functions in a single integration.

Step 4: Eliminate Render-Blocking Resources

When a browser hits a <script> or <link> tag in the <head>, it stops building the page until that file downloads and executes. This delays LCP directly - the browser can't paint the largest visible element until it's finished processing everything ahead of it.

Common offenders on Shopify:

Google Fonts loaded via standard <link> tags → switch to font-display: swap so a fallback font renders immediately while the custom font loads
Theme JavaScript files loaded synchronously in <head> → move to deferred loading
Tracking pixels without async or defer
Large inline CSS blocks from page builders loading before any content renders

The PageSpeed Insights "Eliminate render-blocking resources" section lists which files are blocking your specific store and the estimated time savings per fix.

Quick-Reference Checklist

Images

[ ] Compress and convert all product/collection images to WebP (TinyIMG or equivalent)
[ ] Confirm all <img> tags have explicit width and height attributes
[ ] Add fetchpriority="high" and loading="eager" to above-the-fold hero images
[ ] Enable lazy loading for below-the-fold images

JavaScript and Apps

[ ] Run PageSpeed Insights and note every "Reduce unused JavaScript" flag
[ ] Remove all inactive or redundant Shopify apps
[ ] Check theme files for orphaned script tags from previously uninstalled apps
[ ] Add async or defer to all third-party tracking and widget scripts

Render-Blocking Resources

[ ] Switch Google Fonts to font-display: swap
[ ] Move non-critical JavaScript out of <head> or defer it
[ ] Review <head> for any synchronously loaded scripts that can be deferred

Monitoring

[ ] Check Google Search Console Core Web Vitals report monthly
[ ] Retest with PageSpeed Insights after each change to confirm improvement

One More Note on Theme Bloat

If you're on a heavily customized or aging premium theme, it may be carrying animation libraries, unused section templates, and slider scripts that add weight on every page - even pages that don't use those features. Before spending hours optimizing around a bloated theme, evaluate whether migrating to a leaner base (Shopify's free Dawn theme is built to perform well on Core Web Vitals by default) gives you a better starting point.

Fixing Core Web Vitals is one of the few SEO investments that improves both rankings and conversion rate at the same time. Fast stores rank better. Fast stores also sell more.

If you want expert help with Shopify SEO beyond just page speed - technical audits, content strategy, collection page optimization - New Seas works specifically with Shopify and ecommerce brands. Check out what they do at newseas.co.