Cách tối ưu Largest Contentful Paint (LCP) trong React/Next.js?

Question

Luyện Phỏng Vấn IT · Accepted Answer

LCP đo thời gian render element lớn nhất trên viewport — optimize bằng cách xác định đúng LCP element rồi tối ưu theo loại: image, text, hay video poster.

Target: <2.5s. Xác định LCP element: dùng Chrome DevTools Performance tab hoặc web-vitals library.

Tối ưu theo loại:

Image LCP: priority prop trong next/image, preload với <link rel='preload'>, avoid lazy load, dùng CDN, responsive sizes, WebP
Text LCP: font-display swap, preload font file, avoid web font nếu được (system font stack)
Video poster: preload poster image

Server optimizations: reduce TTFB (<600ms) bằng SSG/ISR/edge functions, streaming SSR.

Tránh: redirect chains, render-blocking CSS/JS lớn, client-side data fetch trước khi render LCP, quá nhiều third-party scripts (analytics, chat widgets). Trong Next.js: next/image với priority, next/font với display: swap, App Router streaming.