Fix LCP Issues on Shopify (Loading Speed) | OpsBlu Docs

Fix LCP Issues on Shopify (Loading Speed)

Improve Shopify LCP by optimizing hero images, reducing Liquid render time, deferring app scripts, and leveraging section lazy loading.

Largest Contentful Paint (LCP) measures how quickly the main content of your Shopify store loads. Poor LCP directly impacts SEO rankings and conversion rates.

Target: LCP under 2.5 seconds Good: Under 2.5s | Needs Improvement: 2.5-4.0s | Poor: Over 4.0s

For general LCP concepts, see the global LCP guide.

Shopify-Specific LCP Issues

1. Unoptimized Hero Images

The most common LCP issue on Shopify stores is large, unoptimized hero images.

Problem: Large homepage banner images loading slowly.

Diagnosis:

  • Run PageSpeed Insights
  • Check if hero image is flagged as LCP element
  • Look for "Properly size images" warning

Solutions:

A. Use Shopify's Image Optimization

Shopify automatically optimizes images through its CDN. Use the image_url filter with size parameters:

<!-- Before: Full-size image -->
<img src="{{ section.settings.image | image_url }}" alt="Banner">

<!-- After: Optimized with max width -->
<img
  src="{{ section.settings.image | image_url: width: 1920 }}"
  srcset="{{ section.settings.image | image_url: width: 375 }} 375w,
          {{ section.settings.image | image_url: width: 750 }} 750w,
          {{ section.settings.image | image_url: width: 1100 }} 1100w,
          {{ section.settings.image | image_url: width: 1500 }} 1500w,
          {{ section.settings.image | image_url: width: 1920 }} 1920w"
  sizes="100vw"
  width="1920"
  height="600"
  alt="Banner"
  loading="eager"
>

Key improvements:

  • Explicit width parameter limits image size
  • srcset provides responsive images for different screen sizes
  • width and height prevent layout shift
  • loading="eager" prioritizes hero image (above fold)

B. Preload Hero Image

Add to theme.liquid in <head> section:

{% if template.name == 'index' %}
  <link
    rel="preload"
    as="image"
    href="{{ section.settings.hero_image | image_url: width: 1920 }}"
    imagesrcset="{{ section.settings.hero_image | image_url: width: 375 }} 375w,
                 {{ section.settings.hero_image | image_url: width: 750 }} 750w,
                 {{ section.settings.hero_image | image_url: width: 1920 }} 1920w"
    imagesizes="100vw"
  >
{% endif %}

Note: Only preload the LCP image. Preloading too many resources can hurt performance.

C. Use Native Lazy Loading

For images below the fold:

<img
  src="{{ image | image_url: width: 800 }}"
  loading="lazy"
  width="800"
  height="600"
  alt="Product image"
>

Important: Do NOT use loading="lazy" on hero/above-fold images. Use loading="eager" instead.

2. Dawn Theme Optimizations

Dawn is Shopify's default theme and generally well-optimized, but can be improved.

Optimize Image Loading Section

In Dawn's image banner section (sections/image-banner.liquid):

<!-- Find the image tag and add priority hints -->
{%- if section.index == 1 -%}
  {%- assign loading = 'eager' -%}
  {%- assign fetchpriority = 'high' -%}
{%- else -%}
  {%- assign loading = 'lazy' -%}
  {%- assign fetchpriority = 'auto' -%}
{%- endif -%}

<img
  srcset="{{ block.settings.image | image_url: width: 375 }} 375w,
          {{ block.settings.image | image_url: width: 750 }} 750w,
          {{ block.settings.image | image_url: width: 1920 }} 1920w"
  src="{{ block.settings.image | image_url: width: 1920 }}"
  sizes="100vw"
  loading="{{ loading }}"
  fetchpriority="{{ fetchpriority }}"
  width="{{ block.settings.image.width }}"
  height="{{ block.settings.image.height }}"
  alt="{{ block.settings.image.alt | escape }}"
>

This prioritizes the first section's image while lazy-loading others.

Remove Unused Dawn Features

If not using certain Dawn features:

  1. Remove unused sections: Go to theme editor, delete sections you don't use
  2. Disable cart drawer if using standard cart page
  3. Remove predictive search if not needed

3. Shopify App Scripts Impact

Apps are the #1 cause of performance issues on Shopify.

Audit App Impact

  1. Check Shopify Admin:

    • Go to Online Store → Themes → Actions → Edit code
    • Find theme.liquid
    • Look for app script embeds (usually near \{\{ content_for_header \}\})

  2. Measure App Impact:

    • Use Chrome DevTools Network tab
    • Look for scripts from app domains
    • Check script sizes and load times

  3. Common Problematic Apps:

    • Review/rating apps (often load slowly)
    • Live chat widgets
    • Popup/email capture apps
    • Social proof apps ("X people viewing")
    • Large theme customization apps

Solutions:

A. Remove Unused Apps

Settings → Apps and sales channels → Uninstall

Important: Uninstalling removes app code. Simply disabling may leave scripts behind.

B. Consolidate App Functionality

Instead of multiple apps, use:

  • GTM for all tracking (instead of individual pixel apps)
  • Native Shopify features when possible
  • Lighter-weight alternatives

C. Delay Non-Critical App Scripts

For apps you must keep, delay their loading:

<script>
  // Delay app scripts until page interaction
  document.addEventListener('DOMContentLoaded', function() {
    let timer = null;

    function loadAppScripts() {
      if (timer) return;

      // Load your app script here
      const script = document.createElement('script');
      script.src = 'https://app-domain.com/script.js';
      document.body.appendChild(script);
    }

    // Load on first user interaction
    ['scroll', 'click', 'mousemove', 'touchstart'].forEach(function(event) {
      window.addEventListener(event, function() {
        timer = setTimeout(loadAppScripts, 100);
      }, { once: true });
    });
  });
