CATEGORY · Performance · B01
LCP
Largest Contentful Paint
LCP measures when the largest visible content renders after navigation starts. On Shopify, identify whether the measured element is an image or text, then isolate what delays its display.
What LCP measures
LCP records when the largest visible content element renders after navigation starts. It may be an image or text block: identify the measured element before choosing a fix.
Thresholds
- ≤ 2.5 seconds→ Good
- > 2.5 to 4 seconds→ Needs improvement
- > 4 seconds→ Poor
Assess field experience at the 75th percentile, separating mobile and desktop. A lab test reproduces conditions but does not represent all visits.
Illustrative Shopify product-page example
A product page shows its title while the main photo is delayed. If that photo is the LCP element, inspect request start, download time and rendering delay. If text is the LCP element, investigate fonts and rendering instead.
A theme change to test
{{ section.settings.image | image_url: width: 1600 | image_tag: widths: '400, 800, 1200, 1600', sizes: '(min-width: 990px) 50vw, 100vw', loading: 'eager', fetchpriority: 'high' }}This is an example, not a universal replacement. Adapt the image setting and sizes to the actual layout and retain meaningful alternative text. Avoid lazy loading the LCP image, indicate its priority and reserve its ratio. Lower images can remain deferred.
Diagnose before changing code
- Identify the affected template and device. Record test conditions and the observed LCP element.
- If HTML is slow, inspect redirects and server processing before images.
- If image discovery is delayed, inspect initial HTML, lazy loading and JavaScript dependencies.
- If download time is high, compare delivered dimensions, compression and displayed size.
- If the resource is loaded but invisible, inspect animations, CSS and JavaScript work delaying rendering.
Validate the result
- Keep a baseline and repeat the same journey under comparable conditions after the change.
- Test several products, a collection and home: a section change can help one page but hurt another.
- Check image quality, mobile crop, gallery, variant selection and cart behavior.
- Monitor field data when available. It does not update instantly and can differ from a lab test.
What a good LCP does not prove
“Good on desktop means good everywhere.”
Devices, networks and displayed content differ. Check mobile separately and use actual audience data rather than an assumed percentage.
“A better metric guarantees more sales.”
A technical improvement does not prove a commercial gain. Compare enquiries or orders over comparable periods and account for campaigns and seasonality.
Related terms
Go further
Sources and editorial context
Teo Comyn · Updated
Technical references consulted for this revision. Illustrative examples are not measured client results. Check the current documentation and your store before applying a change.
Editorial policy