What is LCP and why 4s is the threshold
The Largest Contentful Paint (LCP) measures the time until the largest visible element in the viewport is rendered by the browser. In e-commerce, this element is almost always the hero image of the product or the main banner.
Google classifies LCP into three ranges:
| LCP | Rating | Impact |
|---|---|---|
| ≤ 2,5s | Good | No ranking penalty |
| 2,5s – 4s | Needs improvement | Growing risk of position loss |
| > 4s | Poor | Direct impact on ranking and conversion |
Studies from Google and Cloudflare show that each additional second of loading reduces the conversion rate by up to 7%. For a store doing $50,000/month, a poor LCP can cost $3,500 per extra second.
Real case: A fashion store with LCP of 5.8s on mobile reduced to 2.1s after removing 4 marketing apps and optimizing the hero image. Result: +22% in conversion rate in 30 days.
Before optimization
After optimization
Main gain: removal of 4 marketing apps + hero image WebP + fetchpriority="high" on hero image
How to measure LCP in your Shopify store
Before fixing, you need to know where the problem is. There are two ways to measure: field data (real users) and lab data (simulation).
PageSpeed Insights (recommended to start)
Go to pagespeed.web.dev and paste the URL of your main page and product page. The report shows LCP measured in the field (CrUX data) and in the lab (Lighthouse). Always test on mobile — that's where most of your customers are.
Chrome DevTools — Performance Tab
Open DevTools (F12), go to Performance, press Ctrl+Shift+R to record and reload. After recording, click on "Timings" and locate the LCP marker. This shows exactly which element was the LCP and at which timestamp it appeared.
Web Vitals Chrome Extension
Install the Web Vitals extension from Google. It shows LCP, CLS and INP in real time as you browse the store. Useful for quickly testing different pages.
The 4 most common causes of high LCP in Shopify
1. Unoptimized hero image
It's the number one cause. Shopify stores often load hero images of 2MB+ without compression, without WebP and without the fetchpriority="high" attribute. The browser doesn't know this is the most important image on the page.
How to identify: In PageSpeed Insights, click "Opportunities" and look for "Properly size images" and "Serve images in next-gen formats". If the hero image appears there, that's the problem.
Compress the image
Use Squoosh.app or TinyPNG to reduce the size without noticeable visual loss. Target: hero image below 150KB in WebP.
Add fetchpriority in the theme
In your Shopify theme, locate the hero image code and add fetchpriority="high" loading="eager". This instructs the browser to prioritize the download.
Use the Shopify CDN correctly
Shopify serves images via CDN automatically, but you need to use the correct parameters: image_url | image_tag: width: 1200, format: 'webp' in Liquid.
2. Apps that inject render-blocking scripts
Every app installed on Shopify can inject JavaScript into the page <head>. If these scripts are synchronous (without async or defer), they block rendering until fully loaded — before any visual element appears on screen.
Common apps that cause this problem: live chat (Tidio, Gorgias), loyalty programs (Smile.io), reviews (Yotpo, Okendo) and FOMO popups.
Quick diagnosis: In Chrome DevTools → Network tab → filter by "JS" → reload the page. Identify external scripts from third-party domains that load before the hero image. Those are the candidates to remove or defer.
3. Theme with blocking JavaScript in <head>
Lower quality themes — or custom themes without performance review — frequently include scripts in the <head> without the correct attributes. This delays the moment the browser can start rendering anything.
In Shopify, check your theme.liquid file. Every script that is not critical for above-the-fold should have defer or be moved to before </body>.
// Bad — blocks rendering
<script src="{{ 'app.js' | asset_url }}"></script>
// Correct — loads without blocking
<script src="{{ 'app.js' | asset_url }}" defer></script>4. Slow server response (high TTFB)
If the TTFB (Time to First Byte) is above 800ms, the browser waits for the server before starting any rendering. In Shopify, this is rarely a problem with the server itself, but it can be caused by apps that add heavy middleware (such as cookie-based personalization apps or geo-location).
How to verify: In PageSpeed Insights, look for "Reduce server response times (TTFB)". A TTFB above 600ms in Shopify almost always indicates a misconfigured app or a slow external integration.
Step-by-step fix plan
Address the problems in this order — from highest to lowest impact:
Measure the current LCP and note the LCP element
Use PageSpeed Insights on your homepage and product page. Note the LCP in ms and which element was identified.
Disable apps one by one and re-measure
Create a test page or use development mode. Temporarily disable third-party apps and measure LCP in each iteration to identify the culprit.
Optimize the hero image
Compress, convert to WebP, add fetchpriority="high" and loading="eager". Re-measure.
Audit the scripts in <head>
Review theme.liquid and add defer/async to all non-critical scripts. Check the Network tab for blocking third-party scripts.
Monitor continuously
Set up an alert in PageSpeed Insights or use Shopify Analytics to track speed after each new change.
Expected results after the fixes
With the optimizations correctly applied, it's reasonable to expect:
- LCP reduction from 5s+ to 2s–2.5s in stores with poorly optimized images
- Reduction of 1s–1.5s just by removing or deferring app scripts
- Visible improvement in Shopify Speed Score (from 20–40 to 60–80+)
- Conversion increase of 10%–25% in documented cases
Important: Results vary by store, niche and traffic profile. The conversion impact is more visible in stores with predominantly mobile traffic and in mid-to-high price categories, where users research more before buying.
When to call a specialist
If after basic optimizations the LCP is still above 3s, the problem is probably structural: app scripts that cannot be easily removed, a legacy theme with poor performance architecture, or poorly implemented external integrations.
In these cases, a deep technical diagnosis — analyzing the complete waterfall, main thread, synchronous scripts, critical rendering path and image configuration in Liquid — usually reveals the problem in less than 2 hours of analysis.
Is your Shopify store still slow after trying these fixes?
I do a complete technical diagnosis of LCP, INP and CLS with waterfall analysis, identification of blocking scripts and a prioritized fix map. Result delivered within 48h, no commitment required.