PerformanceLCP đo thời điểm render phần tử lớn nhất trong viewport — thường là hero image, block text lớn hoặc video poster. Good <2.5s, poor >4s.
Cách cải thiện:
- Cải thiện TTFB trước — server response time, CDN, edge caching; TTFB là phần nền của mọi LCP.
- Tối ưu ảnh — serve WebP/AVIF (nhỏ hơn JPEG 25–50%), đúng kích thước container, responsive srcset.
- Preload LCP image — <link rel='preload' as='image' href='hero.webp'> trong <head> + fetchpriority='high' để browser ưu tiên fetch sớm.
- Không lazy-load LCP image — loading='lazy' trên hero image làm LCP tăng đáng kể; chỉ lazy-load below-fold.
- Loại bỏ render-blocking resources — defer/async JS không critical, inline critical CSS, preconnect third-party domains.
- Next.js next/image — tự convert format, responsive size, lazy mặc định; thêm prop priority cho LCP image.
Lỗi hay gặp: LCP image đặt bằng CSS background-image bị discover trễ (browser phải parse xong CSS) — dùng <img> cho LCP element.