What Is LCP and Why Is Your Site Slow?
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on your page to finish rendering. Google considers anything under 2.5 seconds good, between 2.5–4 seconds needs improvement, and over 4 seconds poor.
LCP is one of three Core Web Vitals that Google uses as a ranking signal. A slow LCP means users stare at a blank or partially loaded page, which increases bounce rates and hurts conversions.
What counts as the "largest" element?
The browser identifies the largest image, video, or block of text visible in the viewport without scrolling. Common LCP elements include:
- Hero images and banner images
- Large heading text blocks
- Video poster images
- Background images applied via CSS
Common causes of slow LCP
1. Unoptimised images
The most common cause. A 2MB hero image served as PNG instead of WebP will take seconds to download on mobile connections. Fix: convert to WebP, resize to the actual display size, and add width and height attributes to prevent layout shifts.
2. Render-blocking JavaScript and CSS
Scripts and stylesheets in the <head> block rendering until they download and execute. Fix: defer non-critical JavaScript with defer or async, inline critical CSS, and load the rest asynchronously.
3. Slow server response time (TTFB)
If your server takes over 600ms to respond, LCP will suffer regardless of optimisation. Fix: use a CDN, enable server-side caching, upgrade your hosting, or switch to a static site generator for content-heavy pages.
4. Client-side rendering
Single-page apps that render content with JavaScript after the page loads will have poor LCP because the browser needs to download, parse, and execute JS before showing content. Fix: use server-side rendering (SSR) or static generation (SSG).
5. Lazy loading above-the-fold images
Lazy loading is great for below-the-fold images, but applying it to your hero image delays LCP. Fix: never lazy-load the LCP element. Use fetchpriority="high" instead.
How to measure LCP
You can measure LCP with Google PageSpeed Insights, Chrome DevTools (Lighthouse tab), or the Web Vitals Chrome extension. For real-user data, check Google Search Console's Core Web Vitals report.
Check your LCP score instantly
AuditZap measures your LCP, CLS, and INP using Google's PageSpeed API — plus 20 more checks.
Check your Core Web Vitals