![]() Neither are text nodes using web fonts during the font block period. Images that have not yet loaded are not considered "rendered". It's important to note that an element can only be considered the largest contentful element once it has rendered and is visible to the user. Later, once the hero image finishes loading, a second largest-contentful-paint entry would be dispatched and its element property would reference the. But then, after rendering subsequent frames, it will dispatch another PerformanceEntry any time the largest contentful element changes.įor example, on a page with text and a hero image the browser may initially just render the text-at which point the browser would dispatch a largest-contentful-paint entry whose element property would likely reference a or. To handle this potential for change, the browser dispatches a PerformanceEntry of type largest-contentful-paint identifying the largest contentful element as soon as the browser has painted the first frame. Web pages often load in stages, and as a result, it's possible that the largest element on the page might change. When is largest contentful paint reported? # In spec terms: each text node belongs to the element that generates its containing block. The key point is that every text node belongs to (and only to) its closest block-level ancestor element. For example, images that are shrunk down to a much smaller than their intrinsic size will only report the size they're displayed at, whereas images that are stretched or expanded to a larger size will only report their intrinsic sizes.įor text elements, only the size of their text nodes is considered (the smallest rectangle that encompasses all text nodes).įor all elements, any margin, padding, or border applied via CSS is not considered.ĭetermining 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. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions do not count toward the element's size.įor image elements that have been resized from their intrinsic size, the size that gets reported is either the visible size or the intrinsic size, whichever is smaller. The size of the element reported for Largest Contentful Paint is typically the size that's visible to the user within the viewport. , ) may be added in the future as more research is conducted. Note, restricting the elements to this limited set was intentional in order to keep things simple in the beginning. Images that occupy the entire viewport are not considered LCP candidates. ![]() To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices. To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. Based on discussions in the W3C Web Performance Working Group and research done at Google, we've found that a more accurate way to measure when the main content of a page is loaded is to look at when the largest element was rendered. In the past we've recommended performance metrics like First Meaningful Paint (FMP) and Speed Index (SI) (both available in Lighthouse) to help capture more of the loading experience after the initial paint, but these metrics are complex, hard to explain, and often wrong-meaning they still do not identify when the main content of the page has loaded. If a page shows a splash screen or displays a loading indicator, this moment is not very relevant to the user. And newer, user-centric performance metrics like First Contentful Paint (FCP) only capture the very beginning of the loading experience. ![]() Older metrics like load or DOMContentLoaded are not good because they don't necessarily correspond to what the user sees on their screen. Historically, it's been a challenge for web developers to measure how quickly the main content of a web page loads and is visible to users. Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded-a fast LCP helps reassure the user that the page is useful.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |