Shopify Core Web Vitals Checklist 2026: 14-Point Audit

Most Shopify Plus stores we audit in 2026 sit on the wrong side of every Core Web Vitals threshold on mobile. The pattern is almost always the same: a clean theme has been polluted by two years of app installs, the image pipeline is bypassed because someone copy-pasted an img tag from a vendor docs page, and the hero on every collection template waits on a third-party A/B testing widget before paint. The 14 checks below are the same audit we run on every engagement. Each one targets a specific failure mode we have seen on actual stores, ordered roughly by impact -- the first five typically deliver 80 percent of the LCP and INP improvement. We pulled the playbook from the engagement we documented in the Shopify CWV case study where a $28M brand cut mobile LCP from 4.7 seconds to 1.9 seconds and lifted mobile conversion 17 percent.

Targets

Before you start auditing, decide what good looks like. The Core Web Vitals thresholds are the same on Shopify as anywhere else: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1, all at the 75th percentile of mobile field data over the rolling 28-day CrUX window. For a well-tuned Shopify Plus store in 2026 we aim higher than the threshold -- LCP at 2.0 seconds, INP at 150 milliseconds, CLS at 0.05 -- because the threshold is where Google labels the page Good, not where the page actually feels fast. Shopify's CDN, image pipeline, and modern themes can comfortably hit those numbers. If your store cannot, the constraints are almost always elsewhere -- in the app stack, the theme code, or the marketing pixels -- and the checks below find them.

LCP checks (1-5)

1. Audit installed apps and gate them by template

Open Shopify Admin -- Apps and review every public app and every custom app embed. For each one, ask: which template does this need to load on, and which user action does it support? Reviews apps usually only need product templates. Sticky bar and popup apps usually only need the home and collection templates. Currency converters typically render the entire site, but the heavy bundle is only needed once the user opens the cart drawer. Shopify's app embed system supports template-level activation -- use it. In our 2026 audits, gating apps to the right templates removes a median of 320 KB of JavaScript from the home page alone, which is enough to move LCP from Poor to Needs Improvement on most mobile devices.

2. Verify the image pipeline uses format=auto and width hints

Open sections/main-product.liquid, snippets/product-card.liquid, and your hero section. Every image render should pass through image_url with at minimum width and format: 'auto'. The format negotiation alone delivers AVIF on Chromium and WebP on Safari, which is a 50 to 70 percent reduction in image bytes versus the master JPEG. We have seen themes from major Shopify Plus agencies still using raw {{ product.featured_image.src }} without any filter -- that is the single highest-impact one-line fix in this checklist. Pair it with explicit width and height attributes so the browser reserves space and you eliminate the matching CLS regression.

3. Preload the hero image and the brand font

The hero image should be preloaded in theme.liquid with a rel="preload" link emitted server-side once you know the URL. Use Liquid to compute imagesrcset with the same widths you serve in the img tag below. The brand font needs the same treatment if it appears in the LCP element -- without preload, the browser cannot start the font fetch until it has parsed the CSS, which adds 400 to 800 milliseconds on a slow mobile connection. Use font-display: swap or font-display: optional to prevent the font swap from blocking paint. The full LCP-focused playbook lives in Fix LCP in Shopify.

4. Defer non-critical JavaScript past LCP

Open the rendered HTML of a product page and look at the head. Anything that is not the analytics beacon, the brand font preload, the critical CSS, or the hero image preload should be loaded with defer or async -- or moved to the end of theme.liquid entirely. The biggest offenders are: A/B testing tools (move to a deferred body script with a fallback skeleton), reviews widgets (load on intersection observer when the reviews section scrolls into view), live chat (lazy-load on user intent or first scroll), and fulfillment widgets like estimated shipping date displays (only render after LCP via requestIdleCallback). On the case study store, deferring just the A/B testing snippet cut LCP by 720 milliseconds.

5. Reduce the critical CSS to under 14 KB

Shopify themes ship with comprehensive CSS that covers every section type, including ones the page does not use. Pull only the styles needed for above-the-fold content into a critical snippet rendered inline in the head, then load the rest with media="print" onload="this.media='all'" or via preload. Aim for under 14 KB inlined -- that is the single TCP slow-start window, so anything beyond it pays a full round-trip latency. The cross-framework playbook lives at Critical CSS extraction; on Shopify, the same principles apply but the inline injection happens via Liquid.

INP checks (6-9)

6. Replace heavy variant pickers with native form controls

Many premium Shopify themes ship JavaScript-driven variant pickers that re-render the entire product card on each selection. On low-end Android devices that re-render can take 250 to 400 milliseconds and turns into the dominant INP event for the page. Replace it with a fieldset of input type=radio elements styled with CSS, and use :checked selectors plus a single small JavaScript handler to update the price and the gallery. The interaction stays under 50 milliseconds and the keyboard accessibility comes for free.

7. Throttle the cart drawer animation

