What is LCP?:
If we talk about Largest Contentful Paint (LCP), This metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.
What is a good LCP score?:
- 1st point is to provide a good user experience, websites should strive to have Largest Contentful Paint of 2.5 seconds or less.
- 2nd point is a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
What elements are considered in LCP?:
The types of elements considered for Largest Contentful Paint are:
<img> elements, <image> elements inside an <svg> element, <video> elements with a poster image, an element with a background image loaded via the url() function, and block-level elements containing text nodes or other inline-level text elements children.
Certain heuristics are applied to exclude certain elements that are likely to be seen as ‘non-contentful’ to users.
How is an element’s size determined?:
- The size of the element reported for Largest Contentful Paint is typically the size that’s visible to the user within the viewport.
- For 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.
- For text elements, only the size of their text nodes is considered.
- Any margin, padding, or border applied via CSS is not considered.
When is largest contentful paint reported?:
- 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.
- After rendering subsequent frames, it will dispatch another PerformanceEntry any time the largest contentful element changes.
- An element can only be considered the largest contentful element once it has rendered and is visible to the user.
- If an element that is currently the largest contentful element is removed from the viewport (or even removed from the DOM), it will remain the largest contentful element unless a larger element is rendered.
How are element layout and size changes handled?
- Changes to an element’s size or position do not generate new LCP candidates.
- Only the element’s initial size and position in the viewport is considered.
How to measure LCP ?
- Use field tools or lab tools to measure LCP.
- For analysis purposes, you should only report the most recently dispatched PerformanceEntry to your analytics service.
How to improve LCP?
- Optimize images and videos.
- Minimize render-blocking resources.
- Remove unnecessary third-party scripts.
Use a content delivery network (CDN):
Tools for measuring LCP:
LCP can be measured with various tools such as
- Chrome User
- Experience Report
- PageSpeed Insights
- Search Console
- Lighthouse
To measure LCP in JavaScript, developers can use the Largest Contentful Paint API or the web-vitals JavaScript library.
Differences between the metric and the API:
- The API may dispatch largest-contentful-paint entries for pages loaded in a background tab, but those pages should be ignored when calculating LCP.
- 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. To properly measure LCP, sub-frames can use the API to report their largest-contentful-paint entries to the parent frame for aggregation.
Improving LCP
Developers can optimize LCP by identifying LCP timings in the field and using lab data to drill down and optimize them.
Also Read: Understanding Cumulative Layout Shift (CLS) and its Impact on SEO
In cases where the most important element on the page is not the same as the largest element, developers can use the Element Timing API to measure the render times of these other elements instead.
Conclusion
In conclusion, Largest Contentful Paint (LCP) is a performance metric that measures the render time of the largest content element visible within the viewport of a web page. It is an important factor for providing a good user experience, with a recommended LCP score of 2.5 seconds or less. LCP considers elements such as images, text blocks, videos, and background images. Optimizing images and videos, minimizing render-blocking resources, removing unnecessary scripts, and utilizing a content delivery network (CDN) are some ways to improve LCP.