✦ A decade of Canvas craft, now driven by AI — describe it, watch it build live.Start building
Glossary

What Is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the render time of the largest visible content element — typically a hero image, background image, or block-level text — within the browser's viewport. It is defined by the W3C Largest Contentful Paint API and captures the point at which the page's primary content is perceived as loaded by the user. Google considers an LCP under 2.5 seconds 'Good', between 2.5–4 seconds 'Needs Improvement', and above 4 seconds 'Poor'.

What Is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the render time of the largest visible content element — typically a hero image, background image, or block-level text — within the browser's viewport. It is defined by the W3C Largest Contentful Paint API and captures the point at which the page's primary content is perceived as loaded by the user. Google considers an LCP under 2.5 seconds 'Good', between 2.5–4 seconds 'Needs Improvement', and above 4 seconds 'Poor'.

How Largest Contentful Paint (LCP) Works

The browser continuously tracks candidate elements as the page renders, reporting the largest visible element in the viewport by rendered area. Eligible element types include <img>, <image> inside SVGs, <video> poster frames, elements with CSS background-image loaded via url(), and block-level elements containing text nodes. The LCP candidate updates each time a larger element becomes visible, and the final LCP value is recorded when the user first interacts with the page (scroll, click, keypress) or when the page's lifecycle reaches the 'hidden' state — whichever comes first. Internally, the browser calculates the 'size' of each candidate as the visible portion of the element within the viewport, not its intrinsic dimensions. An image that is partially off-screen only counts for the area that is visible. This means that oversized hero images that bleed beyond the fold are not penalized for their full dimensions, but images with significant layout shift before rendering can cause the LCP candidate to change mid-load, effectively resetting the clock. LCP is reported via the PerformanceObserver API using the 'largest-contentful-paint' entry type, allowing developers to observe it programmatically in JavaScript. Tools like Chrome DevTools Performance panel, Lighthouse, WebPageTest, and CrUX (Chrome User Experience Report) all surface this metric. The distinction between lab data (Lighthouse) and field data (CrUX) is critical: Lighthouse runs in a controlled environment and can miss real-world variables like CDN latency, cache state, or slow mobile connections. The most common LCP bottlenecks are render-blocking resources that delay the browser's ability to paint anything, server response time (TTFB), slow image delivery, and client-side rendering frameworks that defer content behind JavaScript execution. For images specifically, the browser cannot begin downloading an image until it discovers the URL — either in the HTML parser or via CSS — so any mechanism that delays discovery (lazy loading, JS injection, CSS background on a class toggled by JS) directly delays LCP.

Best Practices for Largest Contentful Paint (LCP)

Preload the LCP image using <link rel='preload' as='image' href='hero.webp'> in the <head> so the browser fetches it at the highest priority before the parser reaches the <img> tag. Never apply native lazy loading (loading='lazy') to above-the-fold images — this is one of the most common LCP regressions and delays the fetch until the element enters the viewport. Serve images in next-gen formats (WebP or AVIF) and use responsive srcset with correctly sized variants so mobile users aren't downloading a 1400px image for a 390px screen. Minimize Time to First Byte (TTFB) by using a CDN with edge caching, since LCP cannot start until the server delivers the initial HTML; a TTFB above 800ms almost guarantees a poor LCP on most networks. For text-based LCP elements, ensure the web font is preloaded and the font-display descriptor is set to 'swap' or 'optional' to avoid invisible text blocking the LCP paint. Finally, inline critical CSS that controls above-the-fold layout directly in the <head> to eliminate render-blocking stylesheet requests.

Largest Contentful Paint (LCP) & Canvas Builder

Canvas Builder generates production-ready Bootstrap 5 HTML where above-the-fold content is structured with semantic elements like <section>, <h1>, and standard <img> tags — giving browsers a clear, early signal to identify and prioritize the LCP candidate without waiting for JavaScript execution. Because the output is static HTML rather than a client-rendered JavaScript bundle, there is no hydration delay or JS parsing overhead blocking the initial paint, which is one of the most common causes of poor LCP in modern web apps. Developers exporting sites from Canvas Builder can easily instrument the HTML with fetchpriority='high' on hero images and <link rel='preload'> tags in the <head>, since the clean, readable output requires no reverse-engineering of framework internals to locate and modify the critical rendering path.

Try Canvas Builder →

Frequently Asked Questions

Does lazy loading images hurt LCP?
Yes — applying loading='lazy' to images that are visible in the initial viewport is one of the most impactful LCP mistakes. The browser intentionally defers fetching lazy-loaded images until they approach the viewport via scroll, which means the LCP candidate image may not begin downloading until after the page has already 'loaded', dramatically increasing LCP time. Reserve lazy loading strictly for images that are below the fold, typically anything more than one viewport height below the initial scroll position.
Why is my LCP different between Lighthouse and field data in Google Search Console?
Lighthouse runs in a simulated lab environment with a fixed network throttle (typically Fast 3G or similar) and a headless Chrome instance with no cache, no browser extensions, and no real geographic latency to your server. Field data from Google Search Console (sourced from CrUX) aggregates real Chrome user sessions across diverse devices, network conditions, geolocations, and cache states over a 28-day rolling window. Your lab LCP can be fast while field LCP is poor if, for example, real users are geographically far from your origin server, or your HTML response is not cached at the edge.
How does Canvas Builder help optimize LCP in the sites it generates?
Canvas Builder outputs clean, semantically structured HTML with Bootstrap 5, which means hero sections use standard <img> tags inside well-defined layout containers rather than JavaScript-injected images or CSS background hacks that the browser discovers late in the rendering pipeline. The generated markup is parser-friendly, allowing browsers to discover and prioritize the LCP image candidate early during HTML parsing. Developers can further add fetchpriority='high' and a preload hint to the exported HTML's <head> with minimal effort, since the output is straightforward, unobfuscated HTML without framework-specific abstraction layers that often obscure image loading behavior.