Largest Contentful Paint
Largest Contentful Paint (LCP) is one of the Core Web Vitals. This guide will explain what it is, how to analyze your page and how to improve this metric.
Overview of Largest Contentful Paint
Largest Contentful Paint is a Core Web Vital which is used to measure how quickly a site visitor will see useful content on the screen. If the LCP is too slow, the visitor will feel that the site is taking too long to load. Ideally, LCP is less than 2.5s.
Technically, LCP defines the loading time of the largest content element that is visible in viewport when a user opens a page. It can be text, image, video, etc.
LCP is primarily affected by four factors:
- Your server performance.
- Render-blocking JavaScript and CSS.
- The file size of the resource.
- The method that is used for the content to display (for example dynamically with JavaScript).
How to find the LCP element
With PageSpeed Insights:
In the PageSpeed Insights report, scroll down to the Largest Contentful Paint element recommendation, and expand it to view the element information.
How WP Rocket can improve LCP
WP Rocket features that would generally help:
- Optimize critical images - When the LCP element is an image, this option will instruct the browser to preload the image, to load it with priority, and to prevent it from being lazyloaded.
- Remove Unused CSS - This feature manipulates the CSS so that the page can be visualized faster. If Remove Unused CSS can't be used, Load CSS asynchronously can help.
- Delay JavaScript execution and Load JavaScript Deferred - These options help by reducing the impact on the main thread on page load.
- Page caching - Page caching improves loading time overall by serving a cached file where no PHP code is running.
These other options can also help:
Advanced recommendation within WP Rocket:
- The Remove Unused CSS option automatically preloads all the fonts used on a page. Sometimes, not all these fonts are critical assets.
Try removing all preloaded fonts with the WP Rocket | Disable Used CSS Fonts Preload helper plugin to see if the LCP is improved.
You can also customize which fonts are preloaded using the method described here.
Improving LCP when LCP element is an image
If you have found that the LCP element of a page is an image, you should keep in mind the following:
- Make sure that all relevant WP Rocket options are active and applied to your site.
Please also follow these additional instructions:
- Make sure no other third party lazyloading is applied to the LCP image.
- Optimize and resize images (Imagify plugin can help).
- Consider delivering images in AVIF or WebP formats (Imagify plugin can help).
- Deliver images using CDN (RocketCDN can help).
Improving LCP when LCP element is a video
- LazyLoad for videos and iframes option can help.
Other methods to improve LCP outside WP Rocket
- Use a static image instead of a slider.
- Add LCP element directly in the HTML of the page instead of loading it with JavaScript/CSS.
- Minimize the amount of critical JavaScript that is needed for displaying the content above the fold.
- Avoid placing large non-critical CSS code in the head.
- Avoid using
fetchpriority=highorrel=preloadon too many assets, or assets that are not critical for the rendering of the page. - Upgrade your hosting plan.