SEO

What Is Largest Contentful Paint: An Easy Explanation via @sejournal, @martinibuster

Published

3 years ago

August 13, 2021

Entireweb

Largest Contentful Paint (LCP) is a Google user experience metric that became a ranking factor in 2021.

This guide explains what LCP is and how to achieve the best scores.

What is Largest Contentful Paint?

LCP is a measurement of how long it takes for the main content of a page to download and be ready to be interacted with.

What is measured is the largest image or block of context within the user viewport. Anything that extends beyond the screen does not count.

Typical elements measured are images, video poster images, background images, and block-level text elements like paragraph tags.

Why is LCP Measured?

LCP was chosen as a key metric for the Core Web Vitals score because it accurately measures how fast a webpage can be used.

Additionally, it is easy to measure and optimize for.

Block-level Elements Used to Calculate the LCP Score

Block-level elements used for calculating the Largest Contentful Paint score can be the <main> and <section> elements, as well as the heading, div, form elements.

Continue Reading Below

Any block-level HTML element that contains text elements can be used, as long as it’s the largest one.

Not all elements are used. For example, the SVG and VIDEO elements are not currently used for calculating the Largest Contentful Paint.

LCP is an easy metric to understand because all you have to do is look at your webpage and determine what the largest text block or image is and then optimize it by making it smaller or removing anything that would prevent it from downloading quickly.

Because Google includes most sites in the mobile-first index, it’s best to optimize the mobile viewport first, then the desktop.

Delaying Large Elements Might Not Help

Sometimes a webpage will render in parts. A large featured image might take longer to download than the largest text block-level element.

What happens, in this case, is that a PerformanceEntry is logged for the largest text block-level element.

But when the featured image at the top of the screen loads, if that element takes up more of the user’s screen (their viewport), then another PerformanceEntry object will be reported for that image.

Continue Reading Below

Images Can Be Tricky for LCP Scores

Web publishers commonly upload images at their original size and then use HTML or CSS to resize the image to display at a smaller size.

The original size is what Google refers to as the “intrinsic” size of the image.

If a publisher uploads an image that’s 2048 pixels wide and 1152 pixels in height, that 2048 x 1152 height and width are considered the “intrinsic” size.

Now, if the publisher resizes the 2048 x 1152 pixel image to 640 x 360 pixels, the 640×360 size image is called the visible size.

For the purposes of calculating the image size, Google uses whichever size is smaller between the intrinsic and visible size images.

Note About Image Sizes

It’s possible to achieve a high Largest Contentful Paint score with a large intrinsic size image that is resized with HTML or CSS to be smaller.

But it’s a best practice to make the intrinsic size of the image match the visible size.

The image will download faster and your Largest Contentful Paint score will go up.

How LCP Handles Images Served from Another Domain

Images served from another domain, like from a CDN, are generally not counted in the Largest Contentful Paint calculation.

Publishers who want to have those resources be a part of the calculation need to set what’s called a Timing-Allow-Origin header.

Adding this header to your site can be tricky because if you use a wildcard (*) in the configuration, then it could open your site up to hacking events.

In order to do it properly, you would have to add a domain that’s specific to Google’s crawler in order to whitelist it so that it can see the timing information from your CDN.

So at this point, resources (like images) that are loaded from another domain (like from a CDN) will not be counted as part of the LCP calculation.

Beware These Scoring “Gotchas”

All elements that are in the user’s screen (the viewport) are used to calculate LCP. That means that images that are rendered off-screen and then shift into the layout once they are rendered may not count as part of the Largest Contentful Paint score.

Continue Reading Below

On the opposite end, elements that start out in the user viewport and then get pushed off-screen may be counted as part of the LCP calculation.

How to Get the LCP Score

There are two kinds of scoring tools. The first one is called Field Tools, and the second one is called Lab Tools.

Field tools are actual measurements of a site.

Lab tools give a virtual score based on a simulated crawl using algorithms that approximate Internet conditions that a typical user on a mobile phone might encounter.

How to Optimize for Largest Contentful Paint

There are three main areas to optimize (plus one more for JavaScript Frameworks):

Slow servers.
Render-blocking JavaScript and CSS.
Slow resource load times.

A slow server can be an issue with DDOS levels of hacking and scraper traffic on a shared or VPS host. You may find relief by installing a WordPress plugin like WordFence to find out if you’re experiencing a massive onslaught and then block it.

Continue Reading Below

Other issues could be the misconfiguration of a dedicated server or VPS. A typical issue can be the amount of memory allotted to PHP.

Another issue could be outdated software like an old PHP version or CMS software that is outdated.

The worst-case scenario is a shared server with multiple users that are slowing down your box. In that case, moving to a better host is the answer.

Typically, applying fixes like adding caching, optimizing images, fixing render-blocking CSS and JavaScript, and pre-loading certain assets can help.

Google has a neat tip for dealing with CSS that’s not essential for rendering what the user sees:

“Remove any unused CSS entirely or move it to another stylesheet if used on a separate page of your site.
For any CSS not needed for initial rendering, use loadCSS to load files asynchronously, which leverages rel=”preload” and onload.
<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>”
Advertisement