PerformanceCải thiện LCP: preload hero image, không lazy-load LCP element, serve WebP/AVIF, dùng fetchpriority="high", cải thiện TTFB với CDN — đây thường là nguyên nhân chính cho LCP >2.5s.
- LCP đo thời gian render phần tử lớn nhất trong viewport — thường là hero image, large text block, video poster.
- Candidates: img, image trong CSS background, video (poster), block-level text.
- Cải thiện TTFB trước (ảnh hưởng LCP nhất): server response time, CDN, edge caching.
- Image optimization: serve WebP/AVIF (25-50% nhỏ hơn JPEG), đúng kích thước (không serve 2000px cho 400px container), dùng responsive images với srcset.
- Preload LCP image: <link rel='preload' as='image' href='hero.webp'> trong <head> — critical vì browser discover image late trong parsing.
- Không lazy load LCP image: loading='lazy' trên hero image làm tăng LCP đáng kể — chỉ lazy load below-fold.
- Eliminate render-blocking resources: defer/async non-critical JS, inline critical CSS, preconnect đến third-party domains. fetchpriority='high' attribute trên LCP image hint browser prioritize fetch.
- Next.js next/image tự động: format conversion, responsive sizes, lazy load by default (priority prop để disable cho LCP image).
- Thường gặp: LCP image discovered late vì được set bằng CSS background-image — browser không discover cho đến khi parse CSS; dùng <img> thay vì CSS background cho LCP element.