Shopify Core Web Vitals: A Practical Guide for Small Stores
Speed advice for online stores tends to arrive as a wall of acronyms and a single score from a testing tool. For a small Shopify store, a calmer approach works better: understand the three metrics Google cares about, know which parts Shopify already takes care of, and spend your limited time on the few things you do control.
The three metrics in plain language
Core Web Vitals measure how real visitors experience a page. Each is judged at the 75th percentile of real page loads, and Google’s published “good” thresholds are:
- Largest Contentful Paint (LCP): how long the biggest visible element, usually a hero image or product photo, takes to appear. Good is 2.5 seconds or less.
- Interaction to Next Paint (INP): how quickly the page responds when someone taps, clicks or types. Good is 200 milliseconds or less.
- Cumulative Layout Shift (CLS): how much content jumps around while loading. Good is 0.1 or less.
INP became an official Core Web Vital on 12 March 2024, replacing First Input Delay. The change matters for Shopify stores because INP punishes pages that run a lot of JavaScript, and that is where themes, apps and marketing tags tend to pile up.
What Shopify already handles
Shopify’s help documentation lists several optimizations that need no action from you: fast hosting behind a CDN, year-long browser caching of cacheable resources, compression, HTTP/2 and minification of CSS and JavaScript. The same page tells merchants to ignore generic scanner advice about CDNs, server configuration or compression, because those are covered. Focus on what the scanners say about images, apps and themes.
Shopify has also been improving navigation speed at platform level. In June 2025 it rolled out a default speculation-rules setup that prefetches likely next pages for visitors on supporting browsers, with an average improvement of roughly 130 ms on desktop and 180 ms on mobile in its own tests. This comes with caveats for developers: if you add your own rules, both sets apply, and if you choose full prerendering, scripts such as analytics run before the visitor actually arrives, which can inflate page-view counts.
A sensible order of work
1. Images
Shopify’s image CDN resizes and compresses uploads, but it cannot fix an oversized source file or a hero that is bigger than it needs to be. Upload images near their display size, use JPG for photographs and PNG only where transparency is needed, and limit the number of large images on a single page. One vendor analysis points out that a single heavy mobile hero can use up most of the LCP budget by itself, which is a good reason to treat the first image on every template with extra care.
2. Apps
Every installed app should justify its cost. Shopify’s guidance says to remove apps that do not support sales, and warns that uninstalling does not always remove the code an app added to your theme. After removing an app, ask its developer for cleanup instructions or have someone check the theme files for leftovers.
3. Scripts and tags
Shopify’s documentation links poor INP mainly to too much JavaScript from the theme, apps or tag managers. Audit your tag manager, delete tags nobody uses, and start with the worst offenders rather than trimming everywhere at once.
4. Theme choices
Animations, page transitions and a long stack of sections all add cost. Shopify suggests comparing performance before and after enabling transitions, avoiding excessive sections on a template, paginating large collections, and moving to a performance-minded theme if your current one is the bottleneck.
Measuring without fooling yourself
- Prefer real-user data. Shopify’s Web Performance reports, and Search Console’s Core Web Vitals report, reflect actual visitors. Lab tools are useful for debugging, not for the final verdict.
- Do not chase one score. One vendor article notes that a single synthetic run can differ noticeably from the median, so average several runs before deciding a change worked.
- Change one thing at a time. Remove one app, re-test, then move to the next.
- Follow the INP workflow. web.dev recommends collecting field data, reproducing slow interactions in Chrome DevTools, and then reducing work per interaction by splitting long tasks and removing unnecessary JavaScript.
A caution on sources: the performance article from Fudge is written by a company that sells a page builder, and some of its figures come from its own testing. Its general guidance lines up with Shopify’s documentation, but treat vendor benchmarks as directional.
When code, not settings, is the answer
If the audit points at the theme itself, for example a slider loading eager scripts on every page, the fix is usually a development task rather than a setting. If you want a lean starting point, have a look at our themes; if the work needs custom development, see our services.