Ảnh thường là phần byte nặng nhất trên trang, nên tối ưu ảnh là cách cải thiện LCP lớn nhất. Ba đòn bẩy: format hiện đại, kích thước responsive, và priority khi tải.
AVIF và WebP nén nhỏ hơn nhiều so với JPEG/PNG ở cùng chất lượng (AVIF thường nhỏ hơn JPEG 50%). Phục vụ chúng kèm fallback để trình duyệt cũ vẫn chạy:
Đừng gửi ảnh 2000px cho điện thoại 400px. srcset để trình duyệt chọn đúng kích thước cho thiết bị:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes cho trình duyệt biết ảnh render rộng bao nhiêu để nó chọn nguồn nhỏ nhất mà vẫn đủ.
fetchpriority="high", loading="eager", và cân nhắc preload.loading="lazy" để chưa fetch cho tới khi cần.Luôn giữ width/height để tránh CLS.
LCP chậm thường chỉ là một ảnh hero quá khổ. Biết format (AVIF/WebP), srcset để lấy đúng độ phân giải, và priority đúng — cộng với không lazy-load ảnh LCP — là bộ công cụ thực tế mà người phỏng vấn mong đợi, và thường là thay đổi có tác động lớn nhất trên một site thật.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