Web Vitals: What is Largest Contentful Paint?
It measures page loading performance
Largest Contentful Paint, or 'LCP', evaluates a your web page loading performance.
LCP is a metric which measures the time at which the largest image or block of text is visible within the viewport.
This 'above the fold' image or text element is considered as important for the user and the loading performance of you're website.
Largest Contentful Paint is measured in seconds.
What is largest contentful paint target time?
To provide users a good experience, you should aim for a first input delay of 2.5 seconds or less.
What elements are considered in LCP scoring?
The following elements are considered for largest consideration paint:
<image>elements within an
<video>elements (the poster image is used)
- Block-level elements containing text nodes or other inline-level text elements children.
- An element with a CSS background image loaded via
url()(elements with CSS gradients are not considered)
Note, restricting the elements to this limited set was intentional in order to keep things simple in the beginning. Additional elements (e.g.
<video>) may be added in the future as more research is conducted.
My largest contentful paint score is above 2.5 seconds is this OK?
If your LCP score is above 2.5s then Google will label the scoring as Needs improvement and if it is above 4s then your score will be labeled Poor. You should try to ensure most of you users get an LCP score of 2.5s or under. Google suggests the 75th percentile of page loads, segmented across all devices as a good threshold.
If you're worried about how your largest contentful paint (LCP) scores will impact your search rankings, then use our SERP speed comparison tool to compare how other websites ranking for your target keywords / vertical measure up.
How can I optimize LCP time?
According to Google, largest contentful paint is primarily effected by four factors:
- Slow server response time
- Resource load times
- Client-side rendering
We'll cover ideas and solutions you can use to optimize for each of the LCP factors below.
Slow server response time
Slow server response time is the time which it takes your server to respond to requests from the users browser, there is a metric for this called Time To First Byte (TTFB) which can be helpful for assessing your server response time.
If you see your server is responding slowly then this is a good place to start with optimizing for LCP. But it is also one of the most difficult to optimize.
Common reasons for slow server response are:
- Low quality hosting - if you are hosting your website on cheap or shared hosting you may find it is not as responsive as a more premium hosting platform
- Old technology - as the web evolves, technologies powering it also get better and faster! If you're running a site on a server using older technology stacks, it can result in a slower response time.
- Inefficient backend code - inefficient code can cause the server response to become slow (for example if you website has backend logic which returns products or articles).
- No CDN / Cache - using a CDN and caching can have dramatic impact on server response time if you don't currently use a CDN then have a look at your options. There is free CDNs available.
script tags in the head of your website can code will cause the browser to pause parsing of your code until the file has been loaded and evaluated. You should move
<script> tags to the bottom of your HTML (just above the closing body tag -
You may also have CSS loaded in the head of your website and although this is where you want your style sheets to be loaded. If these are large files they can also impact LCP times. A better way of loading CSS is to inline the critical CSS (the styles needed for the 'above-the-fold' or 'hero' section of your page), and then async load the remaining CSS.
Easy Async CSS Loading:
<link href="/myCSSFile.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <noscript><link href="/myCSSFile.min.css" rel="stylesheet" /></noscript>
Notes: this should be used with caution, if your async load an entire page's CSS then you will cause negative impact to your cumlative layout shift since the browser will load the HTML without styles and then apply the styling once the CSS file is loaded, causing major shifts if element positioning.
Resource load times
Having large resources on your page will dramatically reduce load times and if the element flagged as LCP is heavy then this will cause a slow largest contentful paint. You should try compressing any images you have 'above the fold' as well as providing multiple sizes for the image to be loaded at a relevant size per device.
For example if you have a full width image in your header, you should provide multiple 'desktop' resolutions as well as tablet and one or two mobile size variations. With these variations and each image size being compressed you will drastically reduce the time needed to load the image and improve your LCP.
Another option (which won't impact as much as pre-rendering) is to preload the initial JS required for the app to load.
And (this is good practice for any SPA) you should be splitting code and lazy loading as required.