LCP (Largest Contentful Paint)
Definition
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element, usually the hero or main product image, to appear after a page starts loading. Google's good threshold is 2.5 seconds or less at the 75th percentile of visits. On a product page the LCP element is almost always the main image, so image weight, server response time, and render-blocking assets decide the score.
Why it matters for your store
LCP is the metric closest to what a visitor calls "the page loaded." Until the main image is on screen, the product page is not usable. Every extra second here costs visitors, and mobile connections in the field are slower than the office Wi-Fi where stores are tested.
Four things add up to LCP: how fast the server answers, how quickly the browser can start rendering (blocked by CSS and scripts), how soon it discovers the image, and how heavy the image is. A page can fail on any one of them. The fixes are well known: cache the page, keep CSS small, tell the browser about the image early, and serve it in a modern format at the right size.
How Kambloo handles it
Kambloo's storefront budget sets LCP under 2.0 seconds on mobile at the 75th percentile, stricter than Google's threshold, and enforces it in the build pipeline.
Product pages are server-rendered and, for anonymous visitors, served from a full-page cache behind a CDN, so the server response is fast. The main product image is marked as high priority and preloaded, and it is never lazy-loaded; all other images are. Every uploaded image is converted in advance to AVIF and WebP at five sizes, so the browser downloads the smallest file that fits the screen.
There is one precompiled core CSS file served from the CDN, with a store's colors and fonts injected as a tiny inline token block, so nothing large blocks rendering. Fonts default to the system stack; themes that ship their own must self-host and preload them.
Questions about LCP (Largest Contentful Paint)
What is usually the LCP element on a product page?
The main product image. If it is large, lazy-loaded, or served in an old format, LCP suffers. It should be preloaded, prioritised, and delivered in AVIF or WebP at the right size.
Why does lazy loading hurt LCP?
Lazy loading delays an image until the browser decides it is needed. Applied to the main image, it delays the exact element LCP measures. Lazy loading belongs on images below the fold only.