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.

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.

  • 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>)

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.

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.

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.

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.

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.

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.

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Parachute Design

Parachute Design Group Inc. is a boutique Toronto web design agency specializing in beautiful hand-made website design, custom logo design and branding.