Core Web Vitals đo gì, và LCP chậm thì bạn sửa thế nào?

Với ảnh LCP, lỗi phổ biến nhất không phải ảnh nặng mà là ảnh được PHÁT HIỆN muộn. Nếu ảnh nằm trong CSS background hoặc do JavaScript chèn vào, trình duyệt chỉ biết tới nó sau khi đã tải và chạy xong những thứ khác. Cách chữa rẻ nhất là đặt nó thành <img> thật trong HTML với fetchpriority="high", và tuyệt đối không loading="lazy" cho ảnh nằm trong màn hình đầu — đây là một trong những cách phổ biến nhất để tự làm hỏng LCP.

INP khó hơn LCP vì nó đo cả VÒNG ĐỜI của một tương tác: độ trễ đầu vào, thời gian chạy handler, và thời gian trình duyệt vẽ lại. Nghĩa là một handler nhanh vẫn cho INP tệ nếu nó gây ra một lần render lại tốn kém. Cách chữa thường là cắt công việc: cập nhật phần giao diện phản hồi ngay, rồi nhường luồng chính (await scheduler.yield() hoặc setTimeout) trước khi làm phần nặng, để trình duyệt kịp vẽ.

Điều quan trọng về cách đo: Lighthouse là dữ liệu phòng thí nghiệm trên một cấu hình giả lập, còn CrUX là dữ liệu người dùng thật và đó mới là thứ dùng để xếp hạng. Hai nguồn này thường bất đồng, và khi bất đồng thì dữ liệu thật đúng. INP đặc biệt khó đo bằng lab vì nó cần tương tác thật — Lighthouse không bấm vào gì cả, nên nó chỉ ước lượng.