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 when the page first starts loading, with Google's threshold for a 'good' score being under 2,500ms. LCP directly reflects perceived load speed — the moment users feel the page has 'arrived' — making it one of the most user-centric performance metrics in modern web development.

What Is Largest Contentful Paint (LCP)?

How Largest Contentful Paint (LCP) Works

The browser's rendering engine continuously tracks candidate elements as the page loads, identifying the largest element by rendered size (width × height in CSS pixels) that is visible within the viewport. Eligible element types include `<img>` tags, `<image>` elements inside SVGs, `<video>` poster images, elements with CSS `background-image` loaded via `url()`, and block-level text nodes such as headings and paragraphs. The LCP candidate is updated each time a larger element enters the viewport and finishes rendering, and the final LCP value is recorded at the moment the user first interacts with the page (scroll, click, or keypress) or when the page's lifecycle reaches a stable state — whichever comes first. Internally, the browser uses the PerformanceObserver API with the `largest-contentful-paint` entry type to expose these measurements to JavaScript. Each LCP entry includes `renderTime`, `loadTime`, `size`, `id`, `url`, and `element` properties. If the largest element is a cross-origin image served without a `Timing-Allow-Origin` response header, `renderTime` will be zero and the browser falls back to `loadTime`, which can artificially inflate your LCP score — a subtle but impactful detail often overlooked. LCP is heavily influenced by four sub-factors that Google has formally identified: Time to First Byte (TTFB, the server response delay), resource load delay (how long after TTFB the LCP resource is discovered), resource load time (how long the asset itself takes to download), and element render delay (time from resource load completion to pixel paint). Optimizing LCP requires diagnosing which of these four sub-parts is the bottleneck, as each has a distinct root cause and fix. Chrome's field data, collected via the Chrome User Experience Report (CrUX), aggregates real-user LCP measurements at the 75th percentile for a given URL. This is the value Google uses in Search ranking signals — not your lab measurement from Lighthouse, which runs in a controlled environment and may not reflect real-world network conditions, device capabilities, or cache states.

Best Practices for Largest Contentful Paint (LCP)

Preload your LCP image using `<link rel='preload' as='image' href='...' fetchpriority='high'>` in the `<head>` — this is the single highest-impact change for image-based LCP elements, as it eliminates the discovery delay caused by the browser waiting to parse CSS or JavaScript before fetching the resource. Mark your LCP `<img>` with `fetchpriority='high'` and never apply `loading='lazy'` to it, since lazy loading intentionally defers fetching until the element is near the viewport. For text-based LCP elements, eliminate render-blocking resources by inlining critical CSS for above-the-fold content and deferring all non-critical stylesheets and scripts; a single render-blocking stylesheet can add 300–800ms to LCP on mobile connections. Serve images in next-gen formats (WebP, AVIF) with correctly sized `srcset` attributes so mobile devices download a proportionally smaller file, and ensure your server sets `Cache-Control: public, max-age=31536000, immutable` on static assets so repeat visitors hit a local cache. Finally, add `Timing-Allow-Origin: *` to cross-origin image responses so the browser can report accurate `renderTime` rather than falling back to `loadTime`, giving you reliable data for ongoing monitoring.

Largest Contentful Paint (LCP) & Canvas Builder

Canvas Builder's AI-generated HTML outputs semantic, minimal markup built on Bootstrap 5 — meaning hero sections and primary content blocks use native `<img>` elements with proper `width`, `height`, and `alt` attributes rather than CSS background tricks that the LCP algorithm cannot measure accurately, giving developers a correct and measurable LCP candidate from the start. The clean code structure produced by Canvas Builder avoids common LCP killers like deeply nested wrapper divs, inline `style` bloat, and unnecessary JavaScript initialization on page load, all of which delay the browser's ability to paint the largest visible element. Developers using Canvas Builder can immediately apply `fetchpriority='high'` and `<link rel='preload'>` to the generated hero image markup without restructuring the HTML, making LCP optimization a targeted, low-friction task rather than a refactoring project.

Try Canvas Builder →

Frequently Asked Questions

What elements are eligible to be the LCP candidate, and are there any exclusions?

Eligible elements are `<img>`, `<video>` (using its poster attribute), SVG `<image>`, and block-level elements containing text or background images loaded via CSS `url()`. The browser explicitly excludes elements with opacity of 0, elements fully outside the viewport, and most elements smaller than a certain threshold relative to the viewport. Notably, `<svg>` text elements and CSS-painted content other than `background-image` are not counted, so a hero section built entirely with CSS gradients and SVG text will never register as an LCP candidate.

Why does my Lighthouse LCP score differ from my CrUX field data?

Lighthouse runs in a simulated environment using a throttled 4G connection and a mid-tier mobile CPU profile, producing a single lab measurement that represents one specific condition. CrUX field data is the 75th percentile of real user measurements aggregated over a 28-day rolling window, encompassing all device types, connection speeds, and geographic locations that visited the URL. It is normal for lab LCP to be 20–40% better than field LCP on sites with a diverse global audience — always prioritize improving your CrUX p75 value since that is what Google's ranking algorithm evaluates.

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

Canvas Builder generates clean, semantic Bootstrap 5 HTML where hero images and above-the-fold content are placed in proper `<img>` tags with explicit `width` and `height` attributes — preventing layout shifts and allowing the browser to allocate space before the image loads, which reduces render delay. The output avoids inlining large JavaScript bundles or render-blocking `<script>` tags in the `<head>`, keeping the critical rendering path short. Because Canvas Builder produces standards-compliant markup with Bootstrap 5's optimized CSS delivered via CDN, developers start with a performance baseline that makes reaching the sub-2,500ms LCP threshold significantly easier than with bloated page builder output.