Core Web Vitals: LCP – What It Is and How to Improve It for SEO

In May 2020, Google announced that “core web vitals” would be part of a ranking algorithm update set to hit in 2021 called page experience. Core web vitals measure core elements of a webpage that enhance user experience.

At the time of writing, core web vitals include:

  • Largest contentful paint
  • First input delay
  • Cumulative layout shift

In this article, No. 7 in our series preparing you for the Page Experience update, I’ll discuss LCP, or largest contentful paint:

What Is Largest Contentful Paint (LCP)?

LCP measures webpage load performance. More specifically, LCP measures how fast the largest image or text block renders on the webpage.

Google discusses LCP here:

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful. …

How Is Largest Contentful Paint (LCP) Measured?

Google states that in order to provide a good user experience, the largest image or text block should render on the webpage within the first 2.5 seconds.

LCP score target per Google.
Google’s LCP score

LCP documentation specifies which types of elements are considered for LCP, and include:

  • Images
  • Video
  • Background images loaded via CSS
  • Heading tags
  • Tables
  • Lists
  • Any other block element with text

Here’s an example of when the largest element of the page (a paragraph of text) renders before any other elements on the page:

Largest contentful paint example, per Google.
“Largest contentful paint,” Google Developers

The goal is to hit the recommended target loading speed on most of your pages. Google says “if at least 75 percent of page views to a site meet the ‘good’ threshold, the site is classified as having ‘good’ performance for that metric.” You can learn more about how Google defines its thresholds here.

How Does Largest Contentful Paint (LCP) Impact SEO?

We know that Google values a fast site and that things like page speed are already in its ranking algorithm. LCP is another way to ensure that webpages load fast so your website visitors have a good user experience and stay on your site.

So if you already have a fast site, are you in the clear? Not exactly. According to a study by Screaming Frog, the majority are not prepared for the LCP thresholds.

Data shows that less than half of the websites studied (across 20,000 URLs) were considered good. Specifically, 43% of mobile and 44% of desktop URLs had a good LCP. The average render time was 3.13 seconds for mobile and 3.04 seconds for desktop.

In that study, the research correlated LCP and search rankings. The data is interesting, but there are too many factors to be able to say for certain how LCP influences rankings today.

Data graph of LCP by ranking position.
“How Many Sites Pass the Core Web Vitals Assessment?,” Screamingfrog.co.uk

Even though the page experience ranking update does not hit until 2021, it’s clear that Google wants website publishers to get a head start. Google announced it would be testing a “fast page” label for websites in its search results that have historically met or exceeded the thresholds for core web vitals, including LCP.

Websites with this label may see an uptick in organic traffic and time on site.

How Do I Improve My Largest Contentful Paint (LCP) Score?

Google provides tools to measure LCP in a lab and in the field, including:

When it comes to lab versus field data, both can be useful. Lab is important for testing and working on improving your scores. You will get a greater variance in results, but lab data provides instant feedback.

Field data is more important when you’re trying to get the overall view of your site. The values represented will depend a lot on your users’ environments, for example, mobile versus desktop, their internet speed, their computer performance, etc. The field data is nice because it gives you an idea of how your site is performing for everyone, not just how it performs for you.

You can also measure LCP with the web-vitals JavaScript library, and you can learn more about that here. This is useful if you have your own reporting or you want to build it into other reports.

To get started, Google provides a general roadmap for how to use the tools provided to diagnose a core web vital. Out of the following list, the first three are good. I would wrap up after the third bullet by saying to publish your changes and start seeing the benefits of increased performance. The remaining bullets (4th to 6th) are “nice to haves.” The last bullet likely won’t apply to 90% of websites.

  • Use Search Console’s new Core Web Vitals report to identify groups of pages that require attention (based on the field data).
  • Once you’ve identified pages that need work, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page. PageSpeed Insights (PSI) is available via Search Console or you can enter a URL on PSI directly.
  • Ready to optimize your site locally in the lab? Use Lighthouse and Chrome DevTools to measure Core Web Vitals and get actionable guidance on exactly what to fix. The Web Vitals Chrome extension can give you a real-time view of metrics on desktop.
  • Need a custom dashboard of Core Web Vitals? Use the updated CrUX Dashboard or new Chrome UX Report API for field data or PageSpeed Insights API for lab data.
  • Looking for guidance? web.dev/measure can measure your page and show you a prioritized set of guides and codelabs for optimization, using PSI data.
  • Finally, use Lighthouse CI on pull requests to ensure there are no regressions in Core Web Vitals before you deploy a change to production.

In general, LCP is impacted by the following:

  • Server and/or software response times
  • Webpage resources and bandwidth
  • Browser software and plugins
  • Site JavaScript and CSS code

Many of the things Google suggests when it comes to optimizing LCP are things you may already be doing as part of a good SEO strategy to create a faster site.

Some tips to keep in mind as you are optimizing:

  1. Text will render faster in most cases than other items that need to be fetched separately (like images). So using things like heading tags as the larger elements is a good idea.
  2. Design changes may be needed in some cases where the largest contentful item is just too slow.
  3. Optimizing your JS and CSS will help load times. Be wary of including too many third-party scripts.
  4. The LCP is in the viewport for mobile or desktop. Things in your footer are not likely to count, so this really is focusing on the top of your page.

For more about the coming update, read the rest of our Page Experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. Safe Browsing to Protect Your Website, Visitors & Ranking
  5. HTTPS for Users and Ranking
  6. Core Web Vitals Overview
  7. Core Web Vitals: LCP (Largest Contentful Paint)
  8. Core Web Vitals: FID (First Input Delay)
  9. Core Web Vitals: CLS (Cumulative Layout Shift)

If you need technical SEO assistance, contact us for a free consultation.

Bruce Clay is founder and president of Bruce Clay, Inc., a global digital marketing firm providing search engine optimization, pay-per-click, social media marketing, SEO-friendly web architecture, and SEO tools and education. Connect with him on LinkedIn and other social networks from Bruce's author page.
Comments (5)
Filed under: SEO — Tags: ,

5 Replies to “Core Web Vitals: LCP – What It Is and How to Improve It for SEO”

Definitely agree that core web vitals such as pagespeed have always been important and will continue to become more important but I have found some of the pagespeed metrics aren’t always very accurate even when changes have been implemented.

Web designers needs to focus on these things. Because it has very severe impact on SEO.

I liked reading this article – it’s timely, and the differentiation between lab and field testing was helpful too – thanks for sharing :-)

Paula Allen

Hi Andy – Yes, it helps explain why scores can vary so much between different tools. Thanks as always for contributing your thoughts!

Very interesting piece. I hadn’t heard of some of the tools you mentioned in here. I will definitely start checking those out!

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Serving North America based in the Los Angeles Metropolitan Area
Bruce Clay, Inc. | 2245 First St., Suite 101 | Simi Valley, CA 93065
Voice: 1-805-517-1900 | Toll Free: 1-866-517-1900 | Fax: 1-805-517-1919