What is Google’s New Performance Metric, Largest Contentful Paint?

Big Performance-based Changes are Coming to Google’s Search Algorithm

When it comes to page speed optimization, you may be familiar with metrics such as First Contentful Paint (FCP) and First Meaningful Paint (FMP). These metrics measure the first piece of content rendered and how long it takes for content to appear on the screen, respectively. However, it’s not easy to determine whether these metrics are registering the most important content.

First Contentful Paint is triggered when the first element above the fold loads — which could be the company logo or the navigation bar. First Meaningful Paint looks for specific elements such as headings and images, but it’s not guaranteed that these elements are the ones you or your visitors find most essential.

This is where Google’s new performance analysis measure, Largest Contentful Paint (LCP), comes into play.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) assumes that your primary content is the largest object visible in the viewport. LCP measures how long it takes to load this largest element from the Document Object Model and determines when the main or largest content has finished rendering on the web page.

Primarily, LCP takes objects that are above the page fold (anything visible without scrolling) into account. These could include things like hero images, videos and text. LCP will not count anything outside this viewport, and therefore, the Largest Contentful Paint (LCP) benchmark won’t be ideal for you if you like to decorate the hero image above the page fold with eye candy or video elements.

Since LCP is a new part of Google’s Core Web Vitals, it only counts the page load time of individual elements in the rendering experience; these elements are:

• Image elements (<img>)
• Image tags within SVG code (<image>).
• Video thumbnails (<video>)
• Background images with CSS (background: url(‘example.png’))
• Text-heavy block level elements like paragraphs (<p>), headings (<h1>, <h2>) or lists (<ol>, <ul>)

This new web page performance tool tells us something that other metrics can’t. It helps to identify how fast content appears to visitors — not when the web page starts loading, but instead once the main content they want to see has loaded. In short, LCP allows for a more precise understanding of how fast content loads and becomes visible to visitors.

Why and How is it Measured?

LCP measures how quickly a webpage is usable by the visitor. Therefore, it’s a useful measurement when it comes to understanding how long it takes for your users to see the information you want them to see. To improve LCP, all you have to do is determine which is the largest text block or background image on your webpage and optimize it for better server response and download time.

The Document Object Model loads your content in phases, meaning your main content can load too late throwing your core web vitals out of whack; however, LCP still considers it. This is because LCP measures the largest content on your webpage and considers it your most important information to measure the page load metric

LCP references the largest element in the first frame of side rendering. As more content is loaded, frame by frame and object by object, the metric compares it to the element initially rendered. If the new element is larger than the reference, the performance entry is updated, and so is the Largest Contentful Paint.

The update cycle ends with the first user interaction on the website, such as a click or scroll. These actions change the content within the viewport or can even reveal hidden objects. So, logically, the evaluation process ends there.

If you are looking to measure your LCP, it is estimated in two ways: either directly on the site using the field method or through simulations performed by an API and algorithms called the lab method. Several tools help to make the core web vitals report more accurate.

With the field method, you can use

For the lab tools, you can use

With these optimization tools, you can measure Largest Contentful Paint when necessary with continued monitoring of the results.

What Causes a Poor LCP Score?

LCP has a simple measuring scale of Good, Needs Improvement and Poor. An initial rendering or page content loading time under 2.5 seconds is good, whereas a first paint loading time of over 4 seconds would be considered poor. Therefore, as a visitor, you would want the essential content element to load faster or within 2.5 seconds.

There could be several reasons why your LCP score is low. Firstly, it could be due to slow server response times. If content takes longer to load from the server, it will take longer to be rendered on screen. Therefore, slow servers are not a great option if you are looking for an optimized LCP experience.

Another reason why LCP scores may register as “low” or “poor” is due to render-blocking JavaScript and CSS. HTML markup needs to be parsed into a Document Object Model (DOM) tree. If the HTML parser encounters an external spreadsheet or synchronous Javascript tags, then it will pause due to the third party render blocking

Finally, slow resource load times will also affect your LCP score. Elements such as images, videos, and block-level elements that contain text nodes or other text elements affect LCP. If these resources are too large and take longer to load, then LCP is rendered poor.

Why is Largest Contentful Paint Important for SEO?

Although Google has said that content is still important for Search Engine Optimization (SEO) rankings, site speed is also a vital factor, and this is where it becomes more important to improve LCP. Therefore, there are several ways that LCP could impact a site’s SEO as shown in a Chrome User Experience Report.

Here are some of the ways that LCP is vital for SEO and making web pages more visible to your target audience.

It is Google’s Own Metric

Although it’s not the only search engine, Google is the largest search engine in use today and is the one that businesses target first when it comes to SEO. Other search engines also seem to follow Google when it comes to new features and algorithms for SEO.

LCP will become a part of Google Chrome, which is used by 310 million people globally. As such, it will become one of the most significant factors Google uses when it measures a webpage’s performance. Of course, this will impact the web page’s SERP (search engine results page) ranking.

User Experience is Important for SEO

A user doesn’t want to spend several seconds waiting for your page to load — meaning that page speed is essential. Page speed directly impacts the user experience of the website.

Currently, Google has algorithms that rate your web page on how enjoyable the browsing experience is for the visitor. As such, they wouldn’t want to put slow-loading or hard-to-navigate websites on the top of their search results.

Besides the fact that a faster loading time means a better experience for visitors, LCP will also be a determining factor in how enjoyable your webpage is for visitors. So, it helps determine if visitors will have a good user experience on your website, making them more likely to convert into customers.

Content is Vital

Largest Contentful Paint places the experience with the main content at the forefront of the user experience. When it comes to SEO and good rankings, content relevant to the users has always been vital. This element shows the search engine that you are a valuable and reputable source of information and deserve to rank higher in the SERPs.

Although useful content for your users is essential, it’s also vital to ensure they have a good user experience with the site when accessing and viewing it. Getting your LCP and page speeds to be as quick as possible impacts user experience and how your users interact with your site and content. In turn, this performance impacts the way Google ranks your pages on its usefulness and accessibility.

Site Speed Can Affect Rankings

Google has emphasized the importance of site speed when it comes to SEO. This performance optimization is especially vital when it comes to mobile side rendering and element timing. Therefore, site speed is one of the signals that search engines use when ranking sites in their search engine results pages.

Pages with longer load times also appear to have a higher bounce rate than those that perform much quicker. People are more likely to abandon a page if it takes longer than 3 seconds to load. Therefore, a higher bounce rate leads to lower conversion rates and fewer chances of pages appearing on SERPs.

With Largest Contentful Paint measuring how long the largest content takes to appear on the screen (rather than simply when it begins to load), pages may seem to be either faster or slower than initially thought to be. This, in turn, impacts how your website ranks on Google’s SERPs. Site speed is critical, and getting your LCP down to 2.5 seconds or less is vital for web developers and website owners alike.

Slow Loading Affects Crawling

With LCP reporting, you can better understand how long a webpage takes to load. This highlights areas that may need improving, and you can reduce your LCP to a more competitive level. Slow web page speeds limit the volume of web pages a search engine crawls at once, impacting your indexation. In turn, it ultimately affects how well your site ranks in SERPs.

How to Improve Largest Contentful Paint (LCP)

If you find your Largest Contentful Paint to be in the “poor” or “needs improvement” ranges, all is not lost just yet. There are several ways in which you can improve it. Here are some easy solutions to improving LCP.

Begin with Anything Labelled “Poor”

Anything that is labelled poor is the biggest issue impacting your Largest Contentful Paint performance metrics. Once you resolve these flagged issues, you can improve further with other fixes by priority on your essential URLs. You can also do this with URLs that return a “needs improvement” label, but it’s best to start with anything labelled “poor.”

Use a Premium Hosting Service

As I mentioned earlier, low-quality servers and shared web hosts can impact the page load speed of site pages. So, it’s best to have a reliable web hosting service for your site. A way to improve the time it takes for a browser to receive data is to analyze and improve your server-side code’s efficiency. Using a managed WordPress hosting service like Kinsta that provides best-in-class server-side performance optimizations and a content delivery network will put you miles ahead of the pack

Avoid JavaScript to (Lazy) Load Images

JavaScript is known to slow loading time, so it’s best to leave the lazy loading features to your web browser. This will help prevent any JavaScript related delays and improve your LCP. Lazy loading JavaScript adds additional latency to your site loading time that directly impacts your LCP performance rating

Optimize Image Sizes

Along with avoiding JavaScript to lazy load images, it’s also a good idea to use the right sizing for images. Your website designer will likely give you recommended sizes for images — usually for both mobile or desktop versions. Therefore allowing you to follow best practices to use the correct image size to avoid overloading and creating an inflated Largest Contentful Paint score.

Reduce Page Size

the optimal web page size should be 500KB or less according to Google, and they recommend limiting your page resources to 50 or less for optimal performance. Using Accelerated Mobile Pages (AMP), which uses a basic format, will allow you to resolve this issue. However, this is only a solution if your pages are articles, products or recipes. If your page requires more CSS elements, this is not the best solution as your custom interface design will be overwritten by the AMP features.

Resolve Issues and Validate Fixes

Once you have completed any updates to your site, you must go back to the Google PageSpeed Insights tool and run the optimize report again see if anything has changed. You will have to continue this process until you reach your target LCP score. Then, you will need to go to your Google Search Console (GSC) account and validate your fix so that Google knows you have updated your site and it can be recrawled.

Final Thoughts

LCP is a welcome metric in our ever-changing online world that will ensure that you get the best out of your web experience. Of course, this is if Google’s assumption is correct, and your most important content is above the page fold.

It’s always important that you analyze your site correctly and don’t take the metric as gospel. After all, Largest Contentful Paint is still a work in progress. But, if used correctly, LCP can grow your web pages and further improve and optimize your visitors’ experiences.

It is a useful metric to track whether visitors see the content you want them to see in the viewport but should not be used in isolation. Together with other metrics, it can paint a better picture of how quickly important content loads on your webpages.

To learn more about how website optimization is woven into our web design process contact us today.

Originally published at https://parachutedesign.ca on October 24, 2020.