Shopify Core Web Vitals: 9 Reasons Your Store Is Slow

A store owner sent us a screenshot last winter with a single question. Their PageSpeed score read 92 on desktop, so why were sales flat? We asked for the mobile field data instead of the lab score. That report told a very different story about real shoppers.

Their product pages failed LCP for most phone visitors. The hero image loaded late, and two apps froze the first tap. That desktop number they trusted hid the problem from view.

At Brand’s Bro, we tune store speed for Shopify merchants across the USA. We read the field data first, then trace each metric to its cause. Most owners chase one score, but the true cause spans several parts.

We preloaded the hero image and deferred the two heavy apps. Mobile load times dropped, and the buy button reacted at once. Weeks later, the field data passed, and the flat sales line moved up.

This guide walks through 9 Shopify Core Web Vitals reasons your store runs slow. Each one names the metric it hurts and shows how to check it. The goal is to fix the metric you fail, not chase a perfect score.

What Are Shopify Core Web Vitals?

Shopify Core Web Vitals are three metrics Google uses to score real user experience. They measure loading speed, tap response, and visual stability on your pages. Google reads them from real Chrome visits, not a single lab test.

The three metrics are LCP, INP, and CLS. LCP measures how fast the main content paints on the screen. INP measures how fast the page answers a tap or click. CLS measures how much the layout jumps while the page loads.

Google counts a page as good when 75 percent of visits clear each target. The store passes when the field data holds those marks over time. A lab score can look green while the field data still fails.

Shopify also shows a web performance report in your admin. It tracks these metrics over time and flags how apps and edits move them. The rest of this guide breaks the causes down one metric at a time.

How Do LCP, INP, and CLS Work Together?

The three metrics fail for different reasons, so they need separate checks. LCP is a loading problem, and it often traces back to images or scripts. INP is an interaction problem, and it traces back to JavaScript on the page.

CLS is a stability problem, and it traces back to content that loads late. A store can pass two metrics and fail the third by a wide margin. This is why one blanket fix seldom clears every warning.

Here are the three metrics with their targets and the usual Shopify cause:

Field data decides which metric to fix first on your store. Most Shopify stores pass CLS but stumble on LCP and INP. So the order of your fixes should follow your own field report.

Why Shopify Speed Affects Rankings and Sales

Core Web Vitals feed into Google’s page experience signals for ranking. A page that passes gets a small edge when two results match in relevance. The score acts as a tiebreaker, not a replacement for good content.

The sales side reacts faster than the ranking side does. A shopper who waits on a slow paint often leaves before it loads. One tap that freezes makes the store feel broken and pushes buyers away.

LCP lands on cold traffic, the visitor you paid to acquire. That person has the least patience and the highest bounce risk. A fast first paint keeps them on the page long enough to shop.

INP and CLS shape the mood of the whole session. A page that answers each tap and holds its layout feels trustworthy. That trust carries a shopper through the cart and into checkout.

The 9 Reasons Your Shopify Store Is Slow

These nine reasons cover the causes we find most on speed audits. Each one ties to a metric and a page type you can check. The first few clear the largest share of failures for most stores.

1. You Judge Desktop Scores Instead of Mobile Field Data

The most common mistake is trusting a green desktop lab score. Google ranks on mobile field data from real Chrome visits, not a lab run. A desktop test hides the slower phones that most of your shoppers use.

Google throttles its mobile test to mimic a mid-range phone on 4G. That setup punishes heavy JavaScript that a fast laptop shrugs off. Your field report in Search Console shows the numbers that shape rankings.

You should test one URL per template, not every page on the store. A single product page, one collection, and the home page cover the patterns. The field data on those three tells you where to start.

2. The LCP Image Is Too Large or Loads Late

Most Shopify stores that fail Core Web Vitals fail on LCP first. The largest element is often the hero image or the main product image. A large or late image pushes that paint past the 2.5-second mark.

