Shopify Core Web Vitals guide.
LCP, INP, CLS, TBT, TTFB. The five metrics Google measures, the conversion lift behind each, and the deterministic fixes that move them.
Three metrics. Each one measures revenue.
Core Web Vitals are three metrics Google uses as ranking signals: LCP under 2.5 seconds (when the page feels loaded), INP under 200 ms (how snappy interactions feel), CLS under 0.1 (how stable the layout is). All measured at the 75th percentile per CrUX field data. Every 100 ms of LCP improvement is worth roughly 1 percent of conversion rate in DTC, which makes performance work one of the highest-ROI investments available — typical payback two to four weeks, sustained. Published by Prasun Anand.
What Google actually measures and ranks.
The three Core Web Vitals come from web.dev's vitals guidance. LCP is loading speed perception. INP is interaction responsiveness. CLS is visual stability. All three are scored at the 75th percentile of real-user data (CrUX), not lab data. Lab data is useful for diagnosing specific issues; field data wins for ranking.
LCP (Largest Contentful Paint). When the largest visible element finishes rendering. On most ecommerce pages this is the hero image, a banner, or the largest product image. Targets: under 2.5 seconds is good, 2.5 to 4.0 needs improvement, over 4.0 is poor. The single most-impactful metric for ecommerce conversion.
INP (Interaction to Next Paint). The longest delay between any user interaction and the next visual update during the session. Replaced FID (First Input Delay) in March 2024 because INP measures all interactions, not just the first. Targets: under 200 ms is good, 200 to 500 needs improvement, over 500 is poor. INP is where most modern Shopify themes fail because of heavy JavaScript.
CLS (Cumulative Layout Shift). The total amount of unexpected layout shift over the page lifetime, weighted by impact area. Caused by images without dimensions, web fonts swapping, late-loading content pushing other elements. Targets: under 0.1 is good, 0.1 to 0.25 needs improvement, over 0.25 is poor.
TBT (Total Blocking Time) in lab data is a useful proxy for INP — under 200 ms is the lab equivalent of 200 ms INP in field data. TTFB (Time To First Byte) under 800 ms is a diagnostic for whether your hosting and theme rendering are fast enough; longer TTFB caps how good LCP can ever be.
Fixing slow LCP on Shopify themes.
Five fixes in order of impact. Optimize the LCP image. Preconnect to third-party origins. Eliminate render-blocking JavaScript on the critical path. Audit installed apps. Check TTFB. Most poorly-performing Shopify themes can drop 1.5 to 2.5 seconds of LCP through these five steps in two engineering days.
Image optimization. Use Shopify's CDN at the right size — never serve a 2400px image when the slot is 600px wide. Modern format — WebP for broad support, AVIF where browser support permits. Add fetchpriority="high" to the LCP image so the browser prioritizes it. Add loading="eager" (not lazy) on the LCP image. These four together typically save 800 ms-plus on themes that were not already implementing them.
Preconnect. The LCP element often depends on third-party origins — fonts.googleapis.com and fonts.gstatic.com for custom fonts, cdn.shopify.com for images, possibly an analytics endpoint. Each origin requires DNS lookup, TCP handshake, and TLS negotiation before the first byte. <link rel="preconnect"> establishes the connection in parallel with the rest of the page load, saving 100 to 400 ms per origin.
Critical path JavaScript. Any synchronous script that runs before the LCP element renders blocks the LCP. Audit every <script> tag without defer or async; move them to defer if possible. The deeper LCP-specific playbook including the Shopify image API parameters and the Klaviyo-script defer pattern is in Shopify LCP optimization. Also see Shopify image optimization for the asset-handling depth.
High INP is JavaScript main-thread blocking.
INP measures the longest delay between a user interaction and the next visual update. High INP almost always means JavaScript ran on the main thread for too long after the interaction fired. The fix path: profile in Chrome DevTools Performance panel, identify the long task, refactor or defer.
The five common causes on Shopify. Heavy app-injected JavaScript — search apps, cart drawers, A/B testing tools, accessibility overlays — firing synchronously on interaction. The fix: identify which app is responsible (Chrome DevTools Sources panel by domain), evaluate whether it is critical, and either defer it or replace it. Large React or Vue bundles in custom themes hydrating slowly. The fix: code splitting, dynamic imports, smaller bundles. Expensive event handlers for filtering, sorting, faceted search blocking the thread for 200 ms-plus. The fix: requestAnimationFrame, requestIdleCallback, or moving the work to a Web Worker. Cookie consent or tracking initialization running on first interaction — fix by initializing during idle time. Inefficient theme-editor block JavaScript — fix by ensuring blocks register listeners once and clean up properly.
The diagnostic process. Open Chrome DevTools, go to the Performance panel, record while interacting with the page in the way that feels slow. Look for "Long Tasks" (red triangles in the main-thread track) over 50 ms. The longest task is your INP problem. Click into the long task to see the function call stack — usually there is one specific framework or library that owns most of the time. The fix flows from there.
Field data on INP comes from real users. Lab data uses TBT (Total Blocking Time) as a proxy — under 200 ms TBT roughly corresponds to under 200 ms INP. Use TBT in PageSpeed Insights for fast iteration, then validate via CrUX field data.
CLS is layout discipline applied consistently.
CLS measures unexpected layout shifts during the page lifetime. The five common sources are images without explicit dimensions, fonts swapping, lazy-loaded sections, ad slots and embedded media, and dynamically inserted content from apps. Each is fixable with explicit dimensions or reserved space.
Images. Every <img> needs explicit width and height attributes. The browser uses these to calculate aspect ratio and reserve space before the image loads, preventing layout shift. Modern CSS (aspect-ratio) can also reserve space, but explicit width/height is the reliable cross-browser pattern.
Fonts. Custom fonts loading with font-display: swap show fallback text immediately, then swap to the custom font when it loads — which causes text to reflow if the metrics differ. The fix: use the size-adjust CSS Font Loading API to match metrics, or preload critical font files so they arrive before render. Modern browsers also support font-display: optional which avoids the swap entirely on slow connections.
Lazy-loaded sections. OS 2.0 sections that load below the fold should reserve their final height in CSS so the page does not jump when they render. Use min-height on the section wrapper or content-visibility for the same effect.
Third-party widgets. Ad slots, embedded video, BNPL messaging, accessibility overlays — anything inserted by JavaScript after initial render — should have reserved space in the static layout. The full CLS playbook including the dynamic-content patterns and the font-loading depth is in Shopify CLS fixes; the INP companion is in Shopify INP fixes.
Why performance work beats most marketing investment.
Every 100 ms of LCP improvement is worth roughly 1 percent of conversion rate. A store at USD 200K monthly revenue investing two engineering weeks (USD 8K to 16K) on performance to drop LCP from 4 seconds to 2.5 seconds gains 15 percent conversion — USD 30K monthly revenue lift, two to four week payback, sustained for the life of the theme.
Compare to paid media. A USD 16K paid media campaign at 3-to-1 ROAS produces USD 48K revenue over the campaign window, then stops. A USD 16K performance investment produces USD 30K monthly revenue lift indefinitely — that is USD 360K over the first year alone, sustained as long as the theme runs. Performance is a compounding asset, not a flow.
Compare to other engineering work. New feature builds rarely produce measurable conversion lift; they produce capability, but capability does not always translate to revenue. Performance work has a direct, measurable, time-windowed connection to conversion, which makes it one of the few engineering investments with predictable ROI.
The political reality. Performance work is harder to fund than feature work because it does not produce visible novelty. Founders see the new feature; they do not always see the 1.5-second LCP improvement. The ROI math is the way to fund it: present the conversion math, the payback period, the multi-year compounding effect, and the implicit risk of falling behind on Google's CWV ranking signals. Performance work funded as a strategic investment ships on schedule; performance work funded as an afterthought rarely does.
Six answers.
What are the Core Web Vitals targets for Shopify in 2026?
LCP under 2.5 seconds at the 75th percentile per CrUX field data. INP under 200 ms at the 75th percentile. CLS under 0.1 at the 75th percentile. These three are the official Core Web Vitals; Google uses them as ranking signals. Two related metrics matter for diagnosis: TBT (Total Blocking Time) under 200 ms in lab data, which is a strong proxy for INP, and TTFB (Time To First Byte) under 800 ms as a diagnostic. Field data wins over lab data for ranking; lab data is useful for diagnosing specific issues.
How does LCP affect ecommerce conversion?
Every 100 ms of LCP improvement is worth roughly 1 percent of conversion rate in DTC, based on the meta-analysis of public case studies and our own client data across 2,000-plus engagements. A store with 4-second LCP improving to 2.5 seconds gains roughly 15 percent in conversion — measurably and durably. The mechanism: LCP is when the user perceives the page as 'loaded' enough to start interacting. Long LCP creates a perception of unreliability that translates into bounce. Faster LCP increases the share of arriving visitors who actually engage with the page rather than abandoning before it renders.
How do I fix a slow LCP on Shopify?
Five fixes in order of impact. One, optimize the LCP image — use Shopify's CDN at the right size, modern format (WebP or AVIF), and add fetchpriority high attribute. This alone often saves 800 ms-plus on poorly-implemented themes. Two, preconnect to fonts.googleapis.com and any other third-party origins the LCP element depends on. Three, eliminate render-blocking JavaScript on the critical path; defer non-essential scripts. Four, audit installed apps for blocking script injection; problem apps include some chat widgets, A/B testing tools, and accessibility overlays. Five, check TTFB; if your hosting tier or theme has slow server-side rendering, Plus tier or theme rebuild is the lever.
What causes high INP on Shopify themes?
High INP is almost always JavaScript main-thread blocking. The five most common causes on Shopify: heavy app-injected JavaScript firing synchronously on user interaction (search apps, cart drawers, customizer widgets); large React or Vue bundles in custom themes that hydrate slowly; expensive event handlers (filtering, sorting, faceted search) that block the thread for 200 ms-plus on a real interaction; long-running cookie consent or tracking initialization on first interaction; and inefficient theme-editor block JavaScript that runs on every page interaction. The fix path: profile in Chrome DevTools Performance panel, identify the long task, refactor or defer.
What causes high CLS on Shopify product pages?
Five common sources. One, images without explicit width and height attributes — the browser cannot reserve space, so when the image loads the layout jumps. Two, web fonts loading with font-display swap causing text to reflow when the custom font finishes loading. Three, lazy-loaded sections without reserved space in the section template. Four, ad slots, embedded video, or third-party widgets that reserve no space until their content arrives. Five, dynamically inserted content from apps (subscription banners, BNPL messaging, accessibility overlays) that pushes existing content down on render. Each is fixable with explicit dimensions or reserved space.
Should I invest in performance work or other initiatives first?
Performance investment ranks ahead of most marketing initiatives in expected ROI for stores with poor current speed. The math: every 100 ms of LCP improvement is worth roughly 1 percent of conversion rate. A store with 4-second LCP and USD 200K monthly revenue investing two engineering weeks (USD 8K to 16K) in performance work that drops LCP to 2.5 seconds gains 15 percent conversion — that is USD 30K monthly revenue lift, payback in two to four weeks, sustained. Compare that to a typical paid media campaign returning 3-to-1 ROAS at best. Performance work is a multi-year compounding asset; paid media is a flow that stops the moment you stop spending.
Three metrics. All passing.
More from Layla.
Senior Account Manager · Wellness · Sydney · 4 posts on the site
Published .