How to Fix Largest Contentful Paint (LCP) on Shopify Mobile Stores

1. The Technical Problem

Largest Contentful Paint measures when the largest visual element (usually the hero banner or primary product image) becomes visible to the shopper.

Hero images are often lazy loaded by mistake, hidden behind carousel JavaScript sliders, or served in oversized uncompressed formats without responsive srcset.

2. Engineering Resolution Strategy

1. NEVER lazy load the above-the-fold hero image (`loading='eager'`). 2. Add `` in document ``. 3. Output WebP/AVIF formats with exact responsive sizing.

<!-- Preload Hero Image in theme.liquid <head> -->
{% if template.name == 'product' %}
  <link rel="preload" as="image" href="{{ product.featured_image | image_url: width: 800 }}" fetchpriority="high">
{% elsif template.name == 'index' %}
  <link rel="preload" as="image" href="{{ hero_image | image_url: width: 1200 }}" fetchpriority="high">
{% endif %}

<!-- Eager Hero Image in Liquid -->
{{ product.featured_image | image_url: width: 800 | image_tag: 
  loading: 'eager', 
  fetchpriority: 'high', 
  widths: '375, 550, 750, 1100', 
  alt: product.title 
}}

💡 Pro-Tip: Always create a duplicate theme backup before editing theme.liquid or snippet files.

Frequently Asked Questions