How to Improve Shopify Core Web Vitals: LCP, INP and CLS Fixes

If your Shopify store is failing Core Web Vitals, the problem is almost never Shopify itself. It's what's been added on top: apps, tracking scripts, page builder code, oversized images and years of theme edits.

To improve Shopify Core Web Vitals, focus on LCP, INP and CLS across your homepage, product pages and collection pages. The biggest culprits are usually large hero images, app JavaScript loading sitewide, page builder bloat, slow product media, layout shift from review widgets or announcement bars, and third-party scripts firing too early.

Core Web Vitals are not just a PageSpeed score. They measure how real users experience your store: how fast the main content appears, how quickly the page responds when someone taps or clicks, and how stable the layout is while it loads. Google uses these signals as part of how it evaluates page experience, and they matter for Shopify performance optimisation across search, ads and conversion rate.

This guide covers what each metric means, what causes failures on Shopify, and what to fix first.

What are Core Web Vitals on Shopify?

Core Web Vitals are three metrics Google uses to measure real-user experience on a webpage. They cover loading speed, interactivity and visual stability. On Shopify, all three can be affected by how your theme, apps and assets are configured.

The three metrics

LCP is typically the hero image, product image, banner or largest text block visible above the fold. If it loads slowly, users see a blank or partial page for too long.

INP replaced First Input Delay (FID) as Google's responsiveness metric in March 2024. It measures how quickly the page reacts to any interaction, not just the first one. Heavy JavaScript is the main cause of poor INP scores.

CLS measures unexpected layout movement. If content jumps around while loading, that's a CLS problem. Review widgets, late-loading banners and images without set dimensions are common causes on Shopify.

Field data vs lab data

Google recommends assessing Core Web Vitals using field data (real user measurements) wherever possible, not just lab tests. PageSpeed Insights shows both. The field data comes from the Chrome User Experience Report (CrUX) and reflects how actual visitors experience your store. Lab scores from tools like Lighthouse are useful for debugging but can differ significantly from what real users see.

Why Shopify stores fail Core Web Vitals

Shopify as a platform is not slow. The infrastructure is solid, CDN delivery is built in and the core Shopify storefront loads quickly on a clean theme. The performance problems almost always come from what gets added on top.

The real culprits are usually:

• App bloat — every installed app can inject JavaScript, CSS and widgets into your pages, often sitewide even when the app is only needed on one template
• Page builder code — tools like PageFly, Shogun and GemPages add extra wrappers, scripts and CSS that increase page weight and slow rendering
• Oversized hero images — large, uncompressed images above the fold are one of the most common causes of poor LCP
• Unoptimised product media — high-resolution images without proper compression or modern formats slow product and collection pages
• Review widgets — third-party review apps often load late and cause both CLS and INP issues
• Tracking scripts and pixels — Meta Pixel, TikTok Pixel, Google Tag Manager, Klaviyo and others all add to the JavaScript load
• Fonts — web fonts that aren't preloaded or configured correctly can cause layout shift and render delays
• Theme debt — themes that have been edited, customised and added to over several years often carry leftover CSS, scripts and sections that no longer serve a purpose
• Late-loading banners and announcement bars — these frequently cause CLS when they appear after the page has started rendering
• Dynamic sections and cart drawers — JavaScript-heavy interactive elements that load sitewide add to INP problems
• Filter and search app scripts — collection page filtering tools are a common source of unnecessary JavaScript

The more apps, scripts and customisations a store has accumulated, the harder it becomes to pass Core Web Vitals without a proper audit. Read more about Shopify app bloat and how it affects store performance.

How to improve LCP on Shopify

LCP measures how quickly the largest visible element on the page loads. On Shopify, this is almost always the hero image on the homepage, the main product image on a product page, or a large banner on a collection page.

Quick answer: The fastest way to improve Shopify LCP is to optimise the largest above-the-fold image, reduce render-blocking scripts, preload the key visual asset and stop non-essential apps from loading before the main content.

What causes poor LCP on Shopify

The most common causes are large, uncompressed images, render-blocking JavaScript from apps loading before the page content, and heavy homepage sliders that try to load multiple images at once.

LCP fixes for Shopify

• Compress and resize hero images — aim for under 200KB for above-the-fold images. Tools like Squoosh or Shopify's built-in image optimisation can help
• Use WebP or AVIF formats — both are significantly smaller than JPEG or PNG at comparable quality. Shopify's CDN can serve WebP automatically in many cases
• Avoid large homepage sliders — carousels force the browser to load several images upfront. A single, well-chosen hero image almost always performs better
• Preload the main image — adding a <link rel="preload"> for the hero image tells the browser to fetch it early, before other resources
• Reduce render-blocking CSS and JavaScript — scripts that load in the <head> before the main content delay LCP. Defer or async-load non-critical scripts
• Stop apps loading before main content — apps that inject scripts into every page can push LCP back significantly. Audit which apps load sitewide and whether they need to
• Set explicit image dimensions — images without width and height attributes can delay layout and affect both LCP and CLS
• Test product and collection pages separately — LCP on your product pages is often worse than on the homepage. Don't assume a good homepage score means your whole store is fine