</script>

4. Theme JavaScript and CSS

Render-blocking JavaScript and CSS delay LCP.

Identify Render-Blocking Resources

Run PageSpeed Insights and look for:

Solutions:

A. Defer Non-Critical JavaScript

In theme.liquid, ensure scripts use defer:

<!-- Good: Deferred -->
<script src="{{ 'theme.js' | asset_url }}" defer></script>

<!-- Bad: Blocking -->
<script src="{{ 'theme.js' | asset_url }}"></script>

B. Inline Critical CSS

For above-fold styles, inline them in <head>:

<style>
  /* Critical CSS for hero section */
  .hero-banner {
    width: 100%;
    height: 600px;
    /* ... */
  }
</style>

<!-- Load full CSS asynchronously -->
<link
  rel="preload"
  href="{{ 'theme.css' | asset_url }}"
  as="style"
>
<noscript>
  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
</noscript>

C. Remove Unused Theme Code

Dawn and other themes include code for features you may not use:

  1. Disable unused sections in theme settings
  2. Remove unused JavaScript modules from theme code
  3. Remove unused CSS (requires developer expertise)

5. Font Loading Issues

Custom fonts can delay LCP if not optimized.

Shopify Font Loading Best Practice

Use font-display: swap and preload fonts:

<!-- In theme.liquid <head> -->
<link
  rel="preload"
  href="{{ 'font-name.woff2' | asset_url }}"
  as="font"
  type="font/woff2"
  crossorigin
>

<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('{{ 'font-name.woff2' | asset_url }}') format('woff2');
    font-display: swap; /* Show fallback font immediately */
    font-weight: 400;
    font-style: normal;
  }
</style>

Alternative: Use Shopify's font picker which automatically optimizes fonts.

6. Shopify CDN and Hosting

Shopify's CDN is generally fast, but can be optimized.

Use Shopify's CDN for All Assets

<!-- Good: Uses Shopify CDN -->
<img src="{{ 'image.jpg' | asset_url }}" alt="Product">

<!-- Bad: External host -->
<img src="https://yoursite.com/image.jpg" alt="Product">

Shopify Markets and CDN

If using Shopify Markets for international stores:

  • Shopify automatically serves content from nearest CDN edge
  • No additional configuration needed
  • Verify with CDN Planet

7. Third-Party Scripts

External scripts (analytics, ads, chat) delay LCP.

Common Third-Party Scripts on Shopify:

Solutions:

A. Load Scripts Asynchronously

<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>

B. Use GTM to Manage All Scripts

  • Install GTM once
  • Add all other scripts through GTM
  • Control load timing via GTM triggers

C. Delay Non-Critical Scripts

Load chat widgets, social proof, etc. after LCP:

// Wait 3 seconds or until user interaction
setTimeout(function() {
  // Load chat widget
}, 3000);

Testing & Monitoring

Test LCP

Tools:

  1. PageSpeed Insights - Lab and field data
  2. WebPageTest - Detailed waterfall
  3. Chrome DevTools - Local testing
  4. Shopify's Online Store Speed - Built-in analytics

Test Multiple Pages:

  • Homepage
  • Collection pages
  • Product pages
  • Cart page

Test Different Devices:

  • Desktop
  • Mobile
  • Tablet

Monitor LCP Over Time

Chrome User Experience Report (CrUX):

  • Real user data in PageSpeed Insights
  • Track trends over 28 days

Google Search Console:

Third-Party Monitoring:

  • SpeedCurve
  • Calibre
  • DebugBear

Common LCP Elements in Shopify

Different pages have different LCP elements:

Page Type Common LCP Element Optimization Priority
Homepage Hero banner image Highest
Collection First product image High
Product Main product image Highest
Blog Featured image Medium
Cart Cart icon/image Low

Optimize the LCP element for your highest-traffic pages first.

Shopify Theme-Specific Issues

Dawn Theme

  • Generally well-optimized
  • May need image preloading added
  • Remove unused sections to reduce CSS/JS

Legacy Themes (Debut, Brooklyn, etc.)

  • Often have render-blocking scripts
  • Lack modern image optimization
  • Recommendation: Upgrade to Dawn or OS 2.0 theme

Custom Themes

  • Vary widely in optimization
  • May need developer to optimize
  • Audit carefully before launch

Shopify Plus Optimizations

Shopify Plus stores have additional options:

Checkout Optimization

  • Customize checkout.liquid
  • Remove unnecessary scripts
  • Optimize checkout images

Scripts API

  • Control script loading order
  • Conditionally load scripts
  • Better than app embeds

Launchpad

  • Schedule theme updates
  • Test performance before major sales
  • Rollback if performance degrades

Quick Wins Checklist

Start here for immediate LCP improvements:

  • Upload optimized hero images (< 200KB)
  • Add explicit width/height to hero images
  • Use loading="eager" on LCP image
  • Preload hero image in <head>
  • Uninstall unused apps
  • Defer non-critical JavaScript
  • Use font-display: swap for fonts
  • Enable Shopify's automatic image optimization
  • Update to Dawn or OS 2.0 theme
  • Test with PageSpeed Insights

When to Hire a Developer

Consider hiring a Shopify Expert if:

  • LCP consistently over 4 seconds after optimizations
  • Complex custom theme needs optimization
  • Multiple apps required but causing performance issues
  • Need custom JavaScript/CSS optimization
  • Migrating from legacy theme to OS 2.0

Find Shopify Experts: shopify.com/partners

Next Steps

For general LCP optimization strategies, see LCP Optimization Guide.

返回顶部