Skip to main content

Understanding LCP (Largest Contentful Paint)

Written by Raj

Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element to appear on screen. This is typically a hero image, product image, large text block, or video poster-the main content your visitors came to see.

LCP is one of Google's Core Web Vitals and directly impacts:

  • User experience: Visitors see meaningful content faster

  • Search engine rankings: Google uses LCP as a ranking signal

  • Conversion rates: Faster-loading pages convert better

LCP thresholds

Rating

Score

What it means

Good

≤ 2.5s

Most visitors see main content quickly

Needs Improvement

2.5s – 4.0s

Some visitors experience noticeable delays

Poor

> 4.0s

Main content loads too slowly

Understanding the LCP detail page

The LCP detail page provides deep insights into what's affecting your largest contentful paint scores.

P75 score card

Shows your 75th percentile LCP, meaning 75% of your visitors experience this load time or faster. This is the score Google uses for search ranking signals. The card also displays a distribution bar showing what percentage of page views fall into Good, Needs Improvement, and Poor categories.

LCP distribution

A histogram showing how LCP values are distributed across all page views. In an ideal scenario, most values cluster in the "Good" range (under 2.5 seconds). A long tail extending into "Poor" territory indicates some visitors are having significantly worse experiences—worth investigating.

LCP timeline

A line chart showing your P75 LCP score over time. The chart displays two lines:

  • Current period: Your LCP scores for the selected date range

  • Previous period: The equivalent prior period for comparison (e.g., if viewing the last 7 days, you'll see the 7 days before that)

Use this to:

  • Spot regressions after theme changes or app installations

  • Confirm that optimizations are working by comparing to the previous period

  • Identify patterns (e.g., slower during high-traffic periods)

LCP rating over time

A stacked area chart showing the daily percentage of page views rated Good, Needs Improvement, or Poor. This complements the P75 timeline by showing the full distribution, not just the 75th percentile.

LCP by country

A world map showing LCP performance by geographic region. Since Shopify manages your CDN infrastructure, some regional variation is expected. However, if specific regions show unusually poor LCP, investigate whether third-party scripts or apps managing pages or content might be hosted in distant regions, slowing things down for those visitors.

LCP elements table

This is your most actionable debugging tool. It lists the actual DOM elements that triggered LCP measurements, grouped by element selector. For each element, you'll see a breakdown of where time is spent:

Phase

What it measures

Common causes of slowness

TTFB

Server response time before the resource starts loading

Slow server response, no caching

Resource load delay

Time waiting for the resource to start downloading

Render-blocking scripts, late discovery

Resource load duration

Time to download the resource

Large file size, slow network

Element render delay

Time after download before the element is visible

Heavy JavaScript, layout calculations

Use this breakdown to pinpoint exactly which phase needs optimization.

Top pages with LCP score

Pages with the most traffic and their LCP scores. Focus optimization efforts here for maximum impact.

Poorest LCP score pages

Pages with the worst LCP scores, regardless of traffic. These may indicate specific template or content issues worth addressing.

Common LCP issues and how to fix them

Slow server response (high TTFB)

If the TTFB column in your LCP elements table shows high values, your server is taking too long to respond.

On Shopify, you can't directly control server infrastructure, but you can:

  • Remove unused apps: Each app can add processing time

  • Simplify Liquid templates: Complex logic slows server response

  • Reduce the number of Liquid objects loaded: Only fetch what you need

  • Implement browser caching: Use a service worker to cache static assets locally, reducing repeat requests to the server

Large images

Images are the most common LCP element. If your LCP images are large, consider:

  • Use modern formats: WebP and AVIF are significantly smaller than JPEG/PNG. Shopify's CDN automatically serves WebP when supported.

  • Size images appropriately: Don't load a 4000px image to display at 800px. Use Shopify's image transformation parameters.

  • Use responsive images: Implement srcset to serve different sizes based on viewport.

Example of a well-optimized product image:

<img
  src="{{ image | image_url: width: 800 }}"
  srcset="{{ image | image_url: width: 400 }} 400w,
          {{ image | image_url: width: 800 }} 800w,
          {{ image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="{{ image.alt }}"
  width="800"
  height="600"
  loading="eager"
  fetchpriority="high"
>

Late discovery of LCP resource

If the "Resource load delay" phase is high, the browser isn't discovering your LCP image early enough. This happens when:

  • Images are loaded via JavaScript instead of HTML

  • CSS background images aren't prioritized

  • The image URL is deeply nested in the DOM

Fixes:

  • Preload critical images: Add to your theme's <head>:

<link rel="preload" as="image" href="{{ hero_image | image_url: width: 1200 }}">

  • Use fetchpriority="high": Tell the browser this image is important:

<img src="..." fetchpriority="high" ...>

  • Avoid lazy loading above-the-fold images: Use loading="eager" for your hero/LCP image.

Render-blocking resources

If JavaScript or CSS is blocking the page from rendering, your LCP element can't appear until those resources finish loading.

  • Defer non-critical JavaScript: Add defer to script tags that aren't needed immediately

  • Remove unused apps: Each app may inject scripts that block rendering

  • Inline critical CSS: For above-the-fold content, consider inlining essential styles

Note: InstaIndex scripts are designed with performance in mind. Our RUM monitoring script is ~13kB (~5kB gzipped) and our 404 monitor is under 1KB (and only loads on 404 pages). All scripts are defer-loaded so they never block your page from rendering.

Element render delay

If download completes quickly but the element still takes time to appear, heavy JavaScript may be blocking the main thread.

  • Reduce JavaScript execution: Remove unused code and optimize what remains

  • Avoid layout thrashing: Batch DOM reads and writes

  • Simplify animations: Use CSS transforms instead of JavaScript animations

Quick wins for better LCP

  1. Check your LCP elements table to identify which elements are causing slow LCP

  2. Optimize your hero/product images with modern formats and appropriate sizing

  3. Add fetchpriority="high" to your main above-the-fold image

  4. Remove or defer apps you don't actively use

  5. Avoid lazy loading your primary product or hero images

Related articles

Related Articles
Did this answer your question?