Core Web Vitals: Largest Contentful Paint (LCP)

Largest Contentful Paint, or LCP, is one of the three main Core Web Vitals that will be a part of the page experience ranking update Google is planning to release in May of 2021.

But what is it?

As mentioned in a previous post, we will be exploring these page experience ranking metrics individually and in more detail to help make sure your website is ready.

What is LCP?

The Largest Contentful Paint (LCP) is the render time of the largest image or text block visible within the viewport. In simpler terms, it is the time it takes for the largest item on a web page to show up on the visible part of the screen. This looks at a few elements to generate this metric: images, videos, and block-level text. Your websites should strive to have the largest element rendered within the first 2.5 seconds of the page starting to load.

Why is it important?

Often, the primary reason for users to come to your website is information. It stands to reason, then, that the most important information is displayed and given the most screen real estate. This indicates to search engines that it is the primary topic of the web page (and site in general) and will be scrutinized more thoroughly. Search engines are looking to provide the most relevant information to their users’ search queries, so your website content is key for both context and positioning.

How is LCP measured?

Web pages often load in sections—this means the largest element on the page might change. The browser will track the largest item render in the viewport until something larger is loaded.

For example, on a page with text and a banner image, the browser may initially render the text and track that as a largest-contentful-paint entry. Once the banner image loads, another largest-contentful-paint entry would be tracked, replacing the first.

It is important to note that if the current largest contentful element is removed from the viewport, it will still be tracked as the largest contentful element unless something larger is displayed in the viewport. This will be tracked until the user interacts with the page.

A website’s LCP score relies on two other measurements, Time to First Byte (TTFB) and First Contentful Paint (FCP), which we covered in our previous post.

To get the scoring metrics for all these factors, there are some tools that can be used.

Field tools

Lab tools

How to improve LCP

Quality hosting and server response time is very important. The faster you can get your users data, the better. Making sure you are using a quality reliable hosting provider for serving your DNS and website files is the first step. Also, consider where your customers are and where your servers are located. You should try to have hosting within the country or region your website targets. You can also look for hosting that employs a content delivery network (CDN) and caching tools to ensure the data is packaged up and ready for your users when they visit your site.

Prioritize your content and assets, loading the important text, styles, images, etc. first. This means both in the code of your website and the user interface. Remove any render-blocking JavaScript and CSS—optimizing your code and images and loading them in a prioritized order will help from a development perspective. Having the most important content front and center in the site’s front end design will lead to a better user experience and interface. The more work you can do upfront for your users, the better.

For a more indepth look into improving the LCP score, Google has released an Optimize LCP article on the web.dev site.

In the next post, we will be continuing on our Core Web Vital quest, looking at First Input Delay (FID).

Read the rest of our series to learn more about Google’s Core Web Vitals:

See how Hall can help increase your demand.