Họ đang đo gì
Bạn có biết ảnh thường là phần nặng nhất của một trang không, và có biết những công cụ có sẵn.
Trả lời ngắn~30 giây
Thứ tự: gửi đúng kích thước hiển thị qua srcset (gửi ảnh 3000px cho một khung 400px là lãng phí 90% byte, và không có mức nén nào bù được), dùng định dạng hiện đại (AVIF hoặc WebP, thường nhỏ hơn JPEG 30–50%), lười tải những ảnh dưới màn hình bằng loading="lazy", và luôn khai width/height để không gây dịch chuyển bố cục. Ảnh LCP thì làm ngược lại: fetchpriority="high" và tuyệt đối không lazy.
Giải thích sâu
Chỗ hay bị làm sai là loading="lazy" áp cho MỌI ảnh, kể cả ảnh trong màn hình đầu. Trình duyệt khi đó hoãn tải nó cho tới khi biết chắc nó nằm trong khung nhìn, tức là sau khi bố cục xong — và nếu đó là ảnh LCP thì bạn vừa làm chỉ số quan trọng nhất tệ đi bằng một thuộc tính được thêm vào để cải thiện hiệu năng.
Về width/height: chúng không cố định kích thước hiển thị (CSS vẫn quyết định) — chúng cho trình duyệt biết TỶ LỆ để dành sẵn chỗ trước khi ảnh về. Thiếu chúng thì nội dung bên dưới nhảy xuống khi ảnh tải xong, và đó là nguồn CLS phổ biến nhất. aspect-ratio trong CSS làm được điều tương tự.
Câu hỏi tiếp theo họ sẽ hỏi
?CDN ảnh giải quyết được bao nhiêu phần?
Gần hết phần cơ học: nó tự đổi kích thước, tự chọn định dạng theo Accept của trình duyệt, và phục vụ từ vị trí gần người dùng. Thứ nó không làm thay bạn là quyết định ảnh nào ưu tiên và ảnh nào lười tải — đó vẫn là quyết định trong markup.
Trả lời thế này là mất điểm
- Chỉ nén ảnh mà vẫn gửi đúng một kích thước cho mọi thiết bị. Điện thoại vẫn tải file dành cho màn hình 4K.