AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Proxie sentri8/3/2023 ![]() ![]() In order to optimize each sub-part of LCP, it's important to understand what the ideal breakdown of these sub-parts is on a well-optimized page. This example helps illustrate the point that you need to optimize all of these sub-parts in order to achieve the best LCP outcomes. The reason this happens is because, on this page, the LCP element is hidden until the JavaScript code finishes loading, and then everything is revealed at once. In some cases, an optimization applied to one part will not improve LCP, it will just shift the time saved to another part.įor example, in the earlier network waterfall, if you reduced the file size of our image by compressing it more or switching to a more optimal format (such as AVIF or WebP), that would reduce the resource load time, but it would not actually improve LCP because the time would just shift to the element render delay sub-part: But it's also important to keep in mind that you need to optimize all of them. When optimizing LCP, it's helpful to try to optimize these sub-parts individually. There is no overlap or gap between them, and collectively they add up to the full LCP time. * If the LCP element does not require a resource load to render (for example, if the element is a text node rendered with a system font), this time will be 0.Įvery single page can have its LCP value broken down into these four sub-parts. ![]() * Element render delay The delta between when the LCP resource finishes loading until the LCP element is fully rendered. * Resource load time The time it takes to load the LCP resource itself. (See the TTFB metric doc for more details.) Resource load delay The delta between TTFB and when the browser starts loading the LCP resource. LCP sub-part Description Time to first byte (TTFB) The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response. This table explains each of these LCP sub-parts in more detail: To help visualize whether or not a particular page is following this principle, you can break down the total LCP time into the following sub-parts: To identify the LCP resource, you can use developer tools (such as Chrome DevTools or WebPageTest) to determine the LCP element, and from there you can match the URL (again, if applicable) loaded by the element on a network waterfall of all resources loaded by the page.įor example, the following visualization shows these resources highlighted on a network waterfall diagram from a typical page load, where the LCP element requires an image request to render.įor a well-optimized page, you want your LCP resource request to start loading as early as it can, and you want the LCP element to render as quickly as possible after the LCP resource finishes loading. While other requests on the page can affect LCP, these two requests-specifically the times when the LCP resource begins and ends-reveal whether or not your page is optimized for LCP. Most page loads typically include a number of network requests, but for the purposes of identifying opportunities to improve LCP, you should start by looking at just two: This guide will present a methodology for how to break down LCP into its most critical sub-parts and then present specific recommendations and best practices for how to optimize each part. Optimizing for LCP is a complex task, and with complex tasks it's generally better to break them down into smaller, more manageable tasks and address each separately. To improve LCP you have to look at the entire loading process and make sure every step along the way is optimized. It's rare that a quick fix to a single part of a page will result in a meaningful improvement to LCP. ![]() There are a number of factors that can affect how quickly the browser is able to load and render a web page, and blockage or delays across any of them can have a significant impact on LCP. To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits. Specifically, LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. Largest Contentful Paint (LCP) is one of the three Core Web Vitals metrics, and it represents how quickly the main content of a web page is loaded.
0 Comments
Read More
Leave a Reply. |