Google’s Guide to Improving LCP Core Web Vitals

Google Chrome’s Barry Pollard has shared five critical optimisation tips for improving the Largest Contentful Paint (LCP) metric, offering indispensable guidance for SEOs and web developers aiming to enhance website performance and user experience. LCP is a vital component of Google’s Core Web Vitals, which directly impacts search rankings and user satisfaction. Pollard’s insights highlight practical ways to diagnose and resolve the real causes of poor LCP scores, ensuring websites meet modern performance standards.

As the Google Chrome Web Performance Developer Advocate, Pollard stressed the importance of addressing the underlying factors that hinder LCP performance. LCP measures how quickly the largest visible content element on a page is rendered, such as an image or text block. Issues like slow server responses, render-blocking resources, or large, unoptimised elements can negatively affect LCP scores. Pollard’s advice focuses on pinpointing these problems and applying targeted solutions.

Among his recommendations, Pollard highlights the value of reducing server response times, optimising images, minimising JavaScript and CSS delays, and prioritising above-the-fold content. By implementing these strategies, SEOs and developers can significantly improve page load times and create a smoother browsing experience.

Pollard also discussed the tools and techniques that can help diagnose LCP issues effectively. He encouraged website owners to leverage tools like Chrome DevTools, PageSpeed Insights, and Lighthouse to analyse and understand how specific elements impact LCP scores. These tools can guide developers in identifying bottlenecks and implementing improvements that make a measurable difference.

Understanding LCP is critical for anyone looking to optimise their website’s Core Web Vitals, as Google increasingly prioritises user experience in its ranking algorithms. Pollard’s detailed explanation underscores how essential it is to stay ahead of these changes, as websites that fail to meet performance benchmarks risk losing visibility and traffic.

For those in the SEO and web development space, these tips from Pollard serve as a valuable roadmap for overcoming LCP challenges. By addressing these issues, websites can not only improve their search rankings but also provide users with faster and more enjoyable online experiences.

Whether you’re managing a small blog or a complex e-commerce platform, Pollard’s guidance offers actionable insights to improve your site’s performance. If web performance and search visibility are priorities for you, this advice is essential reading.

 

Largest Contentful Paint (LCP)

LCP, or Largest Contentful Paint, is a crucial Core Web Vitals metric that evaluates how quickly the largest content element appears within a site visitor’s viewport – the visible area of a webpage in a browser. This metric is vital as it directly reflects how quickly users can see and engage with the most significant part of the content, whether that be an image or text.

In terms of LCP, the largest content elements typically include block-level HTML elements that occupy the most horizontal space on the page. These elements may include text-based content like headings (H1 to H6) and paragraphs (), as well as images (). Essentially, any HTML elements that span a large portion of the screen horizontally are considered in the calculation of LCP. Optimising the load time for these elements can drastically improve a website’s LCP score, leading to better user experiences and potentially improved search rankings.

 

1. Know What Data You’re Looking At

Barry Pollard pointed out a common mistake that many publishers and SEOs make when addressing a poor LCP score flagged by PageSpeed Insights (PSI). The mistake often involves debugging the issue directly in the Lighthouse tool or using Chrome Dev Tools.

Pollard suggests that instead of jumping straight to these tools, it’s beneficial to stay within PSI. This is because PSI provides valuable insights that can help you understand the root causes of poor LCP performance, offering hints that guide you in the right direction for fixes.

One key aspect to pay attention to is the data derived from the Chrome User Experience Report (CrUX). This data comes from anonymised Chrome user interactions and provides two types of scores: URL-Level Data and Origin-Level Data.

The URL-Level Data reflects performance metrics for the specific page being tested. On the other hand, Origin-Level Data aggregates performance scores across the entire website. It’s important to note that PSI will display URL-level data if sufficient traffic has been recorded for that particular URL. If not, it will show the Origin-Level Data, which is the aggregated score for the whole site. Understanding these distinctions is crucial for accurately diagnosing and improving LCP performance.

 

2. Review The TTFB Score

Barry Pollard recommends taking a close look at the Time to First Byte (TTFB) score, as he emphasises that “TTFB is the first thing that happens to your page.” TTFB measures how long it takes for a server to send the first byte of data after a request is made. This score is crucial in identifying whether server response time is contributing to poor LCP performance.

TTFB reveals whether the delay is caused by issues with sending the request to the server or with the server’s response time. Barry stresses that optimising the web page itself will not solve the issue if the problem lies with a poor TTFB score.

He writes, “A slow TTFB basically means one of two things:

1. It takes too long to send a request to your server,
2. Your server takes too long to respond.”

Determining which of these issues is the cause can be tricky, as there are several potential reasons for each scenario. To assist with this, Barry proceeds to outline specific tests to help debug LCP issues, which are detailed below.

 

3. Compare TTFB With Lighthouse Lab Test

