Skip to content
SEO Rank Fixer
Sign inStart free

What is Largest Contentful Paint (LCP)?

LCP measures when the largest image or text block in view finishes rendering. Good is 2.5 seconds or less. Common causes of slow LCP and fixes.

Updated

Largest Contentful Paint (LCP) measures how long it takes for the largest image, video poster or text block visible in the viewport to render, counted from when the user started loading the page. A good LCP is 2.5 seconds or less; over 4 seconds is poor. It is the loading metric of the Core Web Vitals.

What is the LCP element?

Usually the hero image, a large banner or the main heading paragraph. Chrome DevTools (Performance panel) and PageSpeed Insights show which element it is on your page, which tells you where to start.

What causes a slow LCP?

web.dev breaks LCP into four parts; the slow part points to the fix:

  1. Time to first byte: the server or CDN is slow to answer.
  2. Resource load delay: the browser discovers the image late, for example because it is set in CSS, injected by JavaScript or lazy-loaded.
  3. Resource load duration: the file is too big.
  4. Element render delay: render-blocking CSS or scripts hold the paint back.

How do you fix it?

  • Put the hero image in the HTML as an img, never lazy-load it, and give it high fetch priority.
  • Serve it at the displayed size in a modern format such as WebP or AVIF.
  • Cache pages at a CDN and speed up the server response.
  • Cut render-blocking CSS and JavaScript.
A prioritized hero image
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="Trail Runner 2 on a mountain path">

Example

A blog’s LCP is 4.8 seconds on mobile because the 2.4 MB header photo has loading="lazy". Removing lazy loading and serving a 180 KB WebP version brings it under 2.5 seconds. Related: INP, CLS.

Sources