- Published on
Reducing Render Delay in `Largest Contentful Paint Elements`
- Authors
- Name
- hwahyeon
Largest Contentful Paint element
Largest Contentful Paint (LCP) measures the time it takes for the largest element within the viewport to render. While using Lighthouse, I encountered a warning about this metric.
| Phase | % of LCP | Timing |
|---|---|---|
| TTFB | 17% | 460 ms |
| Load Delay | 0% | 0 ms |
| Load Time | 0% | 0 ms |
| Render Delay | 83% | 2,180 ms |
The current LCP value is 2,640 ms (460 + 2,180), which exceeds the target of 2.5 seconds, indicating a need for optimization. The main issue is Render Delay, taking 2,180 ms and making up 83% of the total LCP.
Optimizing Render Delay:
- Separate critical CSS and defer non-essential styles (Critical CSS).
- Reduce JavaScript size by removing unnecessary libraries or using code splitting.
- Optimize images by reducing file size or converting to formats like WebP or AVIF.
- Apply
font-display: swapto reduce delays caused by web font loading.
I applied font-display: swap to address the Render Delay.