什麼是最大的知足顏料：通過@sejournal、@martinibuster輕鬆解釋

Largest Contentful Paint (LCP) is simply a Google idiosyncratic acquisition metric that became a ranking origin successful 2021.

This usher explains what LCP is and however to execute the champion scores.

What is Largest Contentful Paint?

LCP is simply a measurement of however agelong it takes for the main contented of a leafage to download and beryllium acceptable to beryllium interacted with.

What is measured is the largest representation oregon artifact of discourse wrong the idiosyncratic viewport. Anything that extends beyond the surface does not count.

Typical elements measured are images, video poster images, inheritance images, and block-level substance elements similar paragraph tags.

Why is LCP Measured?

LCP was chosen arsenic a cardinal metric for the Core Web Vitals people due to the fact that it accurately measures however accelerated a webpage tin beryllium used.

Additionally, it is casual to measurement and optimize for.

Block-level Elements Used to Calculate the LCP Score

Block-level elements utilized for calculating the Largest Contentful Paint people tin beryllium the <main> and <section> elements, arsenic good arsenic the heading, div, signifier elements.

Any block-level HTML constituent that contains substance elements tin beryllium used, arsenic agelong arsenic it’s the largest one.

Not each elements are used. For example, the SVG and VIDEO elements are not presently utilized for calculating the Largest Contentful Paint.

LCP is an casual metric to recognize due to the fact that each you person to bash is look astatine your webpage and find what the largest substance artifact oregon representation is and past optimize it by making it smaller oregon removing thing that would forestall it from downloading quickly.

Because Google includes astir sites successful the mobile-first index, it’s champion to optimize the mobile viewport first, past the desktop.

Delaying Large Elements Might Not Help

Sometimes a webpage volition render successful parts. A ample featured representation mightiness instrumentality longer to download than the largest substance block-level element.

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

But erstwhile the featured representation astatine the apical of the surface loads, if that constituent takes up much of the user’s surface (their viewport), past different PerformanceEntry entity volition beryllium reported for that image.

Images Can Be Tricky for LCP Scores

Web publishers commonly upload images astatine their archetypal size and past usage HTML oregon CSS to resize the representation to show astatine a smaller size.

The archetypal size is what Google refers to arsenic the “intrinsic” size of the image.

If a steadfast uploads an representation that’s 2048 pixels wide and 1152 pixels successful height, that 2048 x 1152 tallness and width are considered the “intrinsic” size.

Now, if the steadfast resizes the 2048 x 1152 pixel representation to 640 x 360 pixels, the 640×360 size representation is called the disposable size.

For the purposes of calculating the representation size, Google uses whichever size is smaller betwixt the intrinsic and disposable size images.

Note About Image Sizes

It’s imaginable to execute a precocious Largest Contentful Paint people with a ample intrinsic size representation that is resized with HTML oregon CSS to beryllium smaller.

But it’s a champion signifier to marque the intrinsic size of the representation lucifer the disposable size.

The representation volition download faster and your Largest Contentful Paint people volition spell up.

How LCP Handles Images Served from Another Domain

Images served from different domain, similar from a CDN, are mostly not counted successful the Largest Contentful Paint calculation.

Publishers who privation to person those resources beryllium a portion of the calculation request to acceptable what’s called a Timing-Allow-Origin header.

Adding this header to your tract tin beryllium tricky due to the fact that if you usage a wildcard (*) successful the configuration, past it could unfastened your tract up to hacking events.

In bid to bash it properly, you would person to adhd a domain that’s circumstantial to Google’s crawler successful bid to whitelist it truthful that it tin spot the timing accusation from your CDN.

So astatine this point, resources (like images) that are loaded from different domain (like from a CDN) volition not beryllium counted arsenic portion of the LCP calculation.

Beware These Scoring “Gotchas”

All elements that are successful the user’s surface (the viewport) are utilized to cipher LCP. That means that images that are rendered off-screen and past displacement into the layout erstwhile they are rendered whitethorn not number arsenic portion of the Largest Contentful Paint score.

On the other end, elements that commencement retired successful the idiosyncratic viewport and past get pushed off-screen whitethorn beryllium counted arsenic portion of the LCP calculation.

How to Get the LCP Score

There are 2 kinds of scoring tools. The archetypal 1 is called Field Tools, and the 2nd 1 is called Lab Tools.

Field tools are existent measurements of a site.

Lab tools springiness a virtual people based connected a simulated crawl utilizing algorithms that approximate Internet conditions that a emblematic idiosyncratic connected a mobile telephone mightiness encounter.

How to Optimize for Largest Contentful Paint

There are 3 main areas to optimize (plus 1 much for JavaScript Frameworks):

1. Slow servers.
2. Render-blocking JavaScript and CSS.
3. Slow assets load times.

A dilatory server tin beryllium an contented with DDOS levels of hacking and scraper postulation connected a shared oregon VPS host. You whitethorn find alleviation by installing a WordPress plugin similar WordFence to find retired if you’re experiencing a monolithic onslaught and past artifact it.

Other issues could beryllium the misconfiguration of a dedicated server oregon VPS. A emblematic contented tin beryllium the magnitude of representation allotted to PHP.

Another contented could beryllium outdated bundle similar an aged PHP mentation oregon CMS bundle that is outdated.

The worst-case script is simply a shared server with aggregate users that are slowing down your box. In that case, moving to a amended big is the answer.

Typically, applying fixes similar adding caching, optimizing images, fixing render-blocking CSS and JavaScript, and pre-loading definite assets tin help.

Google has a neat extremity for dealing with CSS that’s not indispensable for rendering what the idiosyncratic sees:

“Remove immoderate unused CSS wholly oregon determination it to different stylesheet if utilized connected a abstracted leafage of your site.

For immoderate CSS not needed for archetypal rendering, usage loadCSS to load files asynchronously, which leverages rel=”preload” and onload.

<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>”

Field Tools for LCP Score

Google lists 3 tract tools:

• PageSpeed Insights.
• Search Console (Core Web Vitals report).
• Chrome User Experience Report.

The past 1 – Chrome User Experience Report – requires a Google relationship and a Google Cloud Project. The archetypal 2 are much straightforward.

Lab Tools for LCP Score

Lab measurements are simulated scores.

Google recommends the pursuing tools:

• Chrome DevTools.
• Lighthouse.
• WebPageTest.org.

The archetypal 2 tools are provided by Google. The 3rd instrumentality is provided by a 3rd party.

Citations

How to Optimize for LCP

What is LCP?

Timing Attacks and the Timing-Allow-Origin Header

Featured representation credit: Paulo Bobita