How to Use This LCP Audit Checklist
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on a page to fully render. For ecommerce stores, that element is almost always a hero image, product photo, or above-the-fold banner. Google's Core Web Vitals threshold sets a passing LCP at 2.5 seconds or under; anything above 4.0 seconds is a failing score.
Work through each of the 12 checks below in order. Run Google PageSpeed Insights or Chrome DevTools' Performance panel to collect data before you start — you need a baseline. Mark each item Pass, Fail, or Not Applicable. Any single Fail can cost your store meaningful ranking signal and conversion rate.
Image and Media Checks (Items 1–4)
Check 1 — LCP Image Format: Open PageSpeed Insights on your homepage, top category page, and a best-selling product page. Identify the LCP element. Pass: the image is served as WebP or AVIF. Fail: the image is JPEG or PNG without a next-gen format alternative. Converting a 400 KB hero JPEG to WebP typically drops file size by 25–35% without visible quality loss.
Check 2 — LCP Image Dimensions Match Display Size: In Chrome DevTools, inspect the LCP element. Compare the intrinsic pixel dimensions to the rendered display dimensions. Pass: intrinsic width is within 10% of the display width at the largest viewport where the image appears. Fail: the intrinsic width is more than 1.5× the display width, indicating the browser downloads more pixels than it shows.
Check 3 — LCP Image Compression Level: Download the LCP image and run it through Squoosh or a similar lossless/lossy audit tool. Pass: image file size is under 150 KB for a full-width hero at quality 75–85 (WebP). Fail: image exceeds 300 KB at any quality setting before format conversion is applied.
Check 4 — Video Poster Image for Video LCP Elements: If your LCP element is a video hero, check that a poster attribute is set on the <video> tag. Pass: a poster image is present, is the correct format (WebP), and is preloaded. Fail: no poster is set, forcing the browser to wait for the first video frame before painting any LCP candidate.
Resource Loading Checks (Items 5–8)
Check 5 — Preload Hint for LCP Image: In your page's <head>, look for a <link rel='preload' as='image'> tag pointing to the LCP image. Pass: a preload hint exists and the image URL matches the actual LCP resource loaded (verify in the Network waterfall — it should appear in the first 1–2 requests). Fail: no preload hint is present, and the browser discovers the image only after parsing HTML and CSS.
Check 6 — LCP Image Not Lazy-Loaded: Check the HTML or JavaScript that renders the LCP image. Pass: the LCP image has no loading='lazy' attribute and is not controlled by an IntersectionObserver that defers its load. Fail: loading='lazy' is present on the LCP image, which forces the browser to defer the request until after layout — this is one of the single most common LCP killers in ecommerce themes.
Check 7 — Time to First Byte (TTFB) Under 800 ms: TTFB is the prerequisite for LCP. In Chrome DevTools Network panel, click the HTML document request and read the 'Waiting (TTFB)' value. Pass: TTFB is 800 ms or under. Fail: TTFB exceeds 800 ms, indicating server response, CDN misconfiguration, or uncached dynamic content is delaying everything downstream.
Check 8 — LCP Resource Served From CDN: Check the response headers of the LCP image request for a CDN identifier (e.g., x-cache: HIT, cf-cache-status: HIT, or a CDN-origin hostname). Pass: the image is served from a CDN edge node geographically close to the test location. Fail: the image is served directly from the origin server, adding network latency for every visitor outside the server's region.
Render-Blocking and CSS Checks (Items 9–10)
Check 9 — No Render-Blocking Resources Above LCP Element: In PageSpeed Insights' 'Opportunities' section, look for 'Eliminate render-blocking resources.' Pass: no render-blocking CSS or JavaScript files delay the browser from painting the LCP element; or any blocking resources are inlined/deferred. Fail: one or more CSS files load synchronously in <head> and are not critical-path inlined, adding 200–600 ms before the browser can paint any above-the-fold content.
Check 10 — Critical CSS Is Inlined for Above-the-Fold Content: Extract the CSS rules that style the LCP element. Pass: those rules are inlined in a <style> block in <head> so they are immediately available without a network round-trip. Fail: all styling is in an external stylesheet that must be downloaded and parsed before the LCP element can be painted. This matters most on mobile connections where CSS file requests add significant latency.
Font and Third-Party Checks (Items 11–12)
Check 11 — Web Fonts Do Not Block LCP Text Elements: If your LCP element is a text block (headline, promotional banner text), check the @font-face declarations. Pass: fonts use font-display: swap or font-display: optional so text renders immediately in a fallback font while the custom font loads. Fail: font-display is absent or set to block, causing invisible text (FOIT) that delays the LCP paint until the font file fully loads.
Check 12 — Third-Party Scripts Do Not Execute Before LCP Paints: In Chrome DevTools' Performance trace, identify the LCP marker timestamp. Check whether any third-party script (chat widget, analytics, A/B testing tool) executes on the main thread before that timestamp. Pass: all non-essential third-party scripts are deferred or loaded asynchronously and do not block the main thread before LCP. Fail: a third-party script runs synchronously or fires a long task that pushes the LCP paint past the 2.5-second threshold.
Prioritizing Fixes After the Audit
After completing the 12 checks, sort your Fails into two groups: image/media issues (Checks 1–4) and loading/rendering issues (Checks 5–12). Image issues are almost always the fastest to fix — format conversion and removing lazy-load from the LCP image can be deployed in hours. Loading and rendering fixes (CDN configuration, critical CSS inlining, third-party script deferral) require more coordination but deliver lasting improvements.
Run the audit on your three highest-traffic page templates — homepage, category, and product detail — separately. LCP elements differ across templates, and a fix on the homepage does not automatically carry over to product pages. Retest in PageSpeed Insights after each change; the tool's 'Diagnostics' section confirms whether the specific failure was resolved before you move to the next item.