How to improve INP on Shopify

INP measures how quickly your page responds when a user interacts with it: tapping a button, selecting a product variant, opening a menu or adding something to the cart. A slow INP score means the page feels laggy and unresponsive, which directly affects conversion rate.

Quick answer: To improve INP on Shopify, reduce JavaScript. Audit apps, remove unused scripts, defer non-critical tools, simplify interactive elements and avoid loading product, review or page builder scripts where they are not needed.

What causes poor INP on Shopify

The main cause is too much JavaScript executing on the main thread. Every app that loads on your store adds to this. The problem compounds when multiple apps load sitewide, even on pages where they serve no purpose.

Common INP offenders on Shopify:

• Product option and variant apps
• Review widgets (Okendo, Judge.me, Yotpo and similar)
• Live chat tools loading on every page
• Pop-up and email capture apps
• Cart drawer scripts
• Filtering and search apps on collection pages
• Page builder scripts running on pages they didn't build

INP fixes for Shopify

• Reduce the JavaScript payload — fewer scripts mean faster interaction response. Start with Chrome DevTools' Coverage tab to see which scripts are unused
• Remove apps you no longer need — uninstalled apps sometimes leave script embeds behind. Check your theme's <head> for leftover code
• Defer non-critical scripts — analytics, chat tools and pop-ups do not need to block the main thread. Load them after the page is interactive
• Delay chat and pop-ups until interaction — trigger these only after the user has scrolled or clicked, not on page load
• Scope product scripts to product pages only — there is no reason for product option or variant scripts to load on the homepage or collection pages
• Simplify heavy cart drawers — complex cart drawers with upsell logic and animations add significant JavaScript weight. Consider whether the functionality justifies the cost
• Remove duplicate analytics and pixels — it's common to find Meta Pixel firing twice, or GTM and a direct Klaviyo script running alongside each other
• Replace app functionality with native theme sections — if your theme can do something natively, removing the app that duplicates it reduces JavaScript load

If your store relies heavily on a page builder, this is worth reading: Shopify custom theme vs page builder. Page builder scripts are a significant source of INP problems on stores that use them across multiple templates.

How to improve CLS on Shopify

CLS measures unexpected layout movement: when content shifts position after the page has started rendering. On mobile, this is particularly disruptive. A customer tries to tap a button and the page jumps, sending them somewhere they didn't intend to go.

Quick answer: To fix CLS on Shopify, reserve space for anything that loads after the page starts rendering. Images, review widgets, banners, fonts and app blocks should not push content around once the customer has started reading or tapping.

What causes CLS on Shopify

Layout shift on Shopify is almost always caused by elements that load asynchronously, after the initial render, without reserved space.

Common CLS causes:

• Images without explicit width and height attributes
• Product cards that change height depending on whether a badge, label or review snippet loads
• Review widgets (star ratings, review counts) loading after the surrounding content
• Announcement bars and promo banners appearing above or within content after load
• Cookie consent banners pushing content down
• Chat widgets appearing in the corner and shifting nearby elements
• Dynamic payment buttons (Shop Pay, Apple Pay, Google Pay) rendering at different heights
• Fonts swapping from a fallback to the web font mid-render
• Lazy-loaded sections that don't have reserved height before they load

CLS fixes for Shopify

• Set image width and height attributes — this lets the browser reserve the correct space before the image loads. Without these, the page reflows when the image appears
• Reserve space for review widgets — add a minimum height to the container that holds star ratings and review counts so the surrounding content doesn't shift when they load
• Avoid late-loading announcement bars — if a promo bar loads after the page renders, it pushes everything down. Either load it immediately or use a fixed position that doesn't affect document flow
• Stabilise product cards — use consistent card heights across your collection grid, and avoid dynamic badges or labels that change card dimensions
• Use font-display: swap carefully — it prevents render blocking but can cause text to shift as the web font replaces the fallback. font-display: optional is sometimes a better choice for CLS
• Reserve space for dynamic app blocks — if an app injects a widget into your product page (size guides, trust badges, upsell blocks), set a minimum height on the container
• Test mobile layouts specifically — CLS issues are often more pronounced on mobile, where smaller screens amplify any layout movement

Which Shopify templates should you test first?

Most store owners test the homepage and stop there. That's a mistake. The homepage is often not where your performance problems are worst, and it's rarely where your customers spend the most time or money.

Prioritise in this order

1. Product pages — this is where purchase decisions happen. Slow LCP, laggy INP when selecting variants, or CLS from review widgets all directly affect conversion rate. Product pages also tend to carry the most app load: reviews, upsells, size guides, trust badges, payment buttons.
2. Collection pages — these are often the entry point from search and paid ads. They carry filter scripts, product card grids and lazy-loaded images. Collection page performance is frequently worse than the homepage and gets far less attention.
3. Homepage — important for brand first impressions and direct traffic, but often not where Core Web Vitals failures hurt most commercially.
4. Cart page and checkout — Shopify's checkout is hosted separately and performs well by default. The cart page, however, can be slow if it uses a custom template with heavy app integrations.
5. Paid landing pages — if you're running Meta or Google ads to custom landing pages built in a page builder, test these separately. Page builder pages often have the worst Core Web Vitals scores on the entire store.
6. Blog pages driving SEO traffic — if blog posts are bringing in organic visitors, a slow blog template affects both bounce rate and the experience of users arriving from search.

The practical takeaway: run PageSpeed Insights on at least one URL from each of these template types. The scores will often be different, and the problems will be different too. Fixing the homepage alone won't fix your store.

Tools to diagnose Shopify Core Web Vitals

Before you start fixing things, you need to know what's actually failing and where. These are the tools worth using.

Lab data vs field data: what to trust

Lab data (Lighthouse, WebPageTest) runs a simulated test under controlled conditions. It's useful for identifying specific issues and testing fixes, but it doesn't always reflect what real users experience.

Field data from CrUX is based on actual Chrome browser sessions over the past 28 days. If your store doesn't have enough traffic, field data may not be available, and you'll need to rely on lab scores for now.

The practical approach: use Search Console to identify which pages are failing, PageSpeed Insights to understand why, and Chrome DevTools to dig into the specifics.

Shopify Core Web Vitals checklist

Use this as a starting point when auditing your store. Work through it methodically rather than making changes all at once, so you can identify what actually moves the needle.

• Test homepage, at least one product page and at least one collection page separately in PageSpeed Insights
• Check field data in PageSpeed Insights (not just the lab score)
• Review the Core Web Vitals report in Google Search Console to identify failing URLs by template
• Compress and resize above-the-fold images to under 200KB where possible
• Convert hero and product images to WebP or AVIF
• Remove apps you no longer actively use
• Check the Shopify theme editor for app embeds that are still active from uninstalled apps
• Check the JavaScript payload in Chrome DevTools (Coverage tab) for unused scripts
• Defer non-critical scripts (chat, pop-ups, analytics) so they don't block initial render
• Remove duplicate tracking pixels (check for Meta Pixel firing twice, duplicate Klaviyo scripts, etc.)
• Remove or replace large homepage sliders with a single hero image
• Set explicit width and height on all images
• Reserve space in CSS for review widgets, announcement bars and dynamic app blocks
• Stabilise product card heights across collection grids
• Test mobile layouts specifically for CLS issues
• Re-test after every app install, theme change, campaign launch or major design update

A note on testing frequency: Core Web Vitals scores can change after seemingly minor updates. Adding a new app, enabling a new theme section or installing a new pixel can all affect LCP, INP and CLS. Build re-testing into your workflow, not just your launch checklist.

For a deeper look at how technical SEO and performance overlap, see our guide to Shopify technical SEO.

When to hire a Shopify performance optimisation agency

A lot of the fixes in this guide are things a store owner or in-house marketer can do: compressing images, removing unused apps, checking for duplicate pixels. If your store is relatively clean and the issues are straightforward, start there.

But there are situations where a DIY approach stops being practical.

Signs you need a specialist

• Core Web Vitals keep failing despite changes — if you've compressed images and removed a few apps but scores haven't moved, the problem is likely deeper in the theme code or JavaScript architecture
• Product pages are slow and you're not sure why — product page performance is often affected by a combination of factors that require profiling to diagnose properly
• The theme has accumulated years of edits — custom CSS, leftover scripts, deprecated sections and old app integrations are hard to untangle without knowing what each piece does
• You have many apps and aren't sure which ones are safe to remove — removing the wrong app can break functionality. An audit identifies what's actually being used and what isn't
• Your store was built on a page builder — page builder dependency is one of the harder performance problems to fix without rebuilding affected templates. See our custom Shopify theme development service for what that involves
• Performance issues are affecting paid ads or conversion rate — slow pages cost money directly. If ads are underperforming or conversion rate is lower than expected, performance is worth investigating as a contributing factor

What Futur Media does

Futur Media is a UK Shopify performance optimisation agency. We work with ecommerce brands to diagnose and fix Core Web Vitals issues, reduce app and script bloat, improve page builder performance and clean up slow theme code.

We don't recommend a rebuild by default. Our process starts with a Shopify performance optimisation audit that reviews your apps, scripts, theme code and Core Web Vitals across your key templates. From there, we give you a prioritised fix list: some stores need image optimisation and script cleanup, others need sections rebuilt, and some benefit from moving to a leaner custom theme. The recommendation depends on what's actually causing the problem.

Want help improving Shopify Core Web Vitals?

If your Shopify store is slow, failing Core Web Vitals or getting weighed down by apps and page builder code, the first step is working out what's actually causing the problem.

Our Shopify performance audits review your apps, scripts, theme code, templates and Core Web Vitals, then give you a prioritised fix list with clear next steps. No generic recommendations. No unnecessary rebuilds.

Get a free Shopify performance audit, or if you'd prefer to talk through what you're seeing first, book a strategy call and we'll take a look together.