LCP (Largest Contentful Paint)
Largest Contentful Paint measures how long it takes for the largest visible content element on a page — usually a hero image or headline — to finish loading. Google considers an LCP under 2.5 seconds to be "Good." An LCP over 4 seconds is "Poor."
Why It Matters for Shopify Stores
LCP is one of Google's three Core Web Vitals and directly affects your search rankings. For Shopify stores, the LCP element is almost always a product or hero image. A slow LCP means visitors see a blank or partially loaded page for longer, increasing the chance they leave before seeing your products. Improving LCP typically means optimizing image delivery — switching to WebP, using Shopify's native responsive image tags, and avoiding render-blocking resources that delay the first meaningful paint.
How to Check Your Store
Run your store URL through Google PageSpeed Insights (pagespeed.web.dev). Under 'Core Web Vitals Assessment', look for the LCP value. You can also check your real-user data in Google Search Console under 'Core Web Vitals'.
Use the free shopify speed test toolHow to Fix It
Preload your hero image using <link rel='preload' fetchpriority='high'>. Convert images to WebP format. Remove render-blocking JavaScript and CSS. Use Shopify's built-in image_url filter with width parameters to serve appropriately sized images.
Related Terms
FCP (First Contentful Paint)
Core Web VitalsFirst Contentful Paint marks the point when the browser first renders any text, image, or non-white content to the screen.
TTFB (Time to First Byte)
Core Web VitalsTime to First Byte is the time between a user's browser making an HTTP request and receiving the first byte of data from the server.
CLS (Cumulative Layout Shift)
Core Web VitalsCumulative Layout Shift measures visual instability — how much page elements unexpectedly move while the page is loading.
INP (Interaction to Next Paint)
Core Web VitalsInteraction to Next Paint measures the responsiveness of your page to user interactions — clicks, taps, and keyboard input.
Render-Blocking Resources
PerformanceRender-blocking resources are CSS or JavaScript files that prevent a browser from displaying page content until they've fully downloaded and parsed.
Lazy Loading
PerformanceLazy loading is a technique where images and other resources are only loaded when they're about to enter the user's viewport — rather than all at once when the page first loads.
WebP Image Format
PerformanceWebP is a modern image format developed by Google that provides superior compression compared to JPEG and PNG — typically 25–35% smaller at equivalent visual quality.
Check your store's LCP with our free tools
Get a full audit across all 6 performance categories — including core web-vitals — in under 60 seconds.
Run a Free Store Audit