A decade of Canvas at your command — powered by our custom AI engineStart Building →
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 image, video, or block-level text element visible within the browser viewport. It is reported in milliseconds from the moment the page begins loading (navigationStart) to when the largest qualifying element is fully painted on screen. Google considers an LCP under 2.5 seconds 'good,' 2.5–4.0 seconds 'needs improvement,' and above 4.0 seconds 'poor.'

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 image, video, or block-level text element visible within the browser viewport. It is reported in milliseconds from the moment the page begins loading (navigationStart) to when the largest qualifying element is fully painted on screen. Google considers an LCP under 2.5 seconds 'good,' 2.5–4.0 seconds 'needs improvement,' and above 4.0 seconds 'poor.'

How Largest Contentful Paint (LCP) Works

The browser's rendering engine continuously evaluates visible elements as the page loads, using the PerformanceObserver API with the 'largest-contentful-paint' entry type to track candidates. Qualifying element types include <img>, <image> inside SVGs, <video> poster images, elements with a CSS background-image loaded via url(), and block-level text nodes (paragraphs, headings, lists). The metric updates each time a larger element becomes visible, and the final LCP value is locked in when the user first interacts with the page (scroll, click, keypress) or when the page enters the background — whichever comes first. LCP is heavily influenced by four sub-metrics: Time to First Byte (TTFB), resource load delay, resource load time, and element render delay. TTFB sets the floor — if your server takes 800ms to respond, LCP cannot be faster than 800ms. Resource load delay captures the gap between TTFB and when the browser actually starts fetching the LCP resource, which is typically caused by the resource being discovered late in parsing or blocked behind render-blocking scripts and stylesheets. The browser assigns a 'size' to each candidate element based on its visible area within the viewport — not its intrinsic dimensions. An image that is 2000×1000px but only 400×200px on screen is scored on the 400×200 area. Text elements are sized by their rendered bounding box. Elements with opacity: 0 or visibility: hidden are excluded, but elements just outside the initial viewport that scroll into view before interaction are included if they're larger than previous candidates. Chrome DevTools, Lighthouse, and the Chrome User Experience Report (CrUX) all surface LCP data. Field data from CrUX represents real user measurements and directly feeds Google's Search Console Core Web Vitals report and page experience ranking signals. Lab tools like Lighthouse simulate a throttled mid-tier mobile device on a 4G connection, producing scores that may differ from field data but are useful for debugging specific bottlenecks.

Best Practices for Largest Contentful Paint (LCP)

Preload your LCP image using <link rel='preload' as='image' href='hero.webp'> in the <head> so the browser discovers it immediately during HTML parsing rather than waiting for CSS or JavaScript to reference it — this alone often cuts 500–1500ms from LCP. Serve images in next-gen formats (WebP or AVIF) sized to actual display dimensions, and use the srcset and sizes attributes to prevent mobile devices from downloading desktop-resolution assets. Eliminate render-blocking resources by deferring non-critical JavaScript with async or defer attributes and inlining only the critical CSS needed for above-the-fold content, moving the rest to an third-party stylesheet that loads asynchronously. Ensure your server delivers fast TTFB by using a CDN for static assets, enabling HTTP/2 or HTTP/3, and using server-side caching — a TTFB above 600ms virtually guarantees a poor LCP on slow connections. Never lazy-load the LCP image; the loading='lazy' attribute on your hero image is one of the single most damaging LCP mistakes, as it instructs the browser to delay the fetch until the element is near the viewport.

Largest Contentful Paint (LCP) & Canvas Builder

Canvas Builder's AI-generated HTML output uses Bootstrap 5's utility-first approach and semantic markup structure, which naturally avoids several LCP anti-patterns — there are no layout-forcing JavaScript dependencies above the fold, image elements are placed in proper semantic containers with defined dimensions, and the clean HTML structure minimizes parser-blocking overhead that delays LCP candidate discovery. Because Canvas Builder produces production-ready static HTML rather than JavaScript-rendered content, the LCP element is present in the initial HTML document and visible to the browser immediately during parsing — eliminating the significant LCP penalty common in client-side-rendered React or Vue applications where the DOM is empty until JS executes. Developers using Canvas Builder output can achieve strong LCP baselines by simply adding preload hints for hero images and serving assets through a CDN, without needing to refactor any of the generated structural HTML.

Try Canvas Builder →

Frequently Asked Questions

What elements qualify as LCP candidates and which are excluded?
Qualifying candidates are <img> elements, <video> poster images, elements rendered with a CSS background-image (loaded via url()), SVG <image> elements, and block-level text elements like <p>, <h1>–<h6>, and <li>. Excluded are elements with zero opacity, SVG text, <canvas>, and inline SVG shapes without a background image. Critically, only elements within the initial viewport at paint time — or elements that enter the viewport before first user interaction — are considered.
Why does my Lighthouse LCP score differ from what Google Search Console reports?
Lighthouse produces lab data using a simulated environment (typically a throttled Moto G4 equivalent on slow 4G), while Search Console reports field data collected from real Chrome users via the CrUX dataset, aggregated over a 28-day rolling window. Real users have varying device capabilities, connection speeds, and caching states — a returning visitor with a primed cache will see a much faster LCP than a first-time visitor. Google uses the 75th percentile of field data for its page experience assessment, meaning 25% of your real users can have worse LCP than the reported value.
How does Canvas Builder help achieve good LCP scores in its generated websites?
Canvas Builder generates clean, semantic HTML5 with Bootstrap 5, which avoids common LCP pitfalls like render-blocking inline scripts, excessive CSS specificity chains, and improperly structured hero sections. The output uses standard <img> tags with explicit width and height attributes that prevent layout shifts during load, and the Bootstrap 5 grid system uses CSS Flexbox and Grid rather than JavaScript-dependent layout calculations, meaning the LCP element can be painted without waiting for script execution. Developers can further optimize by adding a <link rel='preload'> tag for the hero image in the <head> of Canvas Builder's generated HTML, which requires no structural changes to the template.