Pacelo.dev

Tag: LCP

  • How to Get 90+ on PageSpeed Insights for Shopify (Complete 2026 Guide)

    How to Get 90+ on PageSpeed Insights for Shopify (Complete 2026 Guide)


    <p>Getting 90+ on PageSpeed Insights for Shopify is one of the highest-impact things you can do for your store's Google ranking and conversion rate. A Shopify store with a PageSpeed Insights score below 50 is actively losing you money. Google ranks faster stores higher. Customers convert on faster stores more. And every second of load time you cut translates directly into more revenue from the same traffic.</p>

    <p>In this guide I'll show you exactly how to get 90+ on PageSpeed Insights for your Shopify store — the same process I use with clients to take scores from the 30s to the 90s, without rebuilding your entire theme from scratch.</p>

    <hr>

    <h2>What Is PageSpeed Insights and Why Does It Matter?</h2>

    <p>PageSpeed Insights (PSI) is Google's free tool for measuring how fast your web pages load. It gives you a score from 0–100 based on real-world performance data and lab tests.</p>

    <p>The four score ranges:</p>

    <ul>

    <li><strong>90–100:</strong> Good — fast, Google rewards this with higher rankings</li>

    <li><strong>50–89:</strong> Needs Improvement — acceptable but leaving conversions on the table</li>

    <li><strong>0–49:</strong> Poor — actively hurting your rankings and conversion rate</li>

    </ul>

    <p>Most Shopify stores I audit score between 20 and 55 on mobile. That's the range where every point of improvement has a measurable impact on sales.</p>

    <p><strong>The mobile score is what matters.</strong> Google uses mobile-first indexing — meaning it ranks your site based on the mobile experience, not desktop. Always run your PSI test on mobile.</p>

    <hr>

    <h2>How to Check Your Current PageSpeed Score</h2>

    <ol>

    <li>Go to <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener">pagespeed.web.dev</a></li>

    <li>Paste your Shopify store URL</li>

    <li>Click Analyze</li>

    <li>Switch to the <strong>Mobile</strong> tab</li>

    <li>Note your overall score AND the individual Core Web Vitals metrics</li>

    </ol>

    <p>The four Core Web Vitals metrics PSI measures:</p>

    <ul>

    <li><strong>LCP (Largest Contentful Paint)</strong> — how fast your main content loads. Target: under 2.5s</li>

    <li><strong>CLS (Cumulative Layout Shift)</strong> — how much your page jumps around while loading. Target: under 0.1</li>

    <li><strong>INP (Interaction to Next Paint)</strong> — how fast your page responds to clicks. Target: under 200ms</li>

    <li><strong>FCP (First Contentful Paint)</strong> — when the first content appears. Target: under 1.8s</li>

    </ul>

    <p>Focus on whichever metric is furthest from its target. That's where the biggest score gains are hiding.</p>

    <hr>

    <h2>How to Get 90+ on PageSpeed Insights for Shopify</h2>

    <h3>1. Fix Your Largest Contentful Paint (LCP) — Biggest Impact</h3>

    <p>LCP is usually the metric dragging your score down the most. It measures how long your hero image or headline takes to fully load.</p>

    <p><strong>Step 1: Identify your LCP element</strong></p>

    <p>PageSpeed Insights will highlight it in the diagnostics. It's almost always your hero banner image.</p>

    <p><strong>Step 2: Compress and convert to WebP</strong></p>

    <p>Use <a href="https://squoosh.app" target="_blank" rel="noopener">Squoosh.app</a> (free) to convert your hero image to WebP format and compress it to under 100KB. Most Shopify hero images are 1–5MB — that alone is killing your LCP.</p>

    <p><strong>Step 3: Add a preload hint</strong></p>

    <p>In your theme's <code>theme.liquid</code>, add this inside the <code>&lt;head&gt;</code> tag:</p>

    <pre><code>&lt;link rel="preload" as="image"

    href="{{ section.settings.image | image_url: width: 1400 }}"

    fetchpriority="high"&gt;</code></pre>

    <p>This tells the browser to start loading your hero image immediately — before it's even discovered in the HTML. On slow connections this single line can cut your LCP by 0.5–1.5 seconds.</p>

    <p><strong>Step 4: Add fetchpriority="high" to your hero image tag</strong></p>

    <pre><code>{{ section.settings.image | image_url: width: 1400, format: 'webp'

    | image_tag: loading: 'eager', fetchpriority: 'high' }}</code></pre>

    <hr>

    <h3>2. Eliminate Render-Blocking Resources</h3>

    <p>PageSpeed Insights will flag "Eliminate render-blocking resources" if your page has CSS or JavaScript that loads before your content paints. This is extremely common on Shopify stores with multiple apps.</p>

    <p><strong>How to fix it:</strong></p>

    <p>Find third-party scripts loading in your <code>theme.liquid</code> and add the <code>defer</code> attribute:</p>

    <pre><code>&lt;!-- Before --&gt;

    &lt;script src="https://app.example.com/widget.js"&gt;&lt;/script&gt;

    &lt;!-- After --&gt;

    &lt;script src="https://app.example.com/widget.js" defer&gt;&lt;/script&gt;</code></pre>

    <p>Only add <code>defer</code> to third-party app scripts — never to your theme's own critical JavaScript.</p>

    <p>For CSS: move any non-critical CSS to load after the page is interactive using JavaScript:</p>

    <pre><code>&lt;link rel="preload" href="non-critical.css" as="style"

    onload="this.onload=null;this.rel='stylesheet'"&gt;</code></pre>

    <hr>

    <h3>3. Audit and Remove Shopify Apps</h3>

    <p>Every Shopify app you install adds JavaScript to every page of your store — even if that app is only relevant on one page. Ten apps can easily add 2–4 seconds to your load time.</p>

    <p>Go to your Shopify Admin → Apps and ask honestly for each one: <em>is this app actively making me money right now?</em></p>

    <p>Apps that commonly destroy PageSpeed scores:</p>

    <ul>

    <li>Live chat widgets (Tidio, Intercom, Zendesk) — delay load by 0.5–1.5s each</li>

    <li>Review apps that load on every page — not just product pages</li>

    <li>Currency converters</li>

    <li>Exit-intent popups</li>

    <li>Affiliate tracking scripts</li>

    <li>Social proof notification apps ("Someone in Texas just bought...")</li>

    </ul>

    <p>Remove every app you're not actively using. Each removal is an instant PageSpeed score improvement.</p>

    <hr>

    <h3>4. Fix Cumulative Layout Shift (CLS)</h3>

    <p>CLS measures how much your page visually jumps around as it loads. A score above 0.1 means elements are shifting — which is jarring for users and penalized by Google.</p>

    <p>Common CLS causes on Shopify:</p>

    <ul>

    <li>Images without explicit width and height attributes</li>

    <li>Fonts loading late and causing text to reflow</li>

    <li>Banners or popups injecting themselves above content</li>

    <li>Embedded third-party widgets resizing after load</li>

    </ul>

    <p><strong>Fix images:</strong> Always specify width and height on img tags:</p>

    <pre><code>{{ image | image_url: width: 800 | image_tag: width: 800, height: 600 }}</code></pre>

    <p><strong>Fix fonts:</strong> Add <code>font-display: swap</code> to your @font-face declarations so text shows immediately in a fallback font while the custom font loads:</p>

    <pre><code>@font-face {

    font-family: 'YourFont';

    font-display: swap;

    src: url('your-font.woff2') format('woff2');

    }</code></pre>

    <hr>

    <h3>5. Optimize Your Images Sitewide</h3>

    <p>Beyond the hero image, every unoptimized image on your Shopify store slows it down. A typical product page with 8 unoptimized product images can add 3–5 seconds to load time.</p>

    <p><strong>Rules for all Shopify images:</strong></p>

    <ul>

    <li>Always use WebP format (Shopify supports this natively via the format: 'webp' parameter)</li>

    <li>Always specify a width parameter matching your actual display size</li>

    <li>Always use loading="lazy" on images below the fold</li>

    <li>Never use loading="lazy" on your hero image (use eager instead)</li>

    </ul>

    <pre><code>&lt;!-- Hero image — load immediately --&gt;

    {{ hero_image | image_url: width: 1400, format: 'webp'

    | image_tag: loading: 'eager', fetchpriority: 'high' }}

    &lt;!-- Product images — lazy load --&gt;

    {{ product.featured_image | image_url: width: 800, format: 'webp'

    | image_tag: loading: 'lazy' }}</code></pre>

    <hr>

    <h3>6. Reduce Unused CSS and JavaScript</h3>

    <p>Shopify themes ship with CSS for every possible section and feature — even the ones you're not using. This unused CSS is downloaded by every visitor's browser, adding unnecessary load time.</p>

    <p>PageSpeed Insights will flag this as "Reduce unused CSS" and "Reduce unused JavaScript."</p>

    <p><strong>Practical fixes:</strong></p>

    <ul>

    <li>Delete sections from your theme that you don't use — each section has its own CSS file</li>

    <li>Switch to Shopify's Dawn theme if you're on a heavily bloated third-party theme — Dawn is engineered for speed</li>

    <li>Use Shopify's built-in asset pipeline instead of loading jQuery from an external CDN</li>

    </ul>

    <hr>

    <h3>7. Improve Server Response Time (TTFB)</h3>

    <p>Time to First Byte (TTFB) measures how long Shopify's servers take to start responding. If your TTFB is above 600ms, everything that loads after it is delayed.</p>

    <p>For Shopify stores specifically:</p>

    <ul>

    <li>Use Shopify's built-in CDN for all images and assets — never host images externally</li>

    <li>Minimize the number of metafield lookups in your theme code</li>

    <li>Avoid complex Liquid loops that process large collections on every page load</li>

    <li>Enable Shopify's storefront caching where possible</li>

    </ul>

    <hr>

    <h2>What Score Can You Realistically Achieve?</h2>

    <p>Here's what's achievable at each level of optimization effort:</p>

    <table>

    <thead>

    <tr><th>Effort Level</th><th>Score Range</th><th>Time Required</th></tr>

    </thead>

    <tbody>

    <tr><td>Quick wins only (images + preload)</td><td>55–70</td><td>2–4 hours</td></tr>

    <tr><td>App audit + defer scripts</td><td>65–80</td><td>Half a day</td></tr>

    <tr><td>Theme-level CSS/JS optimization</td><td>75–90</td><td>1–3 days</td></tr>

    <tr><td>Full rebuild for performance</td><td>90–100</td><td>1–2 weeks</td></tr>

    </tbody>

    </table>

    <p>Most stores can get from a score of 35 to a score of 70 with just the quick wins. Getting to 90+ usually requires theme-level work — but the conversion and ranking impact is significant.</p>

    <hr>

    <h2>Real Results: Radeant Shopify Rebuild</h2>

    <p>On a recent rebuild for Radeant, a haircare ecommerce brand, applying these optimizations as part of a full theme rebuild delivered:</p>

    <table>

    <thead>

    <tr><th>Metric</th><th>Before</th><th>After</th></tr>

    </thead>

    <tbody>

    <tr><td>PageSpeed Score (Mobile)</td><td>38</td><td>96</td></tr>

    <tr><td>Largest Contentful Paint</td><td>5.0s</td><td>2.0s</td></tr>

    <tr><td>Core Web Vitals</td><td>Fail</td><td>Pass</td></tr>

    <tr><td>Conversion Rate</td><td>1.0×</td><td>3.1×</td></tr>

    </tbody>

    </table>

    <p>The score improvement from 38 to 96 wasn't magic — it was applying exactly the steps outlined in this guide, systematically, starting with the highest-impact fixes first.</p>

    <hr>

    <h2>The Order to Fix Things In</h2>

    <p>Don't try to fix everything at once. Work through this checklist in order:</p>

    <ol>

    <li>✅ Compress hero image to WebP, under 100KB</li>

    <li>✅ Add preload hint for hero image in theme.liquid</li>

    <li>✅ Add fetchpriority="high" and loading="eager" to hero image tag</li>

    <li>✅ Remove all unused Shopify apps</li>

    <li>✅ Add defer to third-party scripts</li>

    <li>✅ Add explicit width/height to all images</li>

    <li>✅ Add font-display: swap to custom fonts</li>

    <li>✅ Convert all product images to WebP with lazy loading</li>

    <li>✅ Remove unused theme sections and their CSS</li>

    <li>✅ Retest on PageSpeed Insights after each change</li>

    </ol>

    <p>Each fix moves your score. Retest after each one so you can see exactly what impact each change had.</p>

    <hr>

    <h2>Want Us to Get Your Store to 90+?</h2>

    <p>If you'd rather have someone who does this every day handle it — I offer a free 15-minute site audit where I pull up your live PageSpeed Insights report and show you exactly which fixes will have the biggest impact on your specific store.</p>

    <p>No charge. No obligation. You keep the findings either way.</p>

    <p><a href="https://cal.com/arsalanpacelo/15min" target="_blank" rel="noopener"><strong>Book a free PageSpeed audit →</strong></a></p>

    <p>Or email: <a href="mailto:arsalan@pacelo.dev">arsalan@pacelo.dev</a></p>

    <hr>

    <h2>Summary: How to Get 90+ on PageSpeed Insights for Shopify</h2>

    <ol>

    <li>Compress hero image to WebP under 100KB</li>

    <li>Add preload hint and fetchpriority="high" to hero image</li>

    <li>Eliminate render-blocking scripts with defer</li>

    <li>Remove unused Shopify apps</li>

    <li>Fix CLS with explicit image dimensions and font-display: swap</li>

    <li>Convert all images to WebP with lazy loading</li>

    <li>Reduce unused CSS by removing unused theme sections</li>

    <li>Improve TTFB by using Shopify's CDN and minimizing Liquid complexity</li>

    </ol>

    <p>Start with steps 1–3. Those alone will move most Shopify stores from the 30–40 range into the 60–70 range. Getting to 90+ requires the full list — but it's achievable on any Shopify store with the right approach.</p>

    <hr>

    <p><em>Arsalan Ahmad is the founder of <a href="https://pacelo.dev" target="_blank" rel="noopener">Pacelo</a> — a performance-first Shopify and WordPress agency. Top Rated Plus on Upwork with a 100% Job Success Score.</em></p>

  • How to Fix LCP on Shopify in 2026 (Proven Step-by-Step Guide)

    How to Fix LCP on Shopify in 2026 (Proven Step-by-Step Guide)

    Fixing LCP on Shopify is one of the highest-impact things is one of the most important numbers you’re probably ignoring. It’s the main reason your store feels slow, ranks lower on Google, and loses customers before they ever see your products.

    In this guide I’ll show you exactly how to fix LCP on Shopify — the same process I used to take a haircare brand’s store from 5.0s LCP down to 2.0s, and watch their conversion rate triple in the first 30 days.

    No fluff. Just what actually works.

    What Is LCP and Why Does It Matter for Shopify?

    LCP stands for Largest Contentful Paint. It measures how long it takes for the biggest visible element on your page — usually your hero image or headline — to fully load on screen.

    Google considers anything under 2.5 seconds “Good.” Between 2.5s and 4.0s is “Needs Improvement.” Above 4.0s is “Poor.”

    Most Shopify stores I audit are sitting between 4.0s and 8.0s. That means:

    • Google is actively ranking your competitors above you
    • Visitors are leaving before your page even loads
    • Every dollar you spend on ads is bringing people to a page that drives them away

    The good news: LCP is fixable. And fixing it has a direct, measurable impact on sales.

    What Causes Slow LCP on Shopify?

    Before fixing anything, you need to know what’s causing the problem. The most common LCP killers on Shopify stores are:

    1. Unoptimized Hero Images

    Your hero banner is usually the largest element on the page — which makes it the LCP element. If it’s a 3MB PNG file, your LCP will be slow no matter what else you fix.

    2. Render-Blocking JavaScript and CSS

    Shopify themes load a lot of JavaScript by default. If that JS runs before your page paints, your LCP suffers. Third-party apps (review widgets, chat plugins, upsell apps) are especially guilty here.

    3. No Image Preloading

    The browser doesn’t know your hero image is important until it finds it in the HTML. By then it’s already late. Adding a preload hint tells the browser to fetch it immediately.

    4. Too Many Shopify Apps

    Every app you install adds JavaScript to your storefront. Ten apps can add 2–4 seconds of load time. Most store owners have 15–30 apps installed.

    5. Non-Optimized Fonts

    Loading Google Fonts or custom fonts without proper font-display settings causes text to appear late, which can push your LCP score down.

    6. Slow Server Response Time (TTFB)

    If Shopify’s servers are taking over 600ms to respond, your LCP starts late before any resources even load.

    How to Check Your Current LCP Score

    Before fixing anything, measure it.

    1. Go to PageSpeed Insights
    2. Paste your Shopify store URL
    3. Run the test on Mobile (this is what Google uses for ranking)
    4. Look at the “Largest Contentful Paint” metric under Core Web Vitals

    Also check which element IS your LCP — PageSpeed Insights will show you. It’s usually your hero image, a large headline, or a banner above the fold.

    Note the element and the time. That’s your starting point.

    How to Fix LCP on Shopify — 7 Proven Steps

    Step 1: Convert Your Hero Image to WebP and Compress It

    If your LCP element is an image (which it usually is), this single step can cut your LCP by 30–50%.

    What to do:

    • Export your hero image at the actual display size — not 4000px wide if it only shows at 1400px
    • Convert it to WebP format using Squoosh (free, no install needed)
    • Aim for under 100KB for desktop hero images
    • Upload the compressed WebP to Shopify

    In your theme code, make sure the image tag includes fetchpriority high:

    {{ section.settings.image | image_url: width: 1400, format: 'webp' | image_tag: loading: 'eager', fetchpriority: 'high' }}

    Step 2: Add a Preload Hint for Your Hero Image

    This is the single highest-impact fix most Shopify developers miss. Add this in your theme’s <head> section inside theme.liquid:

    <link rel="preload" as="image" href="{{ section.settings.image | image_url: width: 1400 }}" fetchpriority="high">

    This tells the browser to start downloading your hero image immediately — before it even finishes parsing the HTML. On slow connections this alone can shave 0.5–1.5 seconds off your LCP.

    Step 3: Audit and Remove Unnecessary Shopify Apps

    Go to Shopify Admin → Apps and ask yourself honestly: is this app actively making me money right now?

    Apps that commonly hurt LCP the most:

    • Live chat widgets (Tidio, Zendesk, Intercom)
    • Review apps that load on every page
    • Currency converters
    • Popup and exit-intent tools
    • Affiliate tracking scripts

    For every app you remove, you eliminate its JavaScript from loading on every page. I’ve seen stores cut 2+ seconds from load time just by removing 5–8 unused apps.

    Step 4: Defer Non-Critical JavaScript

    Find any third-party scripts in your theme.liquid and add the defer attribute:

    <!-- Before -->
