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.
Improve LCP: preload the hero image, never lazy-load the LCP element, serve WebP/AVIF, add fetchpriority="high", improve TTFB with a CDN — these are usually the main causes of LCP >2.5s.
- LCP measures the render time of the largest element in the viewport — typically a hero image, large text block, or video poster.
- Candidates: img, CSS background images, video (poster), block-level text.
- Improve TTFB first (it impacts LCP the most): server response time, CDN, edge caching.
- Image optimization: serve WebP/AVIF (25-50% smaller than JPEG), correct sizing (don't serve 2000px for a 400px container), use responsive images with srcset.
- Preload the LCP image: <link rel='preload' as='image' href='hero.webp'> in <head> — critical because browsers discover images late during parsing.
- Do not lazy-load the LCP image: loading='lazy' on a hero image significantly increases LCP — only lazy-load below-fold content.
- Eliminate render-blocking resources: defer/async non-critical JS, inline critical CSS, preconnect to third-party domains. fetchpriority='high' attribute on the LCP image hints the browser to prioritize the fetch.
- Next.js next/image handles automatically: format conversion, responsive sizes, lazy loading by default (use priority prop to disable for the LCP image).
- Common pitfall: LCP image discovered late because it is set via CSS background-image — browser cannot discover it until CSS is parsed; use <img> instead of CSS background for the LCP element.