How to Fix LCP on Your Shopify Product Pages (Without Touching Code)
By The tinify.ai Team
You ran PageSpeed Insights on your Shopify product page. The score came back red, or stuck in the orange. The problem identified: "LCP: 4.2s." One metric. One photo. Your whole store's search ranking at risk.
LCP (Largest Contentful Paint) carries 35% of your PageSpeed score. A red score doesn't just feel bad. Google uses it to rank your store against competitors. Research suggests only around half of Shopify stores pass all three Core Web Vitals on mobile, meaning the majority compete at a disadvantage. A large share of Shopify pages lazy-load their LCP image, making that single setting one of the most common reasons product pages fail this test.
If you want to fix LCP on your Shopify store, this guide shows you exactly how. You'll learn to diagnose what's causing your slow score and fix it yourself, no developer, no code editor, no theme file changes required. There is one fix that does require a developer, and you'll know when to call one.
What Is LCP and Why Does Your Shopify Score Depend on It?
LCP stands for Largest Contentful Paint. It measures how many seconds it takes for your main product photo to appear on screen after someone opens your page. Google uses it as a ranking signal, and it carries 35% of your total PageSpeed score. A score under 2.5 seconds is good. Above 4 seconds is red, and it's hurting your position in search results.
Think of LCP as the moment a customer can see your product. Not when the page starts loading, but when the main photo finishes appearing. If that takes too long, customers leave before they see the product, and Google penalizes your ranking because slow load times signal a poor experience.
Here's how Google categorizes LCP scores:
| Score | Time | PageSpeed Label |
|---|---|---|
| Good | ≤ 2.5 seconds | Green |
| Needs Improvement | 2.5 – 4.0 seconds | Orange |
| Poor | > 4.0 seconds | Red |
These thresholds are measured at the 75th percentile of real visitor sessions, meaning 75% of your visitors must load that fast to qualify as "good."
LCP is not a minor metric. At 35% of your total PageSpeed score, it has more influence on your overall rating than any other single factor. Fixing it, even partially, moves the needle more than any other optimization you could make.
What Is the LCP Element on a Shopify Product Page?
On a Shopify product page, the LCP element is the hero product image in almost every case, the main photo displayed above the fold. It's the biggest visual element that loads first, so it's what Google measures. PageSpeed Insights will tell you which image it is when you run a scan.
Google's crawler identifies the largest element visible in the browser window when the page first loads. For product pages, this is the main product photo more than 90% of the time, because product pages are built around that image and it dominates the space above the fold.
To confirm your LCP element, run a PageSpeed Insights scan on your product page and scroll to the Diagnostics panel. Look for "Largest Contentful Paint element." PageSpeed will show you a preview of the exact image it measured. That's your hero photo, and that's what you're optimizing.
One important distinction: your desktop LCP element and your mobile LCP element may not be the same. On mobile, the layout collapses, different images may load first, or a different image may dominate the viewport. Mobile is what Google uses for ranking, so always run PageSpeed Insights in mobile mode when diagnosing an LCP problem.
Step 1 Before You Fix Anything: Identify Your LCP Cause in PageSpeed Insights
Before you start making changes, spend two minutes diagnosing what's causing your slow LCP. PageSpeed Insights will tell you whether the problem is your image being too large, your theme loading it too late, or a review app slowing everything down. Different causes need different fixes, and you only need to address yours.
Open PageSpeed Insights, paste your product page URL, and run a mobile scan. Scroll to the Diagnostics section and look for these three warnings:
Cause 1: Your Product Photo Is Too Large (File Size)
PageSpeed Insights warning: "Properly size images" or "Serve images in next-gen formats."
This means your product image is too heavy. Its file size is so large that it takes several seconds to download, even on a fast connection. A raw photo from an iPhone or DSLR is 3–6 MB. A well-optimized product image should be under 200 KB.
This is the most common cause for stores that upload product photos from a camera or photo editor. It's also the most fixable, no code required.
Cause 2: Your Theme Is Loading the Image Too Late (Lazy Loading)
PageSpeed Insights warning: "Largest Contentful Paint image was lazily loaded."
Lazy loading tells the browser to wait before loading images until they're about to scroll into view. For images below the fold, that's sensible. For your hero product photo at the top of the page, it's counterproductive. It makes the browser delay loading the one image that should load first.
This is why so many Shopify pages fail LCP for this reason: most themes apply lazy loading to all images as a blanket setting, including the first product photo. Fixing it requires a one-line change in your theme's code, covered in the developer section below.
Cause 3: An App Is Blocking Your Page
PageSpeed Insights warning: "Reduce the impact of third-party code."
Every app you install on your Shopify store (review widgets, chat popups, countdown timers, loyalty programs) runs a script that loads when your page loads. Each one can add 150–300ms or more to your LCP. Stores with many apps commonly see mobile LCP above 3.0 seconds from scripts alone, before the image even starts downloading.
If you see a long list of third-party scripts in your Diagnostics panel, your apps are part of the problem.
You may have more than one cause. Fix them in order: image size first (biggest gain, zero code), then app scripts, then lazy loading. Each fix reduces your LCP before you tackle the next.
How to Fix LCP on Your Shopify Store Right Now (No Code Required)
These three fixes don't require a developer, access to theme files, or any code changes. You can do them from your Shopify admin and a browser tab. They cover the most common LCP causes for Shopify product pages and produce the biggest improvement per hour of effort.
Step 1: Compress Your Product Images Before Uploading
This is the single highest-leverage no-code fix available to Shopify store owners. If your images are larger than 200 KB, compressing them will produce a visible LCP improvement on the first try.
A raw iPhone product photo uploaded at 3.2 MB compresses to about 220 KB with tinify.ai, over 93% smaller. In testing, that reduction moved a PageSpeed Insights LCP score from 4.8 seconds to 2.3 seconds after re-uploading the compressed version, from red to green in one step.
In tinify.ai's compression dataset of 905 real images, JPEG files converted to WebP averaged an 81% reduction in file size, and images over 2 MB averaged a 90% reduction. Product photos from cameras and photo editors fall in that over-2 MB range.
How to do it:
- Go to your Shopify admin, then Products, and select a product
- Download your current product images (right-click, Save Image As)
- Open tinify.ai in a new tab, no account needed
- Drag your product photos into the upload area
- Download the compressed versions
- Back in Shopify admin, replace the existing product images with the compressed ones
Aim for under 200 KB per image. Shopify's own recommendation is 2048×2048 pixels maximum at 200–500 KB. Compressed images in that range load fast across all connection speeds.
For the full image optimization workflow, including how to batch-compress an entire product catalog, see How to Optimize Your Shopify Images for Speed.
tinify.ai is free with daily credits. No account needed, no monthly image cap to work around.
Step 2: Switch Your Images to WebP Format
WebP delivers the same visual quality as JPEG at 25–35% smaller file sizes. Smaller file means faster download. Faster download means lower LCP.
When you compress with tinify.ai, you can convert to WebP in the same step, no separate workflow. Shopify's CDN serves WebP to browsers that support it (all modern browsers do), so uploading WebP files gives you the size benefit on the next page load.
Re-uploading your compressed images in WebP format is the fastest way to combine two LCP improvements, smaller file size and a more efficient format, into a single action.
For a full comparison of WebP versus AVIF versus JPEG for Shopify product pages, see WebP vs. AVIF vs. JPEG: Which Format Is Right for Your Shopify Store.
Step 3: Remove or Defer Apps That Load Before Your Product Photo
In your Shopify admin, go to Apps and look at everything you have installed. Then go back to your PageSpeed Insights Diagnostics panel and cross-reference. The "Reduce the impact of third-party code" warning will list the specific scripts loading on your product pages.
The test is straightforward: disable one app at a time (most Shopify apps have an on/off toggle in their settings), re-run PageSpeed Insights, and check whether your LCP improves. If disabling the app moves your score, that app is contributing to your slow LCP.
If an app isn't delivering sales, remove it. Every removal reduces LCP overhead, and that matters when you're already at 4+ seconds. If you need the app, check its settings dashboard. Many review and chat apps have a "Load after page content" or "Defer script" option that delays the script until after your product photo loads.
One Fix That Does Require a Developer: Disabling Lazy Loading on Your First Product Photo
If PageSpeed Insights flags "your LCP image was lazily loaded," the fix is a one-line change in your product page Liquid template, adding loading="eager" and fetchpriority="high" to the first product image tag. A developer can handle this in 10 minutes, but it does require accessing theme code.
Before calling a developer, check your theme settings first. In your Shopify admin, go to Customize, select your product page template, and look for an Images or Product Images section. Some themes have a "prioritize first image loading" toggle. If yours does, enabling it applies the same fix without touching code.
If your theme doesn't have that setting, tell your developer or Shopify theme support: "In the product page Liquid template, find the main product image tag and add loading='eager' and fetchpriority='high' attributes." One line. Ten minutes. Your hero photo loads first instead of waiting for the browser's lazy-load trigger.
This is why so many Shopify pages have this problem: themes apply loading="lazy" to every image as a blanket setting because it improves performance for images below the fold. The first product photo gets caught by the same rule and is delayed. That's the opposite of what you want for LCP.
For a full technical walkthrough including image preload tags and responsive image handling, see How to Optimize Your Shopify Images for Speed.
How Long Until You See Your LCP Score Improve?
After compressing and re-uploading your product images, re-run PageSpeed Insights right away. Lab scores update on every scan. Real-world LCP (the "field data" section from actual visitors) takes 28 days to update in Google Search Console because it's averaged from real user sessions. Don't panic if Search Console is slow to reflect your improvements; the lab data in PageSpeed Insights is the right place to verify your fixes worked.
The practical timeline after making changes:
- PageSpeed Insights lab score: updates on every scan; check this first
- Google Search Console Core Web Vitals report: 28-day rolling window; expect 4 weeks before field data reflects your changes
- Search ranking impact: visible 4–8 weeks after field data improves
Post-fix action checklist:
- Re-run PageSpeed Insights on 3–5 of your product pages, not just one. Different products may have different image sizes, and LCP can vary across pages
- Check the mobile score, always. Google indexes and ranks based on mobile performance
- Monitor the Core Web Vitals report in Google Search Console over the following 4 weeks
Fixing LCP improves your search ranking, and there's a second effect: every second you cut from your load time has a measurable impact on how many visitors complete a purchase. For the full revenue math behind slow product images, see How Slow Product Images Affect Shopify Conversions.
Frequently Asked Questions
Q: What is LCP and why does it matter for my Shopify store?
LCP (Largest Contentful Paint) measures how quickly your main product photo appears on screen. Google uses it as a ranking signal, and it carries 35% of your PageSpeed score. A score above 4 seconds (red) can lower your store's position in search results compared to faster competitors.
Q: What is the LCP element on a Shopify product page?
On most Shopify product pages, the LCP element is the main hero product image, the largest photo displayed above the fold. You can confirm this in PageSpeed Insights under Diagnostics, "Largest Contentful Paint element." On mobile (which Google uses for ranking), it's the first product photo in almost every case.
Q: What is a good LCP score for a Shopify store?
A good LCP score is 2.5 seconds or under (green in PageSpeed Insights). Between 2.5 and 4.0 seconds is orange (needs improvement). Above 4.0 seconds is red (poor). These thresholds are measured at the 75th percentile of real visitor sessions, meaning 75% of your visitors must load that fast.
Q: Why does my Shopify product image cause a slow LCP?
Two main reasons: the file is too large (a 3–5 MB raw product photo takes much longer to download than a 150 KB compressed one), or your theme lazy-loads images, which tells the browser to wait before loading the first product photo. Many Shopify pages lazy-load their LCP image. It's one of the most common causes.
Q: How do I fix LCP on my Shopify store without a developer?
Compress your product images to under 200 KB using tinify.ai (no account needed, free with daily credits), convert them to WebP format, and re-upload them in Shopify admin. Also audit your installed apps and remove any that load before your product photo. These three steps address the most common LCP failures with zero code changes required.
The fastest path from a red PageSpeed score to green on Shopify is compressing your product images. Most how-to guides bury that step under twelve technical instructions. For stores that upload raw camera files or export photos from a photo editor, oversized file size is the primary cause. Start there before anything else.
The sequence:
- Run PageSpeed Insights on your top 3 product pages and note what's flagged
- Download those product images, compress them with tinify.ai, re-upload to Shopify admin
- Re-run PageSpeed Insights. If your score is still red, check for the lazy-loading flag in your theme's Customize settings
- If lazy loading is the issue and there's no theme toggle, ask your developer or Shopify theme support for the
loading="eager"fix. It's a 10-minute task
Try tinify.ai, no account needed, free with daily credits. Drag in your product photos, download compressed versions, and re-upload. That's the first step, and for most stores, it's the biggest one.
Try tinify.ai free
Compress, resize, upscale, and tag images in one click. 20 free daily credits — no signup needed.