Demystifying Google’s Core Web Vitals – Largest Contentful Paint (LCP)

As we draw closer to May, and the launch date of Google’s Page Experience algorithm update we’re thrilled to introduce our latest series ‘SEO: Demystifying Google’s Core Web Vitals’. In this three part series we’ll be dissecting each of the core web vital metrics in an easy and practical manner to unpack the technical jargon, and prepare you for what lies ahead. This week we’ll be discussing Largest Contentful Paint (LCP) – the measurement of loading performance.

Joe Comotto

Despite Google shrouding the exact launch date in mystery, the new Page Experience algorithm update should eventually roll into action across the search engine in May. First introduced in spring last year, Google’s update is forcing brands to take Page Experience seriously and ensure they offer users a good mobile experience. Ultimately, Google wants a faster and better web, and will be introducing Core Web Vitals into the search algorithm to achieve this – much in the same way that they rolled out the mobile-friendly update last year. 

What is Largest Contentful Paint (LCP)?

LCP is the one of three Core Web Vitals metrics that Google introduced last year, alongside First Input Delay (FID) and Cumulative Layout Shift (CLS). Core Web Vitals signals are aimed at helping brands measure the “experience” of interacting with a website, helping to improve areas that may be frustrating the user – specifically, the loading of the site (speed), interactivity (can the site be used) and the visual stability (do things jump around and move). 

LCP is the speed element of the three metrics and Google defines it as ‘the render time of the largest image or text block visible within the viewport (screen)’.

What this means simply, is how quick does the page load the content. LCP is the measure of how long it takes for the main content of the page to be fully downloaded, and ready to be used. It’s important to note that this doesn’t mean the site is fully loaded, LCP measurement finishes when the largest content element becomes visible to the user.

There are a number of elements that can qualify as the LCP; such as images, video or a block of text. LCP only includes viewable elements, and anything below the fold or outside of the viewable area doesn’t impact the LCP score.

Why is LCP Important for SEO?

Google’s decision to include Core Web Vitals as part of its algorithm from May means that, if your site suffers from a poor LCP score, you’ll likely see a negative impact on your Google search ranking performance as a result. Especially if your competitors are improving their scores prior to the update.

There are a number of other metrics that exist that can be used to measure page speed, and in the past Google has recommended these – First Meaningful Paint (FMP) and Speed Index (SI). These can however be fairly complex and difficult to measure, whereas LCP is a user centric measurement specifically designed by Google. Additionally, the older metrics used to measure page speeds aren’t good indicators of a user centric experience – not necessarily corresponding to what the user was seeing on screen – whereas a fast LCP will reassure the user that the page is useful.

With LCP, Google is going for a simpler approach and, based on their research in conjunction with W3C Performance Working Group, they’ve determined that a more accurate method of measuring when the main content of a page is loaded is to identify when the largest element was rendered.

How do you measure LCP

Largest Contentful Paint has a simple scoring criteria of Good, Needs Improvement, and Poor. Anything under 2.5 seconds is good, while anything over 4 seconds is poor.

There are two ways in which LCP can be measured:

  1. In the lab using tools to simulate a page load in a consistent way
  2. In the field using real users loading and interacting with the page 

 

There are a number of different tools that you can use to measure LCP both in the Lab and in the Field and Google recommends using a combination of both data types when optimising LCP.

The Field tools you can use are:

  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • Chrome User Experience Report (Requires a Google account and a Google Cloud Project)
  • web-vitals JavaScript library

The Lab tools you can use are:

  • Chrome DevTools
  • Lighthouse
  • WebPageTest

How to Improve your LCP

Improving the LCP of your site can be a complex task as the LCP element will likely differ between pages and by device. However there are some common causes of a poor LCP:

  1. Slow server
  2. Resource load times
  3. Client-side rendering
  4. Render-blocking JavaScript and CSS

 

Google recommends before anything else improving a slow server response time. This one factor will impact every single page-load metric, as a faster server means the browser will receive the content more quickly from the server.

For more information on what the algorithm update will look like, have a read of our previous article Google’s New Search Criteria to familiarize yourself with Page Experience Signals, and what the update will mean for the marketing industry. 

Read Next

Find out how we can help you

With offices around the world, we can build a team perfect for your needs.

Keep up to date with our monthly insight digest