SEO & performance
LCP
Largest Contentful Paint
LCP, or Largest Contentful Paint, measures how long it takes for the biggest visible element — usually a hero image or heading — to render. Google's "good" threshold is 2.5 seconds. On Shopify the usual culprits are unoptimised hero images, render-blocking app scripts, and fonts, in that order.
Why it matters
LCP is the vital that shoppers actually feel. It is the moment the page stops looking broken — before it, a visitor is staring at white space and deciding whether to wait. Bounce rate climbs sharply between two and four seconds, and the visitors lost are the ones who came from paid traffic and never saw the product.
It is also a ranking input, though a modest one. The stronger argument is commercial: LCP sits at the front of every session, so it taxes every downstream metric. A slow hero costs you the same shopper twice — once in search, once in the funnel.
On Shopify the number is usually fixable without touching the platform, because the causes are things the store owner added.
How it works on Shopify
The LCP element is whichever visible element is largest at load, which on a storefront is nearly always the hero image, the first product photo, or an oversized heading. Chrome reports the timing in four parts: time to first byte, resource load delay, resource load time, and render delay. Knowing which part dominates tells you what to fix — the same 4-second LCP has entirely different causes at each stage.
Shopify's own infrastructure handles the first part well, so TTFB is rarely the villain. Load delay usually means the browser discovered the image late, because it sits behind JavaScript or was lazy-loaded. Render delay usually means something is blocking the main thread: an app script in the head, a font that has not swapped, or a theme bundling everything into one file.
Measure in the field, not only in the lab. Lighthouse runs a simulated desktop; Core Web Vitals assessments use real Chrome traffic over 28 days, and the two disagree often enough to send teams optimising the wrong page.
Common mistakes
- Lazy-loading the hero. The single most common self-inflicted LCP problem. Lazy-load everything below the fold and nothing above it.
- Serving one enormous image to every device. A 3000px hero delivered to a phone wastes most of its bytes. Use Shopify's image transformation parameters and a proper srcset.
- Making the hero a carousel. A slider loads several images to show one, and the LCP candidate keeps changing.
- Fonts that block text. Self-host, subset, preload, and let text render in a fallback rather than holding the paint.
- Blaming the theme. Before rebuilding, disable apps one at a time. Injected scripts in the head are the usual cause, and the theme takes the blame because it is the thing you can see.
- Optimising the homepage only. Most sessions land on a product or collection page. Fix the templates traffic actually arrives on.
When you need help
The point to bring someone in is when the obvious work is done and the field data has not moved. Images are compressed, the hero is preloaded, apps are trimmed, and the 75th percentile is still above 2.5 seconds. What remains is usually a theme architecture problem — render-blocking bundles, a critical path nobody has mapped, third-party tags loaded synchronously — and that is a rebuild decision rather than a settings change.
It is also worth outside help when INP and CLS are failing at the same time, because fixing them in isolation tends to trade one against another.
Need this done on your store?
SEO servicesRelated terms
- Core Web VitalsCore Web Vitals are the three metrics Google uses to score real-world page experience: LCP for loading, INP for responsiveness, and CLS for visual stability. They are measured from actual Chrome users, not a lab test, and a page passes only if 75% of visits are within the "good" threshold on all three. They are a genuine — if modest — ranking signal, and a large conversion one.
- INPINP, or Interaction to Next Paint, measures how quickly a page visibly responds to a user's taps, clicks, and key presses across the whole visit — it replaced First Input Delay as a Core Web Vital in March 2024. The "good" threshold is 200 milliseconds. Poor INP is nearly always caused by too much JavaScript on the main thread, which on Shopify usually means too many apps.
- CLSCLS, or Cumulative Layout Shift, measures how much a page's content jumps around while it loads. The "good" threshold is a score below 0.1. It is caused by images and ad slots without reserved dimensions, late-injected banners, and web fonts that resize text on swap — and it is the vital most directly responsible for mis-taps at checkout.