Core Web Vitals for Ecommerce: A Practical Checklist

Core Web Vitals are not an SEO checkbox, they’re a proxy for whether your site feels broken to a shopper on a mid-range phone with average signal. Fixing them usually moves conversion rate more than it moves rankings. Here’s what actually matters and where to look first.

The three metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Each has different causes and different fixes. Treat them separately.

LCP: the hero image is almost always the culprit

LCP measures how long it takes the largest visible element to render, and on ecommerce sites that’s nearly always the hero banner or the first product image above the fold.

Checklist:

• Serve the hero image at the actual display size, not a 3000px original scaled down by CSS. On Shopify, use image_url with explicit width parameters matched to your breakpoints.
• Add loading="eager" and fetchpriority="high" to the hero image. Every other below-fold image should stay lazy-loaded.
• Preload the hero image in the document head if it’s not discoverable early enough by the browser’s preload scanner, especially if it’s set via CSS background-image instead of an <img> tag.
• Avoid CSS background-image for the LCP element entirely where possible. Preload scanners find <img src> far more reliably than background images buried in a stylesheet.
• Check font loading isn’t blocking text render if a text element is your LCP candidate instead of an image. Use font-display: swap and preload critical font files.
• Confirm your CDN and image format are doing their job. WebP or AVIF, correctly compressed, matters more than most people assume.
• Test on a throttled mobile profile, not just desktop. LCP on 4G with a mid-tier device is the number that matters, desktop broadband numbers will lie to you.

A rule of thumb: if your LCP element takes more than one network round trip to discover (JS has to run before the image URL exists), you have a structural problem worth fixing before anything else.

INP: death by a thousand scripts

INP measures responsiveness, how long the page takes to respond after a real interaction like a tap or click. It replaced First Input Delay because it captures the whole interaction lifecycle, not just the first one. On ecommerce sites, INP problems are almost always caused by JavaScript, specifically too much of it running on the main thread.

Common causes on Shopify and similar platforms:

• Too many third-party apps, each injecting its own script tag, each doing its own DOM work on load.
• Review widgets, personalization tools, and chat widgets that parse the whole page on init instead of lazily.
• Heavy event handlers on cart drawers, quick-add buttons, and filter UI that trigger large re-renders.
• Analytics and tracking pixels stacking up, each one adding parse and execution time.

Checklist:

• Audit every installed app for its script weight. Use browser dev tools’ Performance panel or Lighthouse’s “reduce JavaScript execution time” section, not app store ratings, to judge impact.
• Defer or lazy-load anything not needed for the initial interaction. Chat widgets and review carousels rarely need to load before a user scrolls near them.
• Check for apps that duplicate functionality already in the theme, redundant sliders, redundant lazy-load libraries, redundant polyfills for browsers you don’t support.
• Debounce or throttle expensive handlers tied to scroll, resize, or rapid clicks (quantity steppers, filter toggles).
• Break up long tasks. If a single function blocks the main thread for more than 50ms, look for ways to chunk it or move it off the critical path.
• Remove apps you installed for a campaign and forgot to uninstall. This is more common than it should be and it’s pure dead weight.

The uncomfortable truth here is that most INP problems are an app governance problem, not a code problem. Every app added without a removal plan is a tax on every future page load.

CLS: layout shift from things you can predict

CLS measures visual stability, whether content jumps around as the page loads. It’s usually the easiest of the three to fix because the causes are mechanical.

Checklist:

• Every <img> tag has explicit width and height attributes (or aspect-ratio in CSS), so the browser reserves space before the image loads.
• Web fonts use font-display: swap with a fallback font stack that’s metric-matched closely enough to avoid a visible reflow when the real font loads.
• Reserve space for injected content: cookie banners, announcement bars, app-injected badges (like a reviews star rating snippet loaded via JS) should have a fixed-height container, not one that expands once content arrives.
• Avoid inserting new content above existing content unless it’s in direct response to a user interaction.
• Check ad or promo banners injected by marketing apps. These are a frequent, avoidable source of layout shift because they render after everything else and push content down.
• Test the add-to-cart flow and cart drawer specifically. Cart drawers that animate in strangely or cause background scroll shift are a common CLS source that generic audits miss.

How to audit a Shopify store

A practical, repeatable process:

1. Run Lighthouse in an incognito Chrome window on a throttled mobile profile, on your actual homepage, a real collection page, and a real product page. Don’t just test the homepage, product pages usually have worse scores and matter more for conversion.
2. Pull field data (real user data, not lab simulation) from Google Search Console’s Core Web Vitals report or PageSpeed Insights, which surfaces CrUX data. Lab and field data diverge more often than people expect, and field data is what actually affects rankings and reflects real user experience.
3. Use Chrome DevTools’ Performance panel to record a real interaction (tapping “add to cart,” opening a filter drawer) and look for long tasks on the main thread.
4. In the Network panel, sort by size and identify every third-party script. Cross-reference against your installed app list to know what’s dispensable.
5. Check content_for_header output on the rendered page source. This is where most app scripts get injected on Shopify, and it’s often bigger than people realize until they actually view source.
6. Re-run the audit after every major app install going forward, not just once a quarter. A single new app can undo weeks of optimization work, and it’s much cheaper to catch the regression the week it happens than to trace it back months later.

Set a recurring calendar reminder for this. Performance work that isn’t monitored tends to decay quietly. A theme that scored well six months ago can quietly slip below acceptable thresholds as apps accumulate, campaigns get built and forgotten, and nobody notices until conversion rate dips and someone finally asks why.

Setting realistic targets

Google’s published thresholds (good, needs improvement, poor) are a reasonable floor, but ecommerce sites should aim past “needs improvement” and into “good” specifically on product and collection pages, since those carry the most transactional weight. Homepage performance matters less than people assume for conversion, most traffic doesn’t convert on the homepage. Spend your optimization budget where the money actually moves: product detail pages, collection pages, and the cart or checkout entry point.

It’s also worth tracking these metrics segmented by device and by template, not as one blended site-wide number. A blended score can look acceptable while your best-selling product template is quietly failing on mobile. Segment the data before you decide the site is fine.

Prioritized fix list

If you only have a week, work in this order:

1. Hero image sizing and preload. Highest impact, lowest effort, usually a same-day fix.
2. App audit and removal. Uninstall anything not earning its script weight. This improves INP and often LCP simultaneously.
3. Image dimensions across templates. A global fix that clears most CLS issues at once.
4. Font loading strategy. Medium effort, meaningful CLS and LCP improvement.
5. Defer non-critical third-party scripts. Chat, reviews, personalization, anything that doesn’t need to block the initial render.
6. Cart and filter interaction profiling. Lower priority unless you’ve already seen INP complaints tied to specific flows.

Bottom line

Most Core Web Vitals problems on ecommerce sites trace back to two things: an oversized hero image and too many third-party scripts nobody’s audited in a year. Fix those two before touching anything else. Everything downstream, INP, CLS, even conversion rate, tends to improve once the app stack and the hero image are under control.

If you want a ranked list instead of a manual audit, Converta is a free Shopify app that checks technical performance next to product page structure and checkout friction, then tracks your conversion rate after each fix so you can see which changes actually moved the number.