Pollard advises testing with the Lighthouse Lab Tests, particularly the “Initial server response time” audit. The aim is to determine if the TTFB issue is consistently repeatable, which helps eliminate the possibility that the PSI values are a fluke or anomaly.

It’s important to understand that Lab Results are synthetic, meaning they aren’t based on actual user visits. Instead, these results are simulated by an algorithm that triggers a visit via a Lighthouse test. The advantage of synthetic tests is that they are repeatable, making it easier to isolate the root cause of an issue.

If the Lighthouse Lab Test does not replicate the TTFB problem, this suggests that the server is not the cause of the issue.

Pollard highlights the importance of verifying whether the slow TTFB is repeatable. He recommends scrolling through the results and comparing the Lighthouse lab test’s findings with the slow real-user TTFB when testing the page. He advises looking specifically for the “Initial server response time” audit. If the response time is significantly faster during the lab test, this could provide valuable insights into the issue.

 

4. Expert Tip: How To Check If CDN Is Hiding An Issue

Barry shared a valuable tip about Content Delivery Networks (CDNs), such as Cloudflare, and their role in web page delivery. A CDN helps speed up the delivery of web pages by keeping copies of the pages at various data centres. However, while this boosts speed, it can also mask underlying server issues.

It’s important to note that the CDN does not store a copy of the web page at every data centre globally. Instead, when a user requests a page, the CDN fetches the page from the server and then stores a copy at a data centre closer to the user. The initial fetch from the server can be slower, and if the server is already slow, that first fetch can be even slower than simply delivering the page directly from the server.

To bypass the CDN’s cache and test for issues, Barry suggests a couple of tricks. One is to add a URL parameter, such as “?XYZ,” to the end of the URL, which can force the CDN to fetch a fresh copy of the page. Another trick is to test a page that isn’t frequently requested, as this may not be cached yet by the CDN.

Barry also recommends a useful tool for testing specific countries’ TTFB (Time to First Byte): CrUX, alongside @alekseykulikov.bsky.social’s Treo. This tool allows you to run a free test and view TTFB results on a map, which can help identify if certain countries are experiencing slow page loads.

If you notice slow TTFBs in specific countries, it’s worth checking the amount of traffic from those regions. Since CrUX doesn’t reveal traffic volumes (unless there’s sufficient traffic to show), you will need to consult your analytics to get more details.

When it comes to slow connections from developing countries, Barry points out that this could be due to the widespread use of low-end mobile devices. As a result, performance issues may not solely be tied to network infrastructure but also to the devices being used. It’s essential to keep this in mind when diagnosing slow performance in these regions.

 

5. Fix What Can Be Repeated

Barry concluded his discussion by emphasising that an issue can only be addressed once it has been confirmed as repeatable. He advised that before attempting to resolve server-related issues, it’s important to determine whether the server is underpowered, if the code is too complex or inefficient, or if the database needs optimisation.

If the problem is related to slow connections from specific locations, Barry suggests considering whether a Content Delivery Network (CDN) is required. Alternatively, it may be worth investigating why there is such a high volume of traffic from those areas – possibly due to an ad campaign driving the traffic.

If none of these factors appear to be the cause, Barry pointed out that redirects might be adding to the issue, particularly those caused by ads. Redirects can contribute up to 0.5 seconds to TTFB for each redirect.

To address this, Barry recommended reducing redirects as much as possible. He suggested using the correct final URL to avoid unnecessary redirects to ‘www’ or ‘https’, and also avoiding the use of multiple URL shortener services, which could further complicate the process.

 

Takeaways: How To Optimize For Largest Contentful Paint

Google Chrome’s Barry Pollard shared five key tips for improving Largest Contentful Paint (LCP) scores.

Firstly, he explained that PageSpeed Insights (PSI) data could provide valuable clues when debugging LCP issues. By examining these insights and understanding other nuances, you can make sense of the data more effectively.

Secondly, he highlighted the significance of PSI’s Time to First Byte (TTFB) data. This metric can point to potential reasons behind poor LCP scores, offering an early indication of where improvements can be made.

Thirdly, Pollard stressed the usefulness of Lighthouse lab tests for debugging LCP issues. The key advantage of these tests is their repeatability, which is crucial for accurately identifying the root cause of LCP problems. Once the source is pinpointed, it becomes easier to apply the appropriate solutions.

Fourth, Pollard pointed out that Content Delivery Networks (CDNs) can sometimes mask the underlying causes of LCP issues. He shared a helpful trick to bypass the CDN and fetch a true lab score, which is valuable for accurate debugging.

Finally, Barry listed six potential causes for poor LCP scores. These include:

1. Server performance
2. Redirects
3. Inefficient or complex code
4. Database issues
5. Slow connections specific to geographic locations
6. Slow connections from certain areas, potentially due to external factors like ad campaigns

Understanding these potential causes allows you to narrow down the issues affecting your LCP performance and take the necessary steps to address them.