The cart drawer is the second most common INP villain. The animation is fine, but most themes recompute the drawer's content (cart items, totals, suggested upsells) inside the same animation frame, which janks. Move the content render into requestAnimationFrame after the open animation completes, and use contain: content on the drawer wrapper so layout work is scoped. If your upsell engine is third-party, defer it until the drawer animation finishes. The pattern generalizes to any modal -- see Fix INP in React for the React-specific equivalents that translate cleanly to Shopify's Hydrogen front-end.

8. Audit input handlers on the search bar

Predictive search apps wire up an input handler that fires on every keystroke, often making a synchronous network request and mutating the DOM with the results. On mobile keyboards, individual keystrokes can fire less than 16 milliseconds apart, which means each one is racing against the last paint. Debounce the handler to 150 milliseconds, switch to requestIdleCallback for the result render, and use AbortController to cancel the previous request when a new keystroke arrives. INP on the search interaction typically drops from 350 milliseconds to 120 milliseconds.

9. Avoid long tasks in pixel handlers

Marketing pixels and conversion tags are notorious for shipping bundles that block the main thread for 80 to 200 milliseconds when they boot. Audit the loading order of your pixel stack: GTM, Meta Pixel, TikTok Pixel, Pinterest Tag, and any custom analytics. Each one should be loaded with async from a low-priority position in the head, never inline. If you have more than five active pixels, you almost certainly have INP problems on first interaction. Tag Manager's container should itself be deferred until the user has scrolled or interacted -- there is no business value in firing pixels for users who bounced before LCP.

CLS checks (10-12)

10. Set explicit dimensions on every image and embed

Every img tag needs width and height attributes. Every iframe (including embedded video and product tour widgets) needs CSS aspect-ratio. Every responsive image needs sizes set correctly so the browser picks the right candidate without reflowing. The Shopify CLS-specific patterns -- product image grids, variant gallery, sticky atc -- live in Fix CLS in Shopify. The case study store dropped CLS from 0.27 to 0.04 by working through that page alongside this checklist.

11. Reserve space for sticky bars and popup containers

Promotion bars, cookie banners, and announcement bars cause CLS when they inject above the page content and push everything down. The fix is to render an empty container of the correct height in the initial HTML and only swap in the content after the JS boots. This costs you a small ungainly gap before the bar renders, but it eliminates the CLS event entirely. The same pattern applies to popup overlays that inject before user interaction -- their wrapper needs a fixed footprint in the layout grid.

12. Test font loading on slow networks

If your brand font is a custom Fontshare or Google Fonts file, configure font-display: optional for the LCP-blocking font and preload it with the correct format. Use size-adjust in the @font-face declaration to match the metrics of the system fallback so the swap is invisible. Without this, font swap on a slow network shifts every line of text on the page and pushes CLS above 0.1 even on otherwise-clean templates.

Monitoring (13-14)

13. Configure CrUX-based regression monitoring

Field data takes 28 days to settle, but waiting 28 days to find out a recent app install regressed your numbers is too slow. Wire up a daily PageSpeed Insights API check on your top ten templates and store the results. Alert on any 7-day moving-average regression of more than 200 milliseconds in LCP, 50 milliseconds in INP, or 0.05 in CLS. The case study store catches roughly one regression a quarter this way, almost always tied to a specific app install or a theme update.

14. Block performance regressions at theme deploy time

Set up a Lighthouse CI run on every pull request to your theme repository. Fail the build if mobile LCP exceeds 2.5 seconds on a synthetic test of the home, collection, and product templates. Synthetic tests are not the same as field data, but they catch the obvious regressions -- a new app added a 200 KB blocking script, the hero image stopped using format=auto, the variant picker JavaScript grew 80 KB. Pair this with a manual review of every app install request from the marketing team, gated on a one-page CWV impact assessment.

What to expect

Stores that finish all 14 checks typically land at LCP 1.7 to 2.0 seconds, INP 100 to 150 milliseconds, and CLS 0.02 to 0.05 at the 75th percentile of mobile field data within 28 days of the changes shipping. Mobile conversion rate lifts in the 12 to 18 percent range, with the largest gains coming from bounce reduction on paid social traffic. Bounce drops 20 to 30 percent on the worst-performing pages -- usually collection templates with three or more deferred apps competing for the main thread. The rate of return on the work tracks linearly with how poor the starting numbers were; stores that were already at Needs Improvement see a smaller lift than stores at Poor, but every audit we have run delivered measurable revenue impact within the first quarter.

Related on WebVitals.tools

• Shopify CWV Case Study: +17% Conversions, $1.2M Mobile Revenue -- the engagement this checklist was distilled from.
• Fix LCP in Shopify -- the LCP-only deep dive with copy-paste Liquid.
• Fix CLS in Shopify -- explicit image dimensions, sticky atc, font swap fixes.
• WordPress vs Shopify performance -- platform-level comparison if you are evaluating a switch.

Frequently asked questions