Glossary

What Is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a Core Web Vital metric defined by the W3C Largest Contentful Paint specification that measures the render time of the largest visible image, video, or block-level text element within the browser's viewport. It captures the point at which the page's primary content appears to have loaded from the user's perspective, making it the most direct programmatic proxy for perceived load speed. Google uses LCP as a ranking signal in its Page Experience algorithm, with a score under 2.5 seconds considered 'Good' and anything above 4 seconds rated 'Poor'.

What Is Largest Contentful Paint (LCP)?

How Largest Contentful Paint (LCP) Works

The browser continuously reports the largest contentful element as the page loads, updating its candidate element each time a larger qualifying element renders above the fold. The LCP candidate set includes <img> elements, <image> elements inside SVGs, images loaded via CSS background-image using url() (not gradients), <video> elements using a poster attribute, and block-level text nodes such as <p>, <h1>–<h6>, or <div> containing text. The final LCP value is locked in when the user first interacts with the page (scroll, tap, keypress) or when the page's lifecycle moves to a hidden state, because user interaction signals that the user has accepted the current render state. LCP timing is broken down into four sub-parts: Time to First Byte (TTFB), resource load delay (gap between TTFB and when the LCP resource starts loading), resource load duration (how long the LCP asset takes to download), and render delay (time between resource download completion and actual paint). Google's tooling in Chrome DevTools, Lighthouse, and the CrUX dataset all report these sub-parts separately, letting you pinpoint exactly which phase is causing a slow LCP. For example, a high render delay often points to render-blocking JavaScript or CSS, while a high resource load duration points to unoptimized image files. The metric is collected via the PerformanceObserver API using the 'largest-contentful-paint' entry type, which is available in all Chromium-based browsers. Safari and Firefox support LCP in their Chromium-based test equivalents but do not yet expose it natively through PerformanceObserver in production builds. Field data collected by the Chrome User Experience Report (CrUX) reflects real user LCP values across 28-day rolling windows, which is what Google's Search Console and PageSpeed Insights use for ranking purposes — not the synthetic lab scores from Lighthouse alone. Element size for LCP purposes is calculated as the visible area within the viewport, not the element's intrinsic dimensions. An image that is 1000×800px but partially clipped by the viewport will only count its visible pixels. Opacity: 0 elements are excluded. Elements with zero size, off-screen elements, or those hidden via visibility: hidden are also excluded from candidacy, which means full-bleed hero sections with lazy-loaded images are a common LCP pitfall — the image must be loaded eagerly to be a valid LCP candidate.

Best Practices for Largest Contentful Paint (LCP)

Preload your LCP image using <link rel='preload' as='image' href='hero.webp' fetchpriority='high'> in the <head> to eliminate resource load delay — this is the single highest-impact LCP optimization for image-heavy pages. Mark your LCP <img> with fetchpriority='high' and explicitly set width and height attributes to prevent layout shifts that can delay paint. Serve images in modern formats like WebP or AVIF, which reduce file sizes by 25–50% compared to JPEG at equivalent quality, directly cutting resource load duration. Eliminate render-blocking resources by inlining critical CSS (the styles needed to paint above-the-fold content) and deferring all non-critical stylesheets and scripts; Chrome's coverage tool in DevTools identifies unused CSS per page. For LCP elements that are text blocks rather than images, ensure the web font is preloaded or use font-display: swap with a matching system font fallback so text renders immediately rather than waiting on a font file download. Finally, deploy your origin behind a CDN to reduce TTFB — since LCP is a sequential chain starting from TTFB, a server response above 600ms alone can push LCP past the 2.5-second threshold regardless of other optimizations.

Largest Contentful Paint (LCP) & Canvas Builder

Canvas Builder outputs production-ready Bootstrap 5 HTML with semantic markup, meaning LCP candidate elements like hero images are rendered as proper <img> tags with defined dimensions rather than CSS background hacks or dynamically injected DOM nodes — both of which delay or disqualify elements from LCP candidacy. The clean, minimal HTML structure avoids common LCP killers like excessive render-blocking <script> tags or deeply nested layout wrappers that increase style recalculation time before paint. Because Canvas Builder's output is static, human-readable HTML, developers can directly inspect and annotate the LCP element with fetchpriority='high' and a matching preload hint in the <head> without modifying build pipelines or framework configuration files.

Try Canvas Builder →

Frequently Asked Questions

What elements qualify as LCP candidates, and which are commonly misunderstood?

Qualifying elements include <img> tags, <video> poster images, background images loaded via CSS url() (not gradients), and block-level text nodes. A common misconception is that CSS gradient backgrounds count — they do not, because they have no third-party resource load and the spec explicitly excludes them. Another frequent surprise is that <svg> images only count if they contain an inner <image> element, not if the SVG itself is used as a background.

Why does my Lighthouse LCP score differ from my Search Console Core Web Vitals report?

Lighthouse runs in a controlled lab environment (throttled CPU and network, no cookies, no cache) and produces a synthetic LCP score, while Search Console reports field data from real Chrome users collected via CrUX over a 28-day rolling window. Real users may have faster connections, warmer caches, or different viewport sizes — all of which affect LCP. Google uses the field data for ranking, so Search Console's 'Core Web Vitals' report is the authoritative source, and Lighthouse is a diagnostic tool to identify what to fix rather than a ranking benchmark.

How does Canvas Builder's HTML output help achieve a good LCP score?

Canvas Builder generates clean, semantic HTML based on the Bootstrap 5 framework, which means hero sections and above-the-fold images are output as native <img> elements with explicit width and height attributes already set — preventing the layout recalculations that delay LCP paint. The generated code does not include render-blocking third-party scripts or inline event handlers, keeping the critical rendering path short. Developers can further improve LCP by adding fetchpriority='high' and a <link rel='preload'> to the hero image in Canvas Builder's output, since the clean, well-structured HTML makes it straightforward to identify and modify the LCP candidate element without untangling framework abstractions.