Largest contentful paint

INTRODUCTION

In the spring of 2021, Google will roll out a major algorithm change called the “Page Experience” update. This update introduces a new set of ranking factors called “Core Web Vitals” – largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS)– that measure performance and user loading experience on any given website. In this article, we provide an introduction to the first metric: largest contentful paint.

largest contentful paint hero

WHAT IS LARGEST CONTENTFUL PAINT?

Largest contentful paint (LCP) is a key page load metric in Google’s new set of Core Web Vitals (CWVs) that measures how long it takes for the primary piece of content above the fold to be visible to a visitor. It could be a text block, image, video, or some other content element — whatever is largest. Anything that extends beyond the initial viewport is not taken into consideration. 

Ever since page speed became a ranking factor over a decade ago, it has been difficult to measure the speed the main content element loads, becomes visible, and is ready to be interacted with by users. 

Older page speed metrics, like first contentful paint and time to interactive, either don’t fully reflect the user experience of what is seen on screen or aren’t reliable on a large scale. Furthermore, Google’s own research indicated that the most essential element on-page is the largest element in the viewport and performance should be factored based on how quickly users are able to interact with this piece of content. Hence, the creation of the largest contentful paint metric.

WHY SHOULD MARKETERS CARE ABOUT LARGEST CONTENTFUL PAINT?

There are at least a couple of reasons why marketers should care about largest contentful paint. 

The first reason is that it will be used as a key measurement of site performance and introduced as a ranking factor in the spring of 2021 — and it constitutes 25% of the weighted average in Google Lighthouse scoring.

The second reason is the impact on crawl budget. Slow loading content ultimately limits the number of pages a search engine is able to crawl in any given session on your site, which means less pages indexed and less opportunities to rank content in search results.

The third reason is the impact on user experience. Visitors don’t want to wait several seconds for important content to load. In fact, they are more likely to abandon a page altogether if it takes more than 3 seconds to start interacting with the page. And of course, higher bounce rates have the downstream negative effect of lower conversion rates and less revenue coming in the door for your business.

WHAT FACTORS AFFECT LARGEST CONTENTFUL PAINT?

There are four primary factors that impact largest contentful paint: slow response times, render-blocking JS and CSS, resource load times, and client-side rendering.

  1. Slow server response times: The longer it takes a browser to receive content from the server, the longer it takes to render anything on-screen including the main piece of content above the fold, which slows LCP.
  2. Render-blocking JS and CSS: Non-critical scripts and style sheets delay LCP. If they aren’t deferred, it will take longer to load the main content of your pages.
  3. Resource load times: In addition to blocking time from JS and CSS, other types of resources like images, videos, and certain background content can slow down LCP.
  4. Client side rendering: With this rendering option, users may not interact with any content on the page until all the JS has finished downloading and executing, which negatively impacts LCP.

HOW DO YOU MEASURE LARGEST CONTENTFUL PAINT?

Largest contentful paint tracks the largest content element in the initial viewport. As more content is loaded, the metric compares how long it takes for rest of the elements of the page to load to that largest content element initially rendered. If the new element is larger than the reference element, the largest contentful paint is updated. The update cycle ends as soon as the user interacts with the website, like with a click, scroll, or entry into a type box. 

Elements considered for the largest contentful paint include:

In terms of scores for largest contentful paint on a website:

To study largest contentful paint scores on your website, the following field and lab tools can be used:

Field tools:

Lab tools:

As a reminder, field tools show actual measurements of a website whereas lab tools are simulated crawls using algorithms that approximate internet conditions on desktop and mobile devices.

HOW DO YOU IMPROVE LARGEST CONTENTFUL PAINT?

As recommended by Google, apply instant loading best practices with the PRPL pattern. This includes:

  1. Push the most important resources to load as soon as possible with a declarative fetch request to the browser.
  2. Render the initial route as soon as possible, for example, by server-side rendering the initial HTML of the page and inlining critical JS and CSS and deferring the rest with async to eliminate additional server round trips for more render-blocking resources.
  3. Pre-cache assets and have workers fetch assets directly from the cache rather than from the server on repeat visits.
  4. Send smaller JS payloads that contain only the code needed when a user initially downloads the web page and lazy loading the remaining assets as needed.

Audit your webpages in Google Lighthouse to identify opportunities for improvements with each of these steps.

CONCLUSION

Largest contentful paint measures how fast the main piece of content above the fold on a web page is ready for interaction with a site visitor. 

Webmasters should care about this new performance metric because it is set to be a ranking factor in the spring of 2021, it provides another measurement of user experience, and it’s another indication of how well your site is indexed by search engines. 

Server response times, resources load times, rendering options, and render-blocking JS and CSS have the greatest impact on this metric. Follow instant loading best practices with the PRPL pattern to make improvements that will improve this score on all your web pages.

As this is Google’s own metric, there are a number of reports and tools that allow you to monitor and improve your LCP scores including the Core Web Vitals Report in Search Console, Google Lighthouse, Chrome Dev Tools, and the Chrome User Experience Report.

Frequently Asked Questions

What is Largest Contentful Paint?

Largest Contentful Paint is one of the new Core Web Vitals metrics that will be used in the new  Google “Page Experience” update rolling out in the summer of 2021. It measures the loading speed of a web page by counting how quickly the largest, most important element above the fold appears on the page ready for interaction with the user.

How important is Largest Contentful Paint for SEO?

Largest Contentful Paint accounts for 25% of your Google Performance Score (which doubles as your “Page Speed” score on mobile and desktop in Google’s PageSpeed Insights tool as well). More importantly, it is also one of the new Core Web Vitals that will play ranking factors in the new page experience update. In order to pass the Core Web Vitals assessment, you need to pass all three metrics, so this metric must be accounted for in your optimization strategy.

How do you measure Largest Contentful Paint?

Largest contentful paint tracks the largest content element in the initial viewport. As more content is loaded, the metric compares how long it takes for rest of the elements of the page to load to that largest content element initially rendered. If the new element is larger than the reference element, the largest contentful paint is updated. The update cycle ends as soon as the user interacts with the website, like with a click, scroll, or entry into a type box.

Wha causes Largest Contentful Paint issues?

How do you fix Largest Contentful Paint issues?