Large Contentful Paint (LCP) is one of the most recent Google user experience metrics that became a major ranking factor in 2021.
In the past, it was very difficult for web developers to measure how quickly the main content of a web page loads and is visible to users. There have been various user metrics like Speed Index (SI), First Meaningful Paint (FMP) has been used in time past to capture more of the loading experience after the initial load, 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.
You will agree with me that simpler is better. A discussion was held by the W3C Web Performance Working Group. The result of the research done at Google proves that a more accurate way to measure the main content of a page is to look at when the largest element was rendered.
What is Largest Contentful Paint (LCP)?
The Largest Contentful Paint (LCP) is a core web vitals that measures how long it takes the largest content on a website to become visible within the viewport, relative to when the page first started loading.
In simple terms, it is how Largest Contentful Paint (LCP) is measured by how long it takes the largest content on a webpage – images, text and more to load.
What is a good LCP score?
Since Largest Contentful Paint (LCP) is one of the major ranking factors for Google search engines, having a good LCP for your website will lead to an increment in rankings.
A webpage is said to have a good user experience if the Largest Contentful Paint (LCP) is equal to or less than 2.5 seconds. To ensure you’re hitting this target for a high number of your users, it is great to measure the 75th percentile of page loads, segmented across mobile and desktop devices. This is a good threshold.
What elements are for Largest Contentful Paint (LCP)?
The following elements can be considered as Largest Contentful Paint (LCP).
- img elements
- image elements inside an svg element
- video elements (the poster image is used)
- An element with a background image loaded via the url() function (as opposed to a CSS gradient)
- Block-level elements containing text nodes or other inline-level text elements children.
Note, restricting the elements to this limited set was intentional to keep things simple in the beginning. Additional elements (e.g. svg, video) may be added in the future as more research is conducted.
It is important to emphasize that an element is considered the largest contentful paint (LCP) element if it has been rendered and is visible. This means that large content down the page doesn’t affect LCP time.
How is an element’s size determined in LCP?
The actual size of a resized element cannot be measured. So, the size which is output is either the visible size or intrinsic size.
The size of an element is the size that is visible to a user within the viewport. Once the element extends outside the viewport, it doesn’t count.
The size of the text elements is usually determined by their text nodes.
For all types of elements, margin, padding, or border applied via CSS is not considered.
When is the largest contentful paint reported?
Once a user visits a webpage, the webpage loads in stages. So, it is possible that the largest element on the webpage might change after the page loads.
There is a system put in place which makes it possible to identify the largest contentful paint (LCP) in this scenario. The browser dispatches a PerformanceEntry which identify the largest contentful element as soon as the browser has painted the first frame. But, the browser dispatches another PerformanceEntry once the other part of the webpage loads and the largest contentful element changes.
For example, The largest contentful paint of a webpage where text is the first thing to become visible. It will dispatch PerformanceEntry which will identify the text as the largest contentful paint. Once the rest of the page loads and the browser identified another content as the largest contentful paint, It dispatches another PerformanceEntry which then identify the other content as the largest contentful paint.
As soon as the user interacts with the page (mostly via scroll, tap or keypress), the browser will stop reporting new entries. Then, the most recently dispatched PerformanceEntry becomes the paint.
Why is LCP Measured?
LCP measures how fast a webpage loads. This is why it is one of the key metrics for the core web vital score. It is also easy to measure and optimize.
Largest Contentful Paint (LCP) is very easy to measure because all you need to do is to look at the largest content (text block or image) on your webpage and optimise them by either making it smaller or removing anything that is preventing it from loading quickly.
While optimizing LCP, it is advisable to optimise for mobile viewport first, then desktop.
How to Get the LCP Score
All scoring tools for LCP are divided into two classes, they are:
#1. Field tools
Field tools are tools that are used for the actual measurements of a webpage. An example of this is PageSpeed Insights, Search Console (Core Web Vitals report), Chrome User Experience Report and web-vitals JavaScript library.
#2. Lab tools
Lab tools are one that provides a virtual score based resulted generated from crawl using algorithms that approximate Internet conditions that a typical user on a mobile phone might encounter. An example of this is Chrome DevTools, Lighthouse and WebPageTest.org.
What causes a slow Largest Contentful Paint?
Measurement tools such as the Chrome User Experience Report, PageSpeed Insights, and Search Console (Core Web Vitals report) will show you how long it takes to load the LCP.
In most cases, poor LCP is usually caused by one or more of the following:
- Slow server response times
- Render-blocking JavaScript and CSS
- Slow resource load times
- Client-side rendering
How to Optimize and Improve LCP time
#1. Slow server response times
A webpage is to have a bad Largest Contentful Paint (LCP) when it takes the browser a long time to receive content from the server. A faster server response time will lead to an improvement of every single page-load metric, including LCP.
In order to make your server response time faster, you need to:
- Optimize your server
- Route users to a nearby CDN
- Cache assets
- Serve HTML pages cache-first
- Establish third-party connections early
- Use signed exchanges
#2. Render blocking JavaScript and CSS
The browser needs to parse HTML markup into a DOM tree before it can render any content. Usually, once the HTML parser encounters any external stylesheets (<link rel=”…”) or synchronous JavaScript tags (<script src="main.js">), it will pause its operation.
It is good to emphasize that scripts and stylesheets are both render-blocking resources that delay FCP and consequently LCP.
#1. Reduce CSS blocking time
You can reduce any necessary CSS that is causing a render block for your website by:
- Minify CSS
- Defer non-critical CSS
- Inline critical CSS
#2. Reduce JavaScript-blocking time
Once JavaScript-blocking time is reduced, it leads to an improvement in the Largest Contentful Paint (LCP).
You can optimise your JavaScript and reduce Javascript blocking time by:
- Minifying and compressing JavaScript files
- Deferring unused JavaScript
- Minimizing unused polyfills
#3. Slow resource load times
Apart from every component that affects LCP measured above, a slow resource is one main component too.
The types of resources that affect Largest Contentful Paint (LCP) are:
<img>elements<image>elements inside an<svg>element<video>elements (the poster image is used to measure LCP)- An element with a background image loaded via the
url()function (as opposed to a CSS gradient) - Block-level elements containing text nodes or other inline-level text elements
The time it takes to load the type of component mentioned above can affect the LCP. Remember, “faster load leads to an improved LCP”. There are a few ways to ensure these files are loaded very fast, they are:
- Optimize and compress images
- Preload important resources
- Compress text files
- Deliver different assets based on the network connection (adaptive serving)
- Cache assets using a service worker
#4. Client-side rendering
If you are building a website and rendering it on the client-side, it affects LCP when there are too many processes to carry out.
JavaScript is one of the most popular programming languages for client-side rendering. Many websites use it. Frameworks and libraries, like React, Angular, and Vue, have made building single-page applications easier. These applications handle different facets of a web page entirely on the client rather than on the server.
An optimized page using client-side rendering technology will prevent users from seeing and deny them the ability to interact with the content of the page until all JavaScript content has finished downloading and executing.
The following optimizations should be considered when rendering website on the clients’ side:
- Minimize critical JavaScript
- Use server-side rendering
- Use pre-rendering
#5. VitalFrog
VitalFrog gives you an easy-to-use dashboard that visualizes your current web vital health for all your team members. It is one of the fastest and stress-free way to improve your largest contentful paint (LCP).
Why VitalFrog?
- Field data: We found lab data being an unreliable source of information as of why VitalFrog uses field data which is gathered from real users of your site.
- Release tagging: The VitalFrog snippet gives you a function to automatically tag your current release. This allows you to exactly find out what code change broke your core web vitals
- Fully GDPR compliant: We gather your performance data via an anonymous Chrome API and no personal identifiable data about your users is stored at VitalFrogs servers. This results in no cookie banner being required.
- Unlimited sub-pages & users: No artificial limits: After including the above JavaScript snippet, VitalFrog automatically monitors all the pages where the snippet is included. Your dashboard can be shared with as many people as you want.