Three habits cause this on Shopify. A source file uploaded at full resolution weighs far more than a phone needs. Second, a lazy-load rule on the hero delays the very image it should rush. Third, a missing preload hint leaves the browser to find the image late.

The fix is to preload the main image and drop lazy loading from it. We run a technical Shopify SEO review to check these habits on every template. Compressed WebP files and the right image tag handle most of the rest.

3. Key Content Renders in JavaScript Instead of HTML

Content built by client-side JavaScript paints later than content in the HTML. Shopify serves your theme as Liquid and HTML from a fast server. A theme that rebuilds the page in the browser throws that speed away.

This shows up when a framework like React or Vue runs the storefront. The browser waits for the script, the data, and the render first. Each step adds delay that a server-rendered page never pays.

Key content should ship in the initial HTML from Liquid. The main image, the price, and the heading belong in the server response. A theme that follows this pattern paints its main content sooner.

4. Theme JavaScript Blocks the Main Thread

The main thread handles scripts, layout, and painting on one track. Heavy theme JavaScript ties up that track and delays every tap. This is the root of most INP problems on Shopify stores.

A large script runs a long task, and any tap during it must wait. The shopper taps a button, and the page freezes for a moment. That frozen moment is the interaction Google records as your INP.

Breaking long tasks into smaller ones frees the thread between them. Deferring scripts that the first paint does not need also helps. A leaner theme leaves the main thread open for the next tap.

5. Apps and Third-Party Scripts Add Too Much Weight

Every app you install can add its own scripts to each page. Third-party scripts are the top cause of slow interactions on Shopify. Review widgets and chat tools and tracking pixels each claim main-thread time.

The scripts run before the page can respond, so taps queue behind them. A store with a dozen apps carries a heavy script load per view. Each one competes for the same thread the shopper is waiting on.

Removing apps you no longer use is the fastest win here. Deferring the scripts of the ones you keep comes next. Testing each app block in the theme editor shows which one costs the most.

6. App Widgets, Banners, and Reviews Cause Layout Shifts

Late content is the main source of CLS on Shopify stores. An app injects a review block or a banner after the first paint. The existing content shifts down to make room, and CLS climbs.

Star ratings under the title and trust badges are common offenders. Announcement bars above the header push the whole page down as they load. A review widget that lands above the description leaves a visible jump.

Reserving space for injected content stops the shift before it starts. App blocks accept a min-height rule so the gap waits for the widget. Chat bubbles and reviews below the fold keep the top of the page still.

7. Fonts and CSS Delay or Shift the Page

Custom fonts and heavy CSS can both slow and shake a page. A font that loads late leaves text invisible or swaps style mid-load. That swap counts as a layout shift the moment the new font arrives.

Render-blocking CSS holds up the first paint until the file downloads. An external stylesheet from another domain adds a network trip on top. Both delays land on LCP before the shopper sees a thing.

Inlining the critical CSS lets the top of the page paint first. A font-display rule keeps text visible while the custom font loads. Fewer font weights and files also trim the load the browser carries.

8. Sliders, Videos, and Large Sections Overload the Top

A crowded top section can sink LCP on the home and product pages. One slider loads several images at once when the shopper needs one. An autoplay video near the top pulls bandwidth from the main paint.

Large sections stacked above the fold each add weight to the first view. The browser downloads and renders them before the main content settles. A heavy hero area is a common reason a home page feels slow.

Trimming the top section to what a shopper needs first speeds the paint. One hero image beats a five-slide carousel for LCP every time. Moving video and extra media lower down keeps the first view light.

9. Cart and Checkout Extensions Add Slow Interactions

Cart drawers and checkout extensions are quiet INP hotspots on Shopify. A slide-out cart can rerender a large block every time it opens. Upsell widgets and recommendation grids inside the drawer add more work.

Checkout UI extensions ship their own JavaScript bundle to the page. On a mid-range phone, that bundle costs real time on each step. A pass of Shopify conversion rate support often catches these drag points in checkout.

Testing the cart drawer and checkout on a throttled mobile profile shows the cost. Trimming the drawer to fewer moving parts speeds each open. Fewer extensions in checkout keep the final steps quick to tap.

How to Audit Shopify Core Web Vitals Step by Step

A speed audit works best by metric and by page type together. The field data in Search Console and PageSpeed Insights comes first. Lighthouse then traces which script or image is responsible.

Here is the order we follow on client stores. It moves from measurement to the cheapest fixes and then the deeper ones.

• Field data first. The Search Console report shows which metric fails and where. Real-user numbers beat a single lab score for setting your order.
• Page-type sampling. One product page, one collection, and the home page cover the templates. Each template can fail for a different reason.
• App cost check. Disabling app blocks one at a time shows each one’s weight. The heaviest scripts get removed or deferred first.
• Image check. The LCP image on each template should be small and preloaded. Lazy loading belongs below the fold, never on the hero.
• Interaction check. Recording a session while you tap reveals the slow moments. Cart drawers, filters, and variant pickers are the usual suspects.

A crawler and the Chrome Performance panel speed this up on larger stores. One round of hands-on Shopify theme cleanup often beats any speed app. A developer can test each change on a copy before it goes live.

Which Core Web Vitals Fix to Prioritize First

Not every speed fix carries the same weight for rankings and sales. Some clear a failing metric, while others polish a metric you already pass. Sorting them by your field data keeps the effort on the right work.

This table maps each metric to its main cause and fix order:

LCP comes first because most Shopify failures land there. It also hits cold traffic, the visitor you paid to bring in. A faster hero image protects the shopper who has not committed yet.

INP comes second since interaction lag frustrates ready buyers. Cutting app scripts gives the biggest early gain on this metric. Most stores feel the change within a couple of weeks.

CLS comes last because most Shopify stores already pass it. A stray widget or announcement bar can still break it, though. Reserving space for late content keeps this metric in the green.

Common Shopify Speed Mistakes

Most speed problems on Shopify trace back to a few repeat mistakes. These errors hurt a metric or hide the real cause from view. Catching them early keeps a small slip from spreading across the store.

• Judging store speed by a desktop lab score instead of mobile field data.
• Adding a lazy-load rule to the hero image that should load first.
• Installing several apps that each inject scripts on every page.
• Leaving old app code in the theme after you uninstall the app.
• Skipping width and height on images, which lets them shift the layout.
• Stacking sliders and video at the top of the home page.
• Running the storefront through a framework that renders in the browser.

Each mistake sends a shopper or the field report a poor signal. A single one can undo the gains from every other fix on the list. Working through them in order keeps the store fast for real visits.

How Brand’s Bro Fixes Shopify Core Web Vitals

We treat store speed as a metric-by-metric job, not a single score. Our audits start in the field data and the Shopify performance report. This shows us which metric fails and which page type carries the problem.

Our team preloads the LCP image and drops lazy loading from the hero first. We then defer heavy app scripts and break up long theme tasks. Each change gets tested on a theme copy before it reaches shoppers.

For stability, we reserve space for widgets that inject content late. We add width and height to images so they hold their place on load. Old code left behind by removed apps gets cleaned out during the same pass.

After the fixes go live, we watch the field data settle over time. On the store from the intro, the product pages passed LCP within weeks. Sales rose once the buy button responded on the first tap.

⟶ [Get Your Free Shopify Speed Audit]

What to Expect After You Fix Core Web Vitals

Speed fixes do not change your report on the same day. Google reads field data over a rolling 28-day window of real visits. So the numbers move as fresh visits replace the old ones.

The lab score in PageSpeed Insights updates the moment you retest. That helps you confirm a fix landed before the field data catches up. The lab and field numbers seldom match, and the field one rules.

Sales often move before the ranking does after a speed fix. A faster hero image or a smoother cart can lift orders within days. Shoppers feel the change on the very next visit to the store.

Small fixes compound once you work through them in order. A store that fixes all three in order feels new to use. That combined change is where the steadier conversion gains show up.