From the conversion glossary
Concepts referenced in this article, defined.
Core Web Vitals & Conversion Rates
Start lifting conversions today.
Run rigorous A/B tests and personalize every visit on Shopify or any storefront โ no engineers required.
Concepts referenced in this article, defined.
Run rigorous A/B tests and personalize every visit on Shopify or any storefront โ no engineers required.
Core Web Vitals are not just an SEO checkbox โ they are a direct measure of whether your store feels fast and trustworthy enough for a visitor to buy. Google's own data shows that every 100ms improvement in load time increases conversions by 1โ2%. For an Indian D2C brand doing โน50 lakh a month, a 2% CVR improvement from speed optimization alone is โน1 lakh in additional monthly revenue โ with no additional ad spend.
Google's Core Web Vitals consist of three metrics that measure different aspects of the loading and interaction experience:
LCP measures how long it takes for the largest visible element on the page to load โ typically your hero image on a product page.
For ecommerce, LCP almost always corresponds to the hero product image. A slow-loading hero means the visitor stares at a blank or partially loaded page in the first critical seconds. Patience data from India shows mobile visitors give pages roughly 3 seconds before abandoning โ making LCP directly tied to bounce rate.
INP measures how quickly the page responds when a user interacts with it โ clicking a button, selecting a size, tapping Add to Cart.
A sluggish INP makes your store feel unresponsive โ like tapping Add to Cart and nothing happening. This causes users to tap again, triggering double orders or frustration-driven abandonment. Indian mobile users on entry-level Android phones are particularly affected by high INP.
CLS measures visual stability โ whether elements on the page move unexpectedly while loading. You've experienced this: you go to tap a button and the page shifts, causing you to tap the wrong element.
For Shopify stores, CLS is commonly caused by images without declared dimensions, fonts loading after text, and apps injecting elements into the page after initial render. High CLS on product pages causes accidental taps and erodes trust.
From auditing 200+ Shopify stores in the Indian D2C market:
| Metric | Median Score | Top 20% Score |
|---|---|---|
| LCP (mobile) | 3.8 seconds | Under 2.0 seconds |
| INP (mobile) | 380ms | Under 150ms |
| CLS | 0.18 | Under 0.05 |
The gap between median and top-20% performance is enormous โ and translates directly into conversion rate differences. Top-performing stores in beauty and supplements categories see mobile CVR of 4โ7%; median-performing stores see 1โ2%.
LCP problems on Shopify almost always come from one of these sources:
The most common cause. Fix:
loading="eager" and fetchpriority="high" attributes to the hero imageEvery Shopify app that loads JavaScript can delay your LCP. Audit your apps:
defer or async attributesWeb fonts are a common LCP killer. Fix:
<link rel="preconnect"> to fonts.googleapis.com and fonts.gstatic.com in your theme's <head>rel="preload" for your primary font filefont-display: swap in your CSS to show text immediately with fallback fontsReturning visitors should load pages from cache, not the server. Shopify handles this for Shopify-hosted assets, but verify that your custom files (app scripts, custom JS) have appropriate cache headers.
Every image on your product page should have explicit width and height attributes in the HTML. Without them, the browser doesn't know how much space to reserve, causing layout shift when images load.
In Shopify Liquid:
{{ product.featured_image | image_url: width: 600 | image_tag: width: 600, height: 800 }}Review banners, chat widgets, and upsell apps often inject DOM elements after the initial page render, pushing content down. Solutions:
Using font-display: swap can cause a flash of unstyled text (FOUT) โ text appears in a fallback font, then shifts when the web font loads. Use font-display: optional for non-critical fonts to prevent this.
INP problems are typically caused by:
defer or async.For Shopify, the most common INP culprits are:
For a store with:
Current revenue: 50,000 ร 0.02 ร โน1,200 = โน12,00,000/month
After improving LCP from 4.5 seconds to 2.0 seconds (estimated CVR improvement: 25โ35%):
Additional revenue: โน3,00,000/month โ from a one-time technical fix, no ongoing ad spend.
This is why the Ecommerce Tech and CRO overlap matters. A/B testing is powerful, but technical performance optimization has no statistical significance requirement and applies to 100% of your traffic.
Core Web Vitals improvements and A/B testing work together. Once your pages are fast (good LCP, INP, CLS), your A/B tests produce cleaner results because:
CustomFit.ai runs A/B tests and personalization on Shopify without adding significant JavaScript overhead โ important for maintaining your Core Web Vitals improvements.
loading="lazy" to improve initial page load.Compare your options: CustomFit.ai vs VWO
Learn more: Ecommerce Tech Pillar | Image Optimization for Ecommerce Speed | CRO Guide