Largest Contentful Paint (LCP)

Optimizing Shopify LCP Under 2.5 Seconds

LCP accounts for 25% of your Google Lighthouse performance score and directly influences mobile bounce rates. Learn how to optimize Shopify media delivery.

The 4 Phases of LCP Breakdown

1. Time to First Byte (TTFB)

Target: < 250ms. Cloudflare CDN edge caching for Shopify themes.

2. Resource Load Delay

Target: 0ms. Discovered instantly via HTML <link rel='preload'>.

3. Resource Load Duration

Target: < 800ms. Right-sized WebP image payload under 150 KB.

4. Element Render Delay

Target: < 100ms. Zero render-blocking CSS/JS before the hero paints.

Top 3 Fixes for Shopify Themes

Most Shopify themes (Dawn, Prestige, Impulse) bundle global CSS files into theme.css or base.css, which blocks the browser parser until completely fetched. To fix this:

Inline Critical Above-the-Fold CSS: Extract the styling for the navigation bar and hero section into an inline <style> block in theme.liquid.
Add fetchpriority="high": Ensure the primary product image has fetchpriority="high" and loading="eager".
Eliminate Font Swapping Shifts: Use font-display: swap and preload primary brand webfonts in WOFF2 format.