Lighthouse Check
Lighthouse is an open-source tool, used to improve the overall performance of web pages, by rate measuring the quality of each page within your website. It can be run against any web page, public or private. The 6 main performance metrics are as follows:
- First Contentful Paint
- Largest Contentful Paint
- Speed Index
- Total Blocking Time
- Cumulative Layout Shift
- Time to Interactive
In this post, we'll focus on the second of these metrics - Largest Contentful Paint, or LCP.
What is LCP?
The Largest Contentful Paint (LCP) Lighthouse performance metric measures the time it takes for the largest element in the viewport to be rendered, from when the page initially starts loading.
How is LCP measured?
The elements that are considered for LCP, are:
<img>elements<image>elements inside an<svg>element<video>elements- Background images loaded via a URL
- Block-level elements containing text elements
The size of the element that’s reported on for the LCP score only refers to the size visible within the user’s viewport. For example, if a large image file has been scaled down, or if only a part of it is within the viewport, this is all that will be included within the load time measurement. Portions of the file that aren’t visible, will not count towards the size.
If an image is displayed smaller than the actual file size, the displayed size will be reported. If the image has been stretched above its highest resolution, the file size will be reported.
For text elements, only the size of their text nodes is considered (the smallest rectangle that encompasses all text nodes).
The CSS styles (margins, borders or padding) for all elements, are not included and will not be considered within the report.
How to improve LCP
The main factors that affect the LCP score, are:
- Slow server response times - Server response times can be improved by optimizing the server your website is running on, for example, ensuring there are no complex server-side operations that need to be run before any site content can be returned.
- Render-blocking JavaScript and CSS – If the browser encounters any external stylesheets or JavaScript when parsing the HTML of the page, the parser will pause, adding to the load time. Therefore, it’s important to identify non-critical CSS and JS.
- Resource load times – The time it takes to load resources within the page will directly impact the LCP score. It’s important that images are optimized and compressed where necessary, any large resources are pre-loaded and text files are compressed. It is also helpful to use adaptive serving, which is where different sized assets are delivered, based on the network connection in use.
- Client-side rendering – When using client-side rendering, it’s important to minimize critical JS so that the user isn’t required to wait until it’s completely finished rendering before they’re able to see or interact with the page.
With an automated testing service such as Metritool, you can generate a report on your website, retrieve your LCP score and a series of suggestions on how it may be improved.
