Core Web Vitals are Google's three-metric framework for measuring real-world page experience: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). Since Google began using them as a ranking signal, passing all three thresholds has become non-negotiable for any Shopify store that wants to compete organically in the UAE, Saudi Arabia, the UK or Europe.
This guide covers every fix we have applied across 200+ Shopify stores. These are not generic tips — they are Shopify-specific techniques that work.
What the Core Web Vitals Thresholds Are
- LCP (Largest Contentful Paint): Under 2.5 seconds = Good. 2.5–4s = Needs Improvement. Over 4s = Poor.
- INP (Interaction to Next Paint): Under 200ms = Good. 200–500ms = Needs Improvement. Over 500ms = Poor.
- CLS (Cumulative Layout Shift): Under 0.1 = Good. 0.1–0.25 = Needs Improvement. Over 0.25 = Poor.
Google assesses Core Web Vitals using field data (real user measurements from Chrome) via the Chrome User Experience Report (CrUX). Your PageSpeed Insights score is a lab measurement — useful for debugging but not what Google ranks on.
How to Fix LCP on Shopify
The LCP element on most Shopify stores is the hero image on the homepage or the main product image on product pages. The most impactful LCP fixes are:
1. Preload the LCP image
Add a preload link tag for your hero image in theme.liquid. In Dawn-based themes, this means adding <link rel="preload" as="image" href="{{ section.settings.image | img_url: '1500x' }}" fetchpriority="high"> before the hero section renders.
2. Remove lazy loading from the LCP image
Shopify's default loading="lazy" attribute delays the LCP image. The hero/first-viewport image must have loading="eager" and fetchpriority="high".
3. Convert images to WebP/AVIF
Shopify's CDN serves WebP automatically when you use the | image_url filter. If your theme is using legacy | img_url, upgrade to the newer filter. WebP files are 25–35% smaller than JPEGs at equivalent quality.
4. Inline critical CSS
The browser cannot render any content until it has downloaded and parsed your stylesheet. Inlining critical CSS (the styles needed for above-the-fold content) eliminates this render-blocking delay. This is an advanced optimisation but typically delivers 0.3–0.8s LCP improvement.
5. Reduce third-party script impact
Every third-party script (chat widgets, pop-up apps, loyalty widgets) that loads synchronously adds to LCP. Use Chrome DevTools Performance panel to identify which scripts are delaying your LCP element's render.
How to Fix INP on Shopify
INP replaced FID as a Core Web Vital in March 2024. It measures the time between a user interaction (click, tap, keypress) and the next visual update. Poor INP is almost always caused by too much JavaScript work on the main thread.
1. Audit your app JavaScript footprint
In Chrome DevTools → Coverage tab, identify JavaScript files with low usage percentages. Many Shopify apps load their full script bundle on every page, even when only needed on specific pages. Work with your developer to conditionally load app scripts only where needed.
2. Defer non-essential scripts
Any script that does not affect the above-the-fold experience should be deferred. Add defer or async attributes to script tags. For third-party apps, use a script load delay (load after user first interaction or after 3 seconds of inactivity).
3. Break up long tasks
JavaScript tasks that take more than 50ms block the main thread and cause poor INP. Use scheduler.yield() or setTimeout(fn, 0) to yield between task chunks.
How to Fix CLS on Shopify
Cumulative Layout Shift happens when elements move unexpectedly during page load. Common culprits on Shopify stores:
1. Add width and height to all images
Images without explicit dimensions cause layout shift as the browser does not know how much space to reserve. Shopify's image filters support width and height attributes — use them on every <img> tag.
2. Fix font display
Custom fonts cause a "flash of unstyled text" (FOUT) or "flash of invisible text" (FOIT) that shifts layout. Add font-display: swap to all @font-face declarations and preconnect to your font CDN.
3. Reserve space for dynamic elements
Announcement bars, cookie banners, sticky headers and chat widget launchers that render after the main content will cause CLS. Set a fixed height on their containers before they load.
Tools for Measuring Core Web Vitals on Shopify
- PageSpeed Insights: Lab data + field data from CrUX. Start here for any store.
- Chrome DevTools → Performance: Detailed waterfall and main thread analysis.
- Google Search Console → Core Web Vitals report: Field data segmented by page group. This is the authoritative source for your ranking signal.
- WebPageTest: Multi-location, multi-device testing including Dubai and London endpoints for GCC/EU relevance.
- Shopify Speed Score: Useful directional indicator but not a substitute for real CWV field data.
Core Web Vitals for GCC Stores: Special Considerations
Network conditions in the UAE and Saudi Arabia are generally fast in urban centres (Dubai, Riyadh, Jeddah) but vary significantly for users on 4G in less connected areas. GCC ecommerce traffic is 70–80% mobile. When testing your store, always prioritise Mobile PageSpeed Insights results and test on a simulated 4G connection — not your office WiFi.
Also: Google's CrUX data for UAE and Saudi Arabia is based on Chrome users in those markets. Brands that have significant traffic from users on Safari (iPhone-heavy markets like UAE) will not see their full CWV picture in CrUX. Use SpeedCurve or DebugBear for broader real-user monitoring.
Frequently Asked Questions
Do Core Web Vitals affect rankings for UAE and Saudi Google searches?
Yes. Core Web Vitals apply to all Google indices including UAE (.ae), Saudi (.sa) and UK (.co.uk) search. Passing all three gives you a ranking advantage; failing is a confirmed negative signal.
My PageSpeed Insights score is 90 but CrUX shows Poor LCP — why?
PageSpeed Insights is a lab test run from a Google data centre. CrUX is field data from real users on real devices and networks. Real users on mobile devices in Dubai may experience significantly different performance than the lab test simulates. Fix based on CrUX field data, verify with lab testing.
How long does it take for Core Web Vitals fixes to improve Google rankings?
Google updates CrUX data with a 28-day rolling window. After you deploy fixes, wait 28 days for field data to reflect improvements, then check Google Search Console for ranking changes over the subsequent 2–4 weeks.
Need help with your store's Core Web Vitals? View our performance optimisation service or book a free audit.