Làm sao chẩn đoán và cải thiện LCP chậm?

Question

IT Interview Practice · Accepted Answer

Bắt đầu bằng việc tìm **phần tử LCP là gì** và **vì sao nó tới muộn**. LCP tách thành bốn phần con — sửa phần lớn nhất. ## Chẩn đoán: bốn phần con của LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server khi bắt đầu fetch tải ảnh xuống paint ra ``` Chrome DevTools và PageSpeed Insights cho thấy phần nào chiếm phần lớn thời gian. Thủ phạm thường gặp: server chậm (TTFB), ảnh LCP bị phát hiện muộn, hoặc script/CSS render-blocking trì hoãn paint. ## Sửa theo từng phần con - **TTFB chậm** → cache HTML ở CDN, dùng SSG/ISR, tăng tốc origin/database. - **Load delay (ảnh bị tìm thấy muộn)** → preload và nâng priority để trình duyệt fetch ngay thay vì sau CSS/JS: ```html

``` - **Load time (ảnh quá lớn)** → phục vụ AVIF/WebP, chọn đúng kích thước bằng `srcset`, nén lại. - **Render delay** → cắt CSS/JS render-blocking; inline critical CSS; `defer` script. ## Bẫy thường gặp - Lazy-load ảnh LCP (hoặc giấu nó sau hydration JS) — vết thương LCP tự gây phổ biến nhất. - Web font chặn text LCP; dùng `font-display: swap` và `preload` font. - Tối ưu LCP ở lab trong khi người dùng thật trên 4G vẫn chậm — luôn xác nhận bằng field data. ## Tại sao điều này quan trọng LCP là metric tải quan trọng nhất và là yếu tố xếp hạng tìm kiếm. Việc gọi tên được bốn phần con và ánh xạ mỗi phần tới một cách sửa cụ thể chính là cách tiếp cận có cấu trúc, dựa trên bằng chứng mà người phỏng vấn tìm kiếm.

Chẩn đoán: bốn phần con của LCP

Sửa theo từng phần con

Bẫy thường gặp

Tại sao điều này quan trọng

Câu hỏi liên quan