Shopify Core Web Vitals: How to Pass LCP, INP and CLS
"Compress your images" is where most Shopify speed advice starts and stops. If your Core Web Vitals are still failing after that, this guide is the next layer: which metric is failing, which element is responsible, and what to change in the theme.
Core Web Vitals in One Table
| Metric | Measures | Usual Shopify culprit |
|---|---|---|
| LCP | Time until the main content renders | Hero or product image, render-blocking CSS |
| INP | Responsiveness to taps and clicks | App scripts, variant pickers, cart drawer JS |
| CLS | Unexpected layout movement | Images without dimensions, injected banners, font swaps |
Check the current "good" thresholds on web.dev before reporting against them — they are revised periodically.
Where to Read Your Data
Four sources, each answering something different:
- Shopify's web performance report — real-user data from your own visitors, aggregated. Reporting lags, so do not expect same-day feedback after a fix.
- Search Console — groups URLs by status; the best view of which templates are failing at scale.
- PageSpeed Insights — shows field data (real users) at the top and lab data (a simulated run) below. They disagree constantly, and the field data is the one that matters.
- CrUX — the underlying real-user dataset, useful for comparing against competitors.
Fixing LCP
Find the LCP Element per Template
It differs by template: usually the hero image on the homepage, the first product image on a product page, and the first row of the grid on a collection page. Chrome DevTools will name the specific element. Fix the right one rather than every image.
The Hero Image
Serve it at appropriate widths through Shopify's image filters so mobile does not download a desktop-sized file. Load it eagerly, mark it as high priority, and never lazy-load it — lazy-loading your LCP element actively delays the metric you are trying to improve.
Render-Blocking CSS, JavaScript and Fonts
Anything the browser must fetch before painting delays LCP. Defer non-critical scripts, and for fonts use a display strategy that shows text immediately rather than leaving a blank space.
Server Response and Heavy Liquid
Large loops over collections, deeply nested section rendering and expensive metafield lookups all add server time before a single byte reaches the browser.
Fixing INP
Where Long Tasks Come From
Third-party app scripts are the most common source, followed by variant pickers that rebuild too much of the page and cart drawers doing heavy work on open.
Diagnosing
Record an interaction in the DevTools Performance panel and look for tasks blocking the main thread. The panel will attribute them to a script, which usually identifies the app.
Fixes
Defer non-critical scripts, break long tasks into smaller pieces so the browser can respond between them, and reduce DOM size — very large product grids make every interaction more expensive.
Fixing CLS
Set explicit width and height on every image so the browser reserves space. Give app-injected banners, announcement bars and review widgets a reserved slot rather than letting them push content down on arrival. Match your fallback font's metrics to the web font so the swap does not reflow the page.
Theme Choice and Theme Bloat
Before buying a theme, test the demo store in PageSpeed Insights on mobile. A theme that is slow with demo content will not get faster with your catalogue, your apps and your tracking on top.
Stopping Regressions
Performance decays. Re-check after every app install, theme update and campaign launch. A quarterly baseline in a spreadsheet catches slow drift that day-to-day use hides.
Priority Matrix
| Fix | Effort | Impact |
|---|---|---|
| Stop lazy-loading the LCP image | Low | High |
| Set image dimensions everywhere | Low | High |
| Correct image widths per breakpoint | Low | High |
| Defer non-critical third-party scripts | Medium | High |
| Reserve space for injected widgets | Medium | Medium |
| Font display strategy | Low | Medium |
| Remove unused apps | Medium | High |
| Simplify heavy Liquid loops | High | Medium |
| Reduce DOM size on collections | High | Medium |
| Replace the theme | Very high | Varies |
Frequently Asked Questions
Do Core Web Vitals affect Shopify rankings?
They are part of how search engines assess page experience, but relevance outweighs them. Treat speed as a conversion issue first and an SEO issue second.
Why is my PageSpeed score low when Core Web Vitals pass?
The score is a lab simulation; Core Web Vitals assessment uses real-user field data. Real users on good connections can pass while a throttled simulation scores badly.
Can a heavy theme pass?
Sometimes, with disciplined app usage and image handling. It starts from further back.
Do speed-optimizer apps work?
They can help at the margins, but adding an app to offset other apps rarely beats removing the other apps.
How long until Search Console updates?
Field data is collected over a rolling window, so expect weeks rather than days after a fix.
Where ConversionAB Fits
If the fixes need theme or app code changes, ConversionAB's Shopify engineers can implement them. FixMyStore offers Core Web Vitals, JavaScript performance and server response tooling at app.fixmystore.com.