<script src="https://some-app.com/widget.js"></script>

<!-- After -->
<script src="https://some-app.com/widget.js" defer></script>

    Important: Only defer third-party app scripts — not your theme’s own critical scripts.

    Step 5: Fix Font Loading

    Add font-display: swap to prevent invisible text during load, and preconnect to Google Fonts:

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    And in your CSS:

    @font-face {
  font-family: 'YourFont';
  font-display: swap;
  src: url('your-font.woff2') format('woff2');
}

    Step 6: Use Shopify’s Lazy Loading Correctly

    Lazy loading is good for images below the fold — but it’s terrible for your hero image. Make sure your hero image uses loading=”eager”:

    {{ image | image_url: width: 1400 | image_tag: loading: 'eager' }}

    And images below the fold use loading=”lazy”:

    {{ image | image_url: width: 800 | image_tag: loading: 'lazy' }}

    A surprisingly common mistake is themes that apply lazy loading to every image including the hero — which directly tanks LCP.

    Step 7: Reduce Your Theme’s CSS Payload

    Go to PageSpeed Insights → click “Reduce unused CSS” in the recommendations. Shopify themes ship with CSS for every possible section, even ones you’re not using.

    Options to fix it:

    • Switch to a leaner theme (Dawn is Shopify’s fastest free theme)
    • Move critical CSS inline in <head> so it loads immediately
    • Remove sections and blocks you don’t use from your theme

    Real Results: What These Fixes Actually Deliver

    On a recent Shopify rebuild for Radeant, a haircare ecommerce brand, applying these fixes delivered:

    MetricBeforeAfter
    Largest Contentful Paint5.0s2.0s
    PageSpeed Score3896
    Core Web VitalsFailPass
    Conversion Rate1.0×3.1×

    The conversion rate lift happened because the same traffic that was bouncing off a slow page was now staying, browsing, and buying. Speed is not a technical metric. It’s a revenue metric.

    How Long Does It Take to Fix LCP on Shopify?

    • Quick wins (image compression, preload hint, font fixes): 2–4 hours
    • App audit and defer: half a day
    • Theme-level fixes (CSS, JS architecture): 1–3 days
    • Full rebuild for maximum performance: 1–2 weeks

    If your store is sitting above 4.0s LCP, the quick wins alone will probably get you under 3.0s. Getting under 2.5s (Google’s “Good” threshold) usually requires theme-level work.

    Want Us to Fix Your Shopify LCP?

    If you’d rather have someone who does this every day handle it — I offer a free 15-minute site audit where I pull up your live PageSpeed Insights report and show you exactly what’s slowing your store down.

    No charge. No obligation. You keep the findings either way.

    Book a free Shopify speed audit →

    Or email: arsalan@pacelo.dev

    Summary: How to Fix LCP on Shopify

    1. Compress and convert your hero image to WebP
    2. Add a preload hint for the LCP image
    3. Remove or defer unnecessary Shopify apps
    4. Add defer to third-party scripts
    5. Fix font loading with font-display: swap
    6. Use loading=”eager” on hero, loading=”lazy” below fold
    7. Reduce unused CSS payload

    Start with Steps 1 and 2 — those two alone will show you the fastest improvement.

    Arsalan Ahmad is the founder of Pacelo — a performance-first Shopify and WordPress agency. Top Rated Plus on Upwork with a 100% Job Success Score.