Skip to content
PageSoarPageSoar

Largest Contentful Paint: what it measures and the usual fixes

LCP is the moment the biggest thing on screen appears. On most pages it is the hero image or the headline.

Author: HD4 min read

Table of contents
  1. Key takeaways
  2. What it measures
  3. Find the element
  4. The usual fixes
  5. Check it held
  6. See it on your own site
  7. Sources

What it measures#

web.dev defines LCP as the render time of the largest image, text block or video visible in the viewport, relative to when the page first started loading.

Find the element#

Chrome's performance panel names the LCP element. On a landing page it is usually the hero image.

The usual fixes#

  1. Do not lazy-load the hero image.
  2. Serve it at the size it is shown, in a modern format.
  3. Cut render-blocking scripts and styles in the head.

Check it held#

Field data lags, so compare the page before and after over equal weeks.

See it on your own site#

The free website check reads a site you name and reports what holds its pages back, with no account and no card. It changes nothing on your site.

Run the free website check

Sources#