What is Largest Contentful Paint (LCP)?
In the second part of our series, “Is my website’s performance good enough?”, we shall discuss Largest Contentful Paint (LCP). You can reach the first part of the series, “What is Cumulative Layout Shift (CLS)?” by clicking here.
One of the metrics that we have seen frequently popping up in the last two years, like CLS, and that we should consider while analysing the performance of our website is the Largest Contentful Paint (LCP). LCP is the time spent between when the website page starts to load until the largest element is fully painted. LCP represents 25% of the website performance metric based on the Web Vital criteria, so it should be considered as an important metric.
FCP (First Contentful Paint) should also be mentioned when discussing LCP as in most cases; these two metrics are confused with each other. FCP is the load time of the first visible item uploaded on the page. Therefore, it should be considered as a different element.
Image tags include the images in SVG tags, items in video tags, background images we add to our page using URL () and block-level HTML elements into the calculation of LCP.
Block-level HTML elements always start on a new line on the page and occupy the entire line’s entire width. For this reason, LCP is included in the calculation. You can learn more about block-level HTML elements from here.
How are Image Sizes Defined?
While calculating the LCP, image sizes also play a significant role. LCP is basically the area that the end-user sees on her screen when the image is fully painted. This area is defined as the smallest box containing the entire text, as we can see in Image 5. The green box in the image (when we remove the spaces on the sides) is the main area used in LCP calculation.
Additional spaces that we add to the images via CSS are not included in the LCP measurement.
In the above image, we can see the effect of LCP on user experience. The HERO IMAGE that we want to highlight on the page appears in 0.7 seconds on the red website while it loads much faster on the green website. In this example, assuming that the HERO IMAGE is the largest element, the LCP score will be 0.7s.
As you know, web pages are loaded on a basic flow. And since all elements are not loaded simultaneously, the largest element of the page is decided dynamically. For this process, PerformanceObserver API is used.
A performance entry is created for each uploaded element, and with this performance entry, the dimensions of the element are measured to determine whether it is the largest element loaded. While at first element X is the largest element, a larger element Y that is loaded afterwards is considered the largest element. This flow continues until the users’ first interaction with the page. The user can change the size of the elements with actions such as dragging and clicking. Meanwhile, while the X element is the largest element on the page, it will still remain the largest element if a new element larger than it is not loaded when X is removed from the page.
Below is an image showing the LCP metric range:
How to improve the LCP score?
The image sizes are essential for many performance metrics, especially the LCP score. We should arrange the sizes of the images as the end-user would actually see. For example, an image that would be seen in 300x400 dimensions should not be in 900x1200 format.
Although the loading of the images is related to their size, the CDN (Content Delivery Network) we offer to serve them is also important. So, TTFB and other network metrics should also be considered while analysing LCP scores. The upload time of elements from the servers should be at optimum. For more information on these upload times, you can visit here.
As mentioned in the CLS article, we should always follow the expressions below to provide a healthy user experience on our website.
- We should avoid unused and overly big images.
- We should make an image upload only when it is needed.
- We should make sure that the JavaScript, CSS, fonts, and similar elements are used in a minimal manner.
- We should track the performance of our website through the mentioned tools and report them regularly.
Thank you for taking the time to read our blog post.
Resources:
By Mustafa Biçer for Segmentify Dev Team
