Core Web Vitals: What is Largest Contentful Paint?

Google has created a set of metrics called Core Web Vitals to make user experience better.

Core Web Vitals measure three key aspects of user experience:

  • First Input Delay (interactivity)
  • Cumulative Layout Shift (visual stability)
  • Largest Contentful Paint (loading)

In this post, we’ll be talking about Largest Contentful Paint in more detail.

What is Largest Contentful Paint?

So, you click on a website and wait for it to load.

How long you wait before seeing the largest element become visible on the viewport is what’s measured in Largest Contentful Paint (LCP).

What element or content is considered in LCP?

It could be videos, video thumbnails, images, block elements with text, images in Scalable Vector Graphics (SVG) or background elements that are above the page’s fold.

The “largest” content of the page above the fold is often the hero image—an oversized banner image—and is what users first notice when the page is loading.

You can use Chrome developer tools to know what Google considers the largest content of your page.

What is a good LCP score?

Google says the LCP should happen within 2.5 seconds or less. Anything that’s over 4 seconds is considered poor!

If you want to keep your score at 2.5 and ideally improve it, you have to regularly monitor your LCP. You need to monitor any errors in PageSpeed Insights and optimise your website to achieve the desired score.

What are the factors that affect LCP?

Watch out for these things as they could potentially harm your LCP score:

  • Too many plugins and design heavy themes can delay the rendering of the page
  • Poor / slow server response times
  • Unoptimised videos, images and text blocks that are above the fold can also negatively affect your LCP
  • Rendering will pause if the parser encounters synchronous Javascript tags and external stylesheets

Optimise LCP to improve your score (and ranking)

You can improve your LCP in several ways:

  • Minify CSS and reduce the amount of blocking CSS.
  • Choose the best web hosting. You can consider opting for a dedicated server, caching assets and using Content Delivery Network (CDN).
  • Optimise all images (featured images, carousel, hero banners etc), especially those ‘above the fold’, by compressing them before uploading to the site.
  • Adjust the design of the page so that there are no large elements ‘above the fold’. Keep the top of the page clean and simple and lazy-load the larger elements further down the page.
  • Delay loading Javascript tags and external stylesheets by placing them below the fold.

There are many factors that come into play when it comes to your LCP score. What we can do is review your site to see how it is performing and which areas need to be optimised to get the best LCP score.