Largest Contentful Paint (LCP).

How fast the main content loads — Google ranking factor, target <= 2.5s

What does this check test?

Largest Contentful Paint measures the render time of the largest image, video, or text block visible within the viewport, relative to when the page first started loading. The LCP element is typically a hero image, a large heading, or a background image that dominates the above-the-fold area. Google considers LCP 'good' at 2.5 seconds or less, 'needs improvement' between 2.5s and 4.0s, and 'poor' above 4.0s. This metric replaced older metrics like First Meaningful Paint because it more accurately reflects what users perceive as the page being 'loaded.'

Why does it matter?

LCP is one of the three Core Web Vitals that directly impacts Google search rankings since the June 2021 Page Experience update. A slow LCP causes users to perceive the page as broken or unresponsive, leading to higher bounce rates — research shows a 1-second delay in LCP can reduce conversions by up to 7%. Sites with LCP under 2.5s have measurably better engagement metrics across mobile and desktop. Improving LCP often has the single largest impact on user-perceived performance of any optimization you can make.

Who is affected?

All websites are affected by LCP, but it is especially critical for e-commerce product pages, news article pages, landing pages with hero images, and any content-heavy site that relies on organic search traffic. Mobile users on slower connections are disproportionately impacted by poor LCP scores.

Where does this apply?

The LCP element is found above the fold in the initial viewport. Common LCP elements include hero images, featured product photos, banner images, large heading text blocks, and video poster images. Use Chrome DevTools Performance panel or Lighthouse to identify exactly which element is your LCP element on each page.

How to fix it

<link rel="preload" as="image" href="/hero.webp" />
<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600" />

@font-face {
  font-family: 'Heading';
  src: url('/fonts/heading.woff2') format('woff2');
  font-display: swap;
}

References

• Largest Contentful Paint (LCP) — web.dev
• Optimize LCP — web.dev
• Core Web Vitals — Google Search Central