What Is Largest Contentful Paint: An Easy Explanation

Any block-level HTML factor that accommodates textual content components can be utilized, so long as it’s the most important one.

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

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

Because Google contains most websites within the mobile-first index, it’s greatest 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 may take longer to obtain than the most important textual content block-level factor.

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

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

Images Can Be Tricky for LCP Scores

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

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

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

Now, if the writer resizes the 2048 x 1152 pixel picture to 640 x 360 pixels, the 640×360 dimension picture is named the seen dimension.

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

Note About Image Sizes

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

But it’s a greatest apply to make the intrinsic dimension of the picture match the seen dimension.

The picture will obtain sooner 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 assets be part of the calculation have to set what’s referred to as a Timing-Allow-Origin header.

Adding this header to your website will be tough as a result of should you use a wildcard (*) within the configuration, then it may 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 in an effort to whitelist it in order that it may well see the timing data out of your CDN.

So at this level, assets (like photographs) which might be loaded from one other area (like from a CDN) won’t be counted as a part of the LCP calculation.

Beware These Scoring “Gotchas”

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

On the alternative 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 is named Field Tools, and the second is named 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 may encounter.

How to Optimize for Largest Contentful Paint

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

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

A gradual server will be a problem with DDOS ranges of hacking and scraper site visitors on a shared or VPS host. You might discover aid by putting in a WordPress plugin like WordFence to seek out out should you’re experiencing a large onslaught after which block it.

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

Another difficulty 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 might 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 property will help.

Google has a neat tip for coping with CSS that’s not important for rendering what the consumer sees:

“Remove any unused CSS totally or transfer it to a different stylesheet if used on a separate web page of your website.

For any CSS not wanted for preliminary rendering, use loadCSS to load information asynchronously, which leverages rel=”preload” and onload.

”

Field Tools for LCP Score

Google lists three subject instruments:

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

Lab Tools for LCP Score

Lab measurements are simulated scores.

Google recommends the next instruments:

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

Citations

How to Optimize for LCP

What is LCP?

Timing Attacks and the Timing-Allow-Origin Header

Featured picture credit score: Paulo Bobita