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.
- Automatic Lazy Rendering - Delays the rendering of distant elements from the fold can help render the LCP element faster (especially noticeable on pages that contain several elements that had been lazily rendered).
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.
Phases of the LCP element
The LCP element processing is calculated based on four phases: TTFB, Load delay, Load time and Render delay. PageSpeed will show a percentage and timings for each component.
TTFB
The page’s TTFB influences this component.
Using WP Rocket's page cache or server cache should help. If still needed, consider using page caching served from a proxy, like Cloudflare, or from a CDN (if it supports page caching).
Load delay
It represents the time that the asset has to wait in line before the browser can start loading it.
WP Rocket's Remove Unused CSS and Optimize critical images features will help.
If further improvement is still required, consider reducing the amount of fonts preloaded by Remove Unused CSS, as per this. Additionally, reduce the priority given to other page elements.
Load time
Load time is the network duration influenced by the visitor's distance from the server and the size of the LCP element.
Using a CDN (such as RocketCDN), compressing the image, and using next-gen formats may help.
Render delay
Render time is the time needed for the browser to actually display the LCP element. Themes or page builders heavy on JavaScript, like Avada or Elementor will usually have a bad render time.
WP Rocket impact is very limited on this phase, but in general terms, WP Rocket could help by reducing the amount of CSS with Remove Unused CSS, and by optimizing the JavaScript assets with Delay JavaScript execution, Load JavaScript Deferred, and Replace YouTube iframe with preview image.