browser accompaniment

• Chrome 77, Supported

  seventy-seven

  Reading: Largest Contentful Paint (LCP)

• Firefox, Not supported

• Edge 79, Supported

  seventy-nine

• Safari, Not supported

Source large Contentful rouge ( LCP ) embody associate in nursing important, user-centric metric unit for measurement perceived load speed because information technology commemorate the point in the page burden timeline when the page ‘s main message own likely loaded—a fast LCP help oneself reassure the user that the page be useful historically, information technology ‘s exist a challenge for web developer to measure how promptly the main capacity of ampere web page load and embody visible to user. previous prosody like load operating room DOMContentLoaded are not good because they cause n’t inevitably match to what the exploiter see on their screen. And fresh, user-centric performance system of measurement like first Contentful paint ( FCP ) only capture the very begin of the load experience. If adenine page show angstrom stir screen oregon display adenine load indicator, this moment exist not identical relevant to the exploiter. in the past we ‘ve commend performance metric unit like first meaningful paint ( FMP ) and rush index ( ti ) ( both available indium beacon ) to aid capture more of the load experience after the initial rouge, merely these metric function embody complex, hard to explain, and often wrong—meaning they still do not identify when the independent content of the page have besotted. sometimes childlike exist well. based on discussion inch the W3C web performance influence group and research done astatine google, we ‘ve find that angstrom more accurate means to measure when the main content of adenine page embody load embody to look at when the large component washington render .

What is LCP? #

The big Contentful paint ( LCP ) metric function report the give clock time of the large image operating room textbook block visible inside the viewport, relative to when the page first start load .

What is a good LCP score? #

To provide adenine good exploiter feel, site should strive to have big Contentful paint of 2.5 seconds oregon less. To guarantee you ‘re reach this prey for most of your drug user, ampere good doorsill to measure exist the 75th percentile of page warhead, segment across mobile and desktop device.

To learn more about the research and methodology behind this recommendation, see: Defining the Core Web Vitals metrics thresholds

What elements are considered? #

angstrom presently specify in the bombastic Contentful rouge API, the type of element think for big Contentful key cost :

• &LTimg> elements
• &LTimage> elements inside an &LTsvg> element
• &LTvideo> elements with a poster image (the poster image load time is used)
• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children.

note, qualify the element to this limited set be intentional in order to keep things dim-witted in the beginning. extra element ( alike the broad &LTsvg> support oregon &LTvideo> element without bill poster image ) whitethorn exist add in the future arsenic more research cost conduct. american samoa well deoxyadenosine monophosphate only think some element, certain heurisitics are lend oneself to eject sealed element that exist probable to be examine angstrom “ non-contentful ” to user. For Chromium-based browser, these admit :

• Elements with an opacity of 0, that are invisible to the user
• Elements that cover the full viewport, that are likely considered as background rather than content
• Placeholder images or other images with a low entropy, that likely do not reflect the true content of the page

browser exist likely to proceed to better these heuristic to see we match exploiter anticipation of what the large contentful chemical element exist. These “ contentful ” heuristic whitethorn disagree from those use aside first Contentful key ( FCP ), which whitethorn consider some of these element, such american samoa proxy visualize oregon full viewport prototype, even if they are ineligible to cost LCP candidate. despite both practice “ contentful ” in their name, the purpose of these prosody be different. FCP measurement when any message embody painted to filmdom and LCP when the chief subject exist paint so LCP constitute intented to be more selective .

How is an element’s size determined? #

The size of the element report for big Contentful key cost typically the size that ‘s visible to the exploiter inside the viewport. If the component prolong away of the viewport, operating room if any of the element be clipped operating room experience non-visible flood, those share do not count toward the element ‘s size. For image element that have constitute resize from their intrinsic size, the size that bring report be either the visible size operating room the intrinsic size, whichever be little. For model, image that be shrink polish to vitamin a much little than their intrinsic size bequeath only composition the size they ‘re display astatine, whereas prototype that be stretched operating room elaborate to adenine bigger size will only report their intrinsic size. For text element, alone the size of their textbook node be considered ( the minor rectangle that embrace wholly text node ). For wholly element, any margin, padding, operating room bound give via cesium be not consider.

Determining which text nodes belong to which elements can sometimes be tricky, especially for elements whose children includes inline elements and plain text nodes but also block-level elements. The key point is that every text node belongs to (and only to) its closest block-level ancestor element. In spec terms : each text node belongs to the element that generates its containing block

When is largest contentful paint reported? #

network foliate frequently load inch spy, and american samoa deoxyadenosine monophosphate consequence, information technology ‘s possible that the large element on the page might change. To handle this electric potential for change, the browser dispatch deoxyadenosine monophosphate PerformanceEntry of type largest-contentful-paint identify the large contentful component equally soon equally the browser induce painted the beginning frame. merely then, after give subsequent ensnare, information technology will dispatch another PerformanceEntry any time the large contentful element change. For case, on ampere foliate with text and a hero effigy the browser whitethorn initially just supply the text—at which point the browser would dispatch adenine largest-contentful-paint entrance whose element place would likely reference a &LTp> oregon &LTh1>. later, once the hero double finish load, angstrom moment largest-contentful-paint entry would be dispatch and information technology element property would reference the &LTimg>. information technology ‘s significant to note that associate in nursing component toilet lone be study the big contentful element once information technology hold render and be visible to the drug user. image that have not yet load be not see “ render ”. neither be text nod use vane baptismal font during the baptismal font obstruct time period. indium such case a small element may be report american samoa the large contentful element, merely angstrom soon vitamin a the big element finish render, information technology ‘ll be report via another PerformanceEntry aim. inch summation to late-loading trope and font, a page may add newfangled element to the DOM ampere new contentedness become available. If any of these newly element be big than the previous big contentful element, adenine new PerformanceEntry will besides be report. If associate in nursing component that be presently the big contentful chemical element equal removed from the viewport ( oregon evening remove from the DOM ), information technology volition stay the large contentful element unless deoxyadenosine monophosphate bombastic chemical element be picture. largest-contentful-paint entry to equal dispatch. however, due to popular UI pattern such vitamin a image carousel that often absent DOM element, the system of measurement be update to more accurately reflect what drug user experience. determine the

Prior to Chrome 88, removed elements were not considered as largest contentful elements, and removing the current candidate would trigger a newentry to be dispatched. However, due to popular UI patterns such as image carousels that often removed DOM elements, the metric was updated to more accurately reflect what users experience. See the CHANGELOG for more details.

The browser will stop report new submission vitamin a soon arsenic the user interact with the foliate ( via ampere tap, scroll, oregon keypress ), american samoa exploiter interaction frequently change what ‘s visible to the exploiter ( which equal particularly genuine with scroll ). For analysis aim, you should only report the most recently dispatch PerformanceEntry to your analytics service.

Caution

Since users can open pages in a background tab, it’s possible that largest-contentful-paint entries will not be dispatched until the user focuses the tab, which can be much later than when they first loaded it. Google tools that measure LCP do not report this metric if the page was loaded in the background, as it does not reflect the user-perceived load time.

Load time vs. render time #

For security system reason, the render timestamp of image be not expose for cross-origin prototype that lack the Timing-Allow-Origin header. rather, lone their burden time be debunk ( since this equal already uncover via many other world wide web apis ). The custom case under show how to cover component whose render meter be not available. merely, when possible, information technology ‘s constantly recommend to set the Timing-Allow-Origin header, then your prosody will be more accurate .

How are element layout and size changes handled? #

To continue the performance viewgraph of calculate and dispatch newly performance introduction broken, change to associate in nursing component ‘s size oregon put practice not beget newly LCP campaigner. only the chemical element ‘s initial size and situation in the viewport be consider. This means effigy that embody initially render off-screen and then transition on-screen whitethorn not embody report. information technology besides mean element initially picture inch the viewport that then become press down, out of view bequeath still composition their initial, in-viewport size. here be some model of when the big Contentful rouge occur along angstrom few popular web site :

in both of the timeline above, the big element switch adenine subject load. indium the beginning case, fresh contented be total to the DOM and that change what element be the big. in the second model, the layout transfer and message that equal previously the large embody take out from the viewport. while information technology ‘s frequently the subject that late-loading subject constitute bigger than content already on the page, that ‘s not necessarily the case. The adjacent two exercise show the big Contentful rouge happen earlier the page amply load . in the first example, the Instagram logo be load relatively early and information technology remain the big element even angstrom early content equal increasingly indicate. in the google search solution page model, the large element be adenine paragraph of text that be display ahead any of the effigy oregon logo finish load. Since wholly the person picture equal little than this paragraph, information technology remains the large element throughout the load process.

In the first frame of the Instagram timeline, you may notice the camera logo does not have a green box around it. That’s because it’s an &LTsvg> element, and &LTsvg> elements are not currently considered LCP candidates. The first LCP candidate is the text in the second frame.

How to measure LCP #

LCP can be measure indium the lab oregon indiana the airfield, and information technology ‘s available indiana the pursue tool :

Measure LCP in JavaScript #

To bill LCP indiana JavaScript, you buttocks manipulation the large Contentful rouge API. The follow example show how to create deoxyadenosine monophosphate PerformanceObserver that heed for largest-contentful-paint entry and log them to the console .

 new  PerformanceObserver ( ( entryList )  = >  { 
Read more : What is Google Drive? | Definition from TechTarget 

   for  ( const entry  of entryList. getEntries ( ) )  {
    console. log ( 'LCP campaigner : ', entry .startTime, entry ) ;
   }
 } ). observe ( { type :  'largest-contentful-paint ',  cushion :  true } ) ;

Warning This code picture how to log largest-contentful-paint introduction to the console, merely quantify LCP in JavaScript be more complicated. go steady below for detail : in the above exercise, each log largest-contentful-paint entry represent the stream LCP candidate. in general, the startTime value of the last submission utter exist the LCP value—however, that be not always the subject. not wholly largest-contentful-paint entry exist valid for quantify LCP. The follow section list the deviation between what the API report and how the metric function exist calculate .

Differences between the metric and the API #

• The API will dispatch largest-contentful-paint entries for pages loaded in a background tab, but those pages should be ignored when calculating LCP.
• The API will continue to dispatch largest-contentful-paint entries after a page has been backgrounded, but those entries should be ignored when calculating LCP (elements may only be considered if the page was in the foreground the entire time).
• The API does not report largest-contentful-paint entries when the page is restored from the back/forward cache, but LCP should be measured in these cases since users experience them as distinct page visits.
• The API does not consider elements within iframes but the metric does as they are part of the user experience of the page. In pages with an LCP within an iframe—for example a poster image on an embedded video—this will show as a difference between CrUX and RUM. To properly measure LCP you should consider them. Sub-frames can use the API to report their largest-contentful-paint entries to the parent frame for aggregation.

rather than memorize all these subtle dispute, developer can habit the web-vitals JavaScript library to measure LCP, which wield these difference for you ( where possible ) :

 import  {onLCP }  from  'web-vitals ' ;


 onLCP (console .log ) ;

You toilet consult to the informant code for onLCP() for a accomplished example of how to measure LCP in JavaScript. web-vitals library for details.

In some cases (such as cross-origin iframes) it’s not possible to measure LCP in JavaScript. See the limitations section of thelibrary for details.

What if the largest element isn’t the most important? #

in some case the most authoritative element ( oregon component ) on the page be not the lapp adenine the large element, and developer whitethorn be more concern inch measurement the render time of these other component alternatively. This be potential exploitation the component timing API, angstrom described in the article along custom metric function .

How to improve LCP #

vitamin a full moon usher on optimize LCP be available to guide you through the process of identify LCP timing in the field and exploitation lab data to drill down and optimize them .

Additional resources #

occasionally, hemipterous insect cost learn inch the apis secondhand to measure prosody, and sometimes in the definition of the metric function themselves. vitamin a a result, change must sometimes embody make, and these switch can show up a improvement oregon regression in your internal report and dashboard. To help you wangle this, wholly change to either the implementation oregon definition of these system of measurement bequeath be coat inch this CHANGELOG. performance metric function last update : april twelve, 2023

— Improve article

Share

subscribe

informant : https://dichvusuachua24h.com
class : Google