Home » Make It Fast » Shopify Core Web Vitals

Shopify Core Web Vitals: Fix LCP, CLS, and INP (My Test Workflow)

Last Updated On February 18, 2026 @ 9:52 am

Core Web Vitals are basically Google’s “shopper experience signals.” They exist for one reason.

If a page loads slow, jumps around, or feels laggy, people bounce. That hurts conversion first, and SEO second.

In Shopify, most Core Web Vitals issues come from a few repeatable places: your hero media, your section stack, your theme scripts, and whatever extra code you load (apps, pixels, tracking).

What Core Web Vitals actually measure (simple, but semantic)

Google looks at 3 user experience metrics: (Google for Developers)

• LCP (Largest Contentful Paint): how fast the main thing shows up (usually a hero image, product image, or big heading). “Good” is 2.5s or less. (Google for Developers)
• INP (Interaction to Next Paint): how fast the page responds when someone taps, clicks, filters, opens a menu, or adds to cart. “Good” is 200ms or less. (web.dev)
• CLS (Cumulative Layout Shift): how much the layout moves while loading. “Good” is 0.1 or less. (Google for Developers)

One important “why.”

Google judges CWV using real user behavior at scale (not just your one Lighthouse run). So Lighthouse is your lab test, and real users are the final exam.

My baseline test data 

Here’s the quick baseline you gave me, in one clean chunk so you can paste it into the post.

On my Soccer Life dev store (0 apps), Lighthouse mobile showed: Home performance 72 (FCP 2.3s, LCP 6.6s, TBT 150ms, CLS 0, Speed Index 2.8s), Collections performance 76 (FCP 2.6s, LCP 4.7s, TBT 110ms, CLS 0, Speed Index 4.5s), and a control Product page (Elite Match Soccer Socks variant) performance 86 (FCP 2.4s, LCP 3.1s, TBT 220ms, CLS 0.015, Speed Index 3.8s).

The Shopify reality: why your homepage usually fails first

Your product page often does “okay” because the template is focused.

Your homepage is where people stack everything:

• hero
• announcement bar
• sliders
• collections
• featured products
• testimonials
• blogs
• icons
• animations

That is above-the-fold bloat, and it destroys LCP and INP.

So if you only fix one page first, fix the homepage.

How I test Shopify Core Web Vitals 

Step 1: Run a clean Lighthouse test

Use Lighthouse Mobile (like you’re doing), but make it consistent.

• Use the same device preset and throttling every run
• Test in an incognito window (logged out) when possible
• Run 3 tests and keep the middle result

Step 2: Track the “why,” not just the score

In your reports, you already have the useful breadcrumbs:

• “Improve image delivery”
• “Render blocking requests”
• “Reduce unused CSS”
• “Reduce unused JavaScript”
• “Minimize main-thread work”
• “Layout shift culprits”

That list tells you exactly which lever to pull.

Step 3 (optional): Shopify Web Performance report

You said you didn’t use it for this post, which is fine.

But it’s worth mentioning because Shopify’s web performance reports are built around the 3 Core Web Vitals and tie performance back to real shopping outcomes like discoverability and conversion. (Shopify Help Center)

Fix order that works (do this in this order)

If you fix these out of order, you waste time.

1. Fix LCP first (biggest content loads too late)
2. Fix CLS second (layout shifts break trust)
3. Fix INP third (lag makes the store feel cheap)

Why this order works:

• LCP is your “first impression”
• CLS is your “trust signal”
• INP is your “it feels smooth” signal

Improve LCP on Shopify (Largest Contentful Paint)

LCP is usually one of these:

• homepage hero image
• collection grid image
• product media image

In your homepage audit, “Improve image delivery” was basically screaming that your hero media is the LCP anchor.

What causes slow LCP in Shopify

• Hero images are too large (file weight + dimensions)
• Images load late because the browser discovers them late
• Render-blocking CSS slows first paint
• Too many sections above the fold

Fixes that actually move LCP

1) Make your hero image smaller, but also “right sized”

This is not just compression. It is semantic sizing.

Your image can be small in KB but still wrong in dimensions.

What I do:

• keep the hero image close to its real display size
• export as WebP when possible
• avoid loading 832px images when you only display 400px

2) Keep above-the-fold simple

Above the fold is your critical rendering path.

If you put 6 sections above the fold, you are forcing the browser to do more layout and style work before the shopper sees the main content.

Quick rule:

• 1 hero
• 1 primary CTA
• 1 supporting block max

3) Watch render-blocking CSS

You had “render blocking requests” flagged (styles + view-transitions).

That means the browser is waiting to paint until critical CSS is ready.

What you can do without turning this into a dev project:

• reduce section count (less CSS used)
• remove sections you are not using
• avoid fancy above-fold effects

Fix CLS on Shopify (Cumulative Layout Shift)

CLS is when the page moves while loading.

In ecommerce, that is brutal because it causes misclicks and kills trust.

Your product page showed CLS 0.015, which is not terrible, but it is still a signal you can tighten.

Common CLS culprits in Shopify

• images without fixed dimensions
• sticky add to cart bars appearing late
• fonts swapping late (FOIT or FOUT)
• product recommendations loading in and pushing content

CLS fixes that are worth it

1) Reserve space for images

Even if Shopify outputs responsive images, a section can still shift if the layout does not reserve space correctly.

What I look for:

• hero images
• product media
• collection tiles
• logo images

2) Make sticky UI predictable

If you use sticky add to cart, reserve the space earlier or keep it from pushing content down.

3) Fonts: do not let typography create layout chaos

If a font loads late and changes spacing, headings jump, buttons move, and CLS spikes.

Simple approach:

• use fewer font weights
• avoid loading multiple font families
• keep headline sizing stable across breakpoints

Improve INP on Shopify (Interaction to Next Paint)

INP replaced FID as a Core Web Vitals metric, and it’s the “page feels laggy” detector. (web.dev)

On Shopify, INP usually gets hit by:

• too much script evaluation
• theme JS plus extra features
• third-party scripts and pixels
• heavy sections like sliders, quick view, animation stacks

What to do when INP is bad

1) Remove anything that runs on every page load

If a feature is “nice,” but it loads everywhere, it is usually an INP tax.

Examples:

• chat widgets
• heavy sliders
• multiple tracking scripts
• extra animation libraries

2) Use native Shopify features whenever possible

This is why your “apps vs native features” post matters.

Native features usually mean:

• less third-party code
• fewer network requests
• fewer main-thread tasks

You might like this article: Shopify apps vs native features

3) Keep your section stack lean

Even if you have 0 apps, you can still have INP issues from too many sections.

This is the part most people miss.

They think:
“No apps = fast store.”

But a bloated theme build can still feel slow.

How to keep any Shopify theme fast (even after you pick “the fast one”)

This is the section that protects you long-term.

Because “fast theme” is not a permanent state. It is a discipline.

1) Treat the homepage like a landing page, not a magazine

Your homepage has one job: move the shopper forward.

Not educate them. Not tell your full brand story.

If you want storytelling, put it on:

• About page
• collection intro content
• product pages

Homepage rule I use:

• if a section does not help someone shop, it does not belong above the fold

2) Your hero media is the LCP anchor, so respect it

Most Shopify stores fail Core Web Vitals because of one image.

The hero.

What I do every time:

• export 2 versions (desktop + mobile)
• keep file size tight
• keep dimensions close to real display size
• avoid loading massive images just because they “look crisp”

You might like this article: Shopify image optimization

3) Watch your section stack like it is your code budget

Every section adds something:

• HTML
• CSS
• JS
• layout work

That is why speed “randomly drops” after you redesign.

It is not random.

It is the section stack getting heavier.

Quick guardrail:

• if you add a new section, remove an old one
• especially on the homepage

4) Retest after layout changes, not just after apps

Most people only retest when they install an app.

But your biggest performance changes usually come from:

• new hero
• new section blocks
• new font choices
• new media (video, gifs, sliders)

My rule:

• retest after any homepage redesign
• retest after any product template change
• retest after any new tracking code

FAQ 

What are Shopify Core Web Vitals?

They are Google’s 3 experience signals that measure how your store feels to shoppers: LCP (loading), INP (interaction speed), and CLS (layout stability). (Google for Developers)
On Shopify, these usually come down to theme build choices, media weight, and extra scripts.

What scores do I need to “pass” Core Web Vitals?

The common targets are:

• LCP: 2.5 seconds or less
• INP: 200ms or less
• CLS: 0.1 or less (Google for Developers)

That said, passing is based on real user data over time, not one Lighthouse run.

Why does my Shopify homepage score worse than product pages?

Because the homepage usually has the most “stuff” above the fold.

More sections means:

• more layout work
• more CSS and JS
• more images competing for priority

Product pages tend to be simpler, so they load and stabilize faster.

What is the fastest way to improve LCP on Shopify?

Start with your hero image.

In most Shopify stores, the hero is the LCP element.

Fast wins:

• compress the hero image
• use the right dimensions (do not overserve huge images)
• reduce above-the-fold sections
• avoid heavy sliders and video heroes

How do I fix CLS on Shopify?

CLS is usually caused by content loading late and pushing the layout.

The biggest fixes:

• make sure images reserve space (especially hero, product media, collection tiles)
• keep sticky bars from shifting content
• keep fonts simple so typography does not jump after load

Even “small” CLS can hurt trust because it causes misclicks.

What hurts INP the most on Shopify?

Heavy scripts.

That can be:

• apps that run on every page
• multiple tracking pixels
• sliders and animation stacks
• quick view and dynamic blocks that load extra JS

If the main thread is busy, the page feels laggy. That is INP.

Should I use Shopify’s Web Performance report or Lighthouse?

Use both if you can.

Lighthouse is your lab test. It helps you find the bottleneck fast.

Shopify’s web performance reports exist to help you connect performance to real outcomes like shopping experience and discoverability, and they track the 3 Core Web Vitals. (Shopify Help Center)

If you are only using one tool right now, Lighthouse is fine. Just be consistent with your test setup.

Will switching themes fix Core Web Vitals?

Sometimes, but it is not magic.

A “fast theme” can still be slow if you:

• stack too many sections
• use huge hero images
• load lots of scripts

Theme choice is the container. Your build decisions decide if it stays fast.

How often should I retest Core Web Vitals?

Retest whenever you change the things that affect the critical path:

• homepage hero
• section stack
• product template blocks
• fonts
• new tracking code
• new app installs

If you only retest after apps, you will miss your biggest regressions.