Largest Contentful Paint (LCP)
What is Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) is the time it takes for the largest visual or text area to appear in the visible area during page load.
A score is determined according to the loading time of the page. LCP score should be 2.5 seconds or less for a good user experience.
| Good | Needs Improvement | Poor | |
|---|---|---|---|
| Largest Contentful Paint (LCP) | ≤2500ms | 2500ms > needs improvement < 4000ms | >4000ms |
Note: When evaluating Google LCP performance, it looks at 75% of all users who come to the page. For example, if 75% of users who come to the page get an LCP score under 2 seconds and 25% get an LCP score over 2.5 seconds, this page’s score is considered “good”.
Elements Considered for LCP on the Page
- <img> Tags
- <image> Tags Inside <svg> Tag
- <video> Tag
- Background images added using CSS url()
- Block-level or Inline-level Elements with Text
Things To Do To Improve Your LCP Score
You can improve the LCP score when you follow the items below.
Remove Unused Javascript and CSS
CSS and JS codes that are not used on the pages create extra load, thus reducing page opening performance. Optimized CSS and JS codes help page load performance.
You can use the Google Inspect tool’s Coverage feature to see unused JS and CSS code.
Use Efficient Images (Optimized Images)
Optimized images with low file size increase page load performance because they have less file size. You can compress images using an online image compression tool or you can compress images with Adobe Photoshop.
Image optimization in CMS structures such as Drupal, Joomla, Magento, and WordPress. You can use plugins that do it.
Use WebP or AVIF Image Format
Using WebP or AVIF image formats, which are more compressed than JPEG or PNG formats, will have a major impact on the LCP score.
WebP Express plugin can be used to convert images to WebP format in WordPress infrastructure.
If a small number of individual images are to be converted, the online tools JPG to WebP for JPEG and PNG to WebP for PNG format can be used.
LCP Score Overlay On Page
To view the web page’s LCP score on the page, open the Inspect tool in Google Chrome. For Mac Os (Command + Shift + P), for Windows (Ctrl + Shift + P), type “Show Core Web Vitals overlay” in the window opened and press “Enter” or click the three dots on Inspect and click “Run command”.
On the screen that opens, you can see the Largest Contentful Paint value and other Core Web Vitals metric values for the page.
