What Is Largest Contentful Paint: An Easy Explanation

  • Share

Largest Contentful Paint (LCP) is a Google consumer expertise metric that turned a rating consider 2021.

This information explains what LCP is and how one can obtain the very best scores.

What is Largest Contentful Paint?

LCP is a measurement of how lengthy it takes for the primary content material of a web page to obtain and be able to be interacted with.

What is measured is the biggest picture or block of context throughout the consumer viewport. Anything that extends past the display doesn’t depend.

Typical components measured are photographs, video poster photographs, background photographs, and block-level textual content components like paragraph tags.

Why is LCP Measured?

LCP was chosen as a key metric for the Core Web Vitals rating as a result of it precisely measures how briskly a webpage can be utilized.

Additionally, it’s straightforward to measure and optimize for.

Block-level Elements Used to Calculate the LCP Score

Block-level components used for calculating the Largest Contentful Paint rating may be the <fundamental> and <part> components, in addition to the heading, div, kind components.

Advertisement

Continue Reading Below

Any block-level HTML aspect that comprises textual content components can be utilized, so long as it’s the biggest one.

Not all components are used. For instance, the SVG and VIDEO components will not be at the moment used for calculating the Largest Contentful Paint.

LCP is a straightforward metric to grasp as a result of all it’s important to do is have a look at your webpage and decide what the biggest textual content block or picture is after which optimize it by making it smaller or eradicating something that will stop it from downloading rapidly.

Because Google contains most websites within the mobile-first index, it’s finest to optimize the cell viewport first, then the desktop.

Delaying Large Elements Might Not Help

Sometimes a webpage will render in elements. A big featured picture would possibly take longer to obtain than the biggest textual content block-level aspect.

What occurs, on this case, is {that a} PerformanceEntry is logged for the biggest textual content block-level aspect.

But when the featured picture on the prime of the display masses, if that aspect takes up extra of the consumer’s display (their viewport), then one other PerformanceEntry object will likely be reported for that picture.

Advertisement

Continue Reading Below

Images Can Be Tricky for LCP Scores

Web publishers generally add photographs at their authentic measurement after which use HTML or CSS to resize the picture to show at a smaller measurement.

The authentic measurement is what Google refers to because the “intrinsic” measurement of the picture.

If a writer uploads a picture that’s 2048 pixels large and 1152 pixels in peak, that 2048 x 1152 peak and width are thought of the “intrinsic” measurement.

Now, if the writer resizes the 2048 x 1152 pixel picture to 640 x 360 pixels, the 640×360 measurement picture known as the seen measurement.

For the needs of calculating the picture measurement, Google makes use of whichever measurement is smaller between the intrinsic and visual measurement photographs.

Note About Image Sizes

It’s potential to realize a excessive Largest Contentful Paint rating with a big intrinsic measurement picture that’s resized with HTML or CSS to be smaller.

But it’s a finest apply to make the intrinsic measurement of the picture match the seen measurement.

The picture will obtain quicker and your Largest Contentful Paint rating will go up.

How LCP Handles Images Served from Another Domain

Images served from one other area, like from a CDN, are typically not counted within the Largest Contentful Paint calculation.

Publishers who need to have these sources be part of the calculation must set what’s referred to as a Timing-Allow-Origin header.

Adding this header to your website may be tough as a result of if you happen to use a wildcard (*) within the configuration, then it might open your website as much as hacking occasions.

In order to do it correctly, you would need to add a site that’s particular to Google’s crawler as a way to whitelist it in order that it may possibly see the timing data out of your CDN.

So at this level, sources (like photographs) which can be loaded from one other area (like from a CDN) is not going to be counted as a part of the LCP calculation.

Beware These Scoring “Gotchas”

All components which can be within the consumer’s display (the viewport) are used to calculate LCP. That implies that photographs which can be rendered off-screen after which shift into the format as soon as they’re rendered could not depend as a part of the Largest Contentful Paint rating.

Advertisement

Continue Reading Below

On the other finish, components that begin out within the consumer viewport after which get pushed off-screen could also be counted as a part of the LCP calculation.

How to Get the LCP Score

There are two sorts of scoring instruments. The first one known as Field Tools, and the second known as Lab Tools.

Field instruments are precise measurements of a website.

Lab instruments give a digital rating based mostly on a simulated crawl utilizing algorithms that approximate Internet situations {that a} typical consumer on a cell phone would possibly encounter.

How to Optimize for Largest Contentful Paint

There are three fundamental areas to optimize (plus yet another for JavaScript Frameworks):

  1. Slow servers.
  2. Render-blocking JavaScript and CSS.
  3. Slow useful resource load instances.

A gradual server may be a problem with DDOS ranges of hacking and scraper site visitors on a shared or VPS host. You could discover reduction by putting in a WordPress plugin like WordFence to search out out if you happen to’re experiencing an enormous onslaught after which block it.

Advertisement

Continue Reading Below

Other points may very well be the misconfiguration of a devoted server or VPS. A typical concern may be the quantity of reminiscence allotted to PHP.

Another concern may very well be outdated software program like an outdated PHP model or CMS software program that’s outdated.

The worst-case state of affairs is a shared server with a number of customers which can be slowing down your field. In that case, transferring to a greater host is the reply.

Typically, making use of fixes like including caching, optimizing photographs, fixing render-blocking CSS and JavaScript, and pre-loading sure belongings can assist.

Google has a neat tip for coping with CSS that’s not important for rendering what the consumer 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.

<hyperlink rel=”preload” href=”stylesheet.css” as=”fashion” onload=”this.rel=’stylesheet’”>”

Field Tools for LCP Score

Google lists three discipline instruments:

Advertisement

Continue Reading Below

The final one – Chrome User Experience Report – requires a Google account and a Google Cloud Project. The first two are extra easy.

Lab Tools for LCP Score

Lab measurements are simulated scores.

Google recommends the next instruments:

The first two instruments are offered by Google. The third software is offered by a 3rd celebration.

Citations

How to Optimize for LCP

What is LCP?

Timing Attacks and the Timing-Allow-Origin Header

Advertisement

Continue Reading Below


Featured picture credit score: Paulo Bobita

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,’script’,
‘https://connect.facebook.net/en_US/fbevents.js’);

if( typeof sopp !== “undefined” && sopp === ‘yes’ ){
fbq(‘dataProcessingOptions’, [‘LDU’], 1, 1000);
}else{
fbq(‘dataProcessingOptions’, []);
}

fbq(‘init’, ‘1321385257908563’);

fbq(‘track’, ‘PageView’);

fbq(‘trackSingle’, ‘1321385257908563’, ‘ViewContent’, {
content_name: ‘largest-contentful-paint’,
content_category: ‘seo ‘
});

  • Share