Largest Contentful Paint (LCP)
A Core Web Vitals metric measuring when the largest visible element finishes rendering.
The Definition
Largest Contentful Paint (LCP) measures the time from when a page starts loading to when the largest content element (typically a hero image, video, or large text block) is rendered within the viewport. Google considers LCP good when it occurs within 2.5 seconds, needs improvement between 2.5-4 seconds, and poor above 4 seconds.
Why It Matters
LCP is one of three Core Web Vitals and a direct Google ranking factor. It represents the user's perception of when the main content of a page is loaded. Slow LCP directly correlates with higher bounce rates and lower conversions.
Best Practices
Identify your LCP element using Chrome DevTools Performance tab — it is usually the hero image, video poster, or largest heading
Preload the LCP image with <link rel="preload" as="image"> so the browser starts downloading it immediately
Optimize server response time (TTFB) to under 200ms — this is the foundation of good LCP
Avoid lazy loading the LCP element — it should use loading="eager" or no loading attribute at all
Use responsive image sizes with srcset so mobile devices load appropriately sized images instead of desktop versions
Minimize render-blocking CSS by inlining critical styles and deferring non-critical stylesheets
Mistakes to Avoid
- 1
Lazy loading the hero image, which delays the LCP element from loading until JavaScript executes
- 2
Serving a single 2000px image to all devices instead of using responsive images for different viewports
- 3
Having excessive redirect chains before the HTML document loads, adding seconds to TTFB
- 4
Loading web fonts synchronously without font-display: swap, causing the LCP text element to be invisible until the font loads
Audit Checks
How Digispot AI identifies and fixes related issues
The biggest thing on the page — usually the hero image or main heading — takes more than 2.5 seconds to appear (its Largest Contentful Paint, or LCP).
Impact: Google uses LCP as a ranking signal, and visitors often leave before a slow page finishes loading.
Compress the largest above-the-fold image and serve it as WebP or AVIF. • Preload that hero image and your main web font so they load first. • Remove or defer render-blocking scripts and CSS.
It takes too long for the first piece of content to appear (slow First Contentful Paint).
Impact: A blank screen for too long makes visitors think the page is broken and leave.
Remove render-blocking CSS and JavaScript. • Reduce server response time. • Inline the critical CSS the first view needs.
The page is slow to respond when a visitor interacts with it — taps, clicks and key presses lag (Interaction to Next Paint, or INP, over 200ms).
Impact: INP is a Core Web Vital and Google ranking signal; a laggy interaction makes the page feel broken and drives visitors away.
Break up long JavaScript tasks so the main thread can respond sooner. • Defer or remove scripts that aren't needed for the first interaction. • Move heavy computation off the main thread (web workers).
Content jumps around as the page loads — buttons or text shift under the reader (a high Cumulative Layout Shift, or CLS, over 0.1).
Impact: Layout jumps frustrate visitors with mis-clicks and lower your Google ranking.
Set explicit width and height on every image and video. • Reserve space for ads, embeds, and banners before they load. • Avoid inserting content above what the reader is already viewing.
The HTML document alone is larger than 2MB — past Google's documented 2MB indexing limit. Images, CSS and JS are fetched separately and do NOT count toward this.
Impact: Google only indexes the first 2MB of HTML, so any content past that point in the document risks never being indexed.
Trim large inline scripts and JSON embedded in the HTML. • Paginate huge lists and move bulk data out of the initial HTML. • Enable server-side compression to shrink the document below 2MB.
Some CSS or JavaScript must finish loading before the page can show anything.
Impact: Render-blocking resources delay the first paint, making the page feel slow.
Defer or async-load non-critical JavaScript. • Inline the critical CSS the first view needs. • Move the rest of the CSS to load later.