Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a member of the new Core Web Vitals released by Google this May. The goal of the metrics is to measure the load time of the main content.

More basically:

Does the biggest thing on the screen load quickly?

Example

Here's a bunch of very large images curtesy of NASA and SpaceX:

Because these images are so large, they slow down the rendering of the page.

How is LCP calculated?

There's no complex formula for Largest Contentful Paint.

It is simply the render time for the largest block of text or image visible within the viewport.

This result should be within the ranges below:

LCP range from Good to Poor. Good is less than 2.5 seconds. Needs Improvement is less than 4 seconds. Anything over is Poor.

Which elements impact LCP?

The largest text or image within the viewport is what is measured.

This means a few things:

  • LCP closely resembles the perceived load time for most users.
  • As your design changes, the tracked element can change. This means mobile vs. desktop may track different elements.
  • Prioritize load times for elements in the initial viewport as they will have the biggest impact.

How can I debug LCP issues?

Finding your LCP element

If you can't spot your LCP target element by eye, the Chrome profiler built into the developer tools can help.

By checking the box for Enable advanced paint instrumentation, the profiler will mark elements that cause CLS issues as well as the target for your Largest Contentful Paint.

gif showing the usage of the chrome profiler to spot CLS shift issues and LCP

Quick fixes for LCP

  • Focus on improving Time to First Byte (TTFB). The faster your server responds, the faster the main content can render.
  • Lazy load all images not in the initial viewport.
  • Serve correctly sized images for the viewport size.
  • Anything that improves First Contentful Paint (FCP) should improve LCP.

How can I track my LCP score?

There are currently four ways to track your Web Vitals:

  • Page audits (Lighthouse and PageSpeed Insights)
  • A Chrome extension
  • Google Search Console
  • Manual tracking

Read our guide on tracking your site's vitals.

Your Web Vitals on this page

Cumulative Layout Shift (CLS)
0
UnderUnder .1
Largest Contentful Paint (LCP)
0sec
UnderUnder 2.5 sec
First Input Delay (FID)
0ms
UnderUnder 100 ms
Time to First Byte (TTFB)
0sec
UnderUnder 600 ms

This site is not tracking your personal information.

Learn more at Fathom Analytics.

© 2020 Drew Bredvick. All rights reserved.