LCP breakdown
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how quickly the largest visible content element (image, text block, or video) appears in the viewport. A good LCP score is 2.5 seconds or less.
The LCP breakdown gives indications on which subpart is problematic and has to be improved.
See the official PageSpeed documentation.
Each subpart has specific improvement strategies. Ideally, most of the LCP time should be spent on loading the resources, not within delays
Understanding the LCP breakdown
LCP measures the time from navigation until the largest element above the fold is fully rendered. It consists of four phases:
- Time to First Byte (TTFB): Server response time.
- Resource Load Delay: Waiting before the LCP resource starts loading.
- Resource Load Duration: Time to fetch the resource (image, font, etc.).
- Element Render Delay: Time to render after resource load.
Slow LCP often results from heavy images, render-blocking CSS/JS, poor server performance, or delayed resource prioritization.
How to improve the LCP breakdown with WP Rocket
The LCP breakdown is an informative insight. To improve the LCP metric, use features like Remove Unused CSS and Delay JavaScript execution.
Please refer to the Largest Contentful Paint article to learn more details about what can be done within WP Rocket to improve it, and other methods to improve LCP outside WP Rocket.
How WP Rocket could make it worse
- LazyLoad for images: If applied to the LCP image, it delays rendering.
Fix: Exclude the LCP image from lazy-loading in WP Rocket settings.