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.
In this article
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 (usually marked in gray) and expand it to view the element information.
With Chrome Dev Tools:
- Click the Performance tab
- Reload the page
- Find LCP in the results and click on it
- The Summary tab will have information about the element.
How WP Rocket can improve LCP
WP Rocket features that would generally help:
- Page Caching.
Page Caching improves loading time overall by serving a cached file where no PHP code is running.
- Optimize CSS delivery,
- Load JavaScript Deferred,
- Delay JavaScript Execution.
The options make CSS and JS files non-render-blocking that allows the content of the page to load faster.
- Minify CSS and JavaScript files,
- GZIP compression
These features reduce the size of the files, so the page content, including the LCP element, loads faster.
Improving LCP when LCP element is an image
Very often the LCP element is an image.
In some cases the LazyLoad for Images option may negatively impact the LCP. It takes longer for an image to appear when the LazyLoad script is loading the image.
In this case, disabling LazyLoad on the LCP image can help.
Follow these steps:
- Identify the LCP element with PageSpeed Insights test;
- Disable LazyLoad on the specific image.
Other suggestions that can improve LCP score:
- Optimize and resize images (Imagify plugin can help);
- Consider delivering images in WebP format (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 in the Media tab 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;
- Upgrade your hosting plan;