Bạn định bấm vào một link thì ảnh phía trên tải xong và đẩy cả trang xuống, thế là bấm nhầm. Hiện tượng này gọi là layout shift, được đo bằng chỉ số CLS (Cumulative Layout Shift) trong Core Web Vitals. CLS tốt khi dưới 0,1.
Vì sao layout shift xảy ra?
- Ảnh và video không khai báo kích thước.
- Quảng cáo, iframe nhúng được chèn vào sau khi trang đã hiển thị.
- Web font tải chậm làm chữ đổi kích thước.
- Nội dung được JavaScript chèn lên phía trên phần người dùng đang xem.
Khai báo width và height cho ảnh
Trình duyệt hiện đại tự tính tỉ lệ khung từ hai thuộc tính này và giữ chỗ trước khi ảnh tải xong:
<img src="anh.jpg" width="1200" height="675" alt="Mô tả ảnh">Kết hợp với CSS img { max-width: 100%; height: auto; } để ảnh vẫn co giãn theo màn hình.
Dùng aspect-ratio cho khung media
Khi khung hiển thị có tỉ lệ cố định khác với ảnh gốc, hãy dùng thuộc tính aspect-ratio:
.thumb {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Video và iframe nhúng
iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}Giữ chỗ cho nội dung động
Với quảng cáo hoặc khối tải bằng JavaScript, đặt min-height bằng kích thước dự kiến. Thà để một khoảng trống nhỏ còn hơn đẩy cả trang xuống.
Font chữ
Dùng font-display: swap và chọn font dự phòng có kích thước gần giống font chính. Dùng font hệ thống thì không phải lo vấn đề này.
Đo CLS ở đâu?
- PageSpeed Insights: điểm CLS và phần tử gây xô lệch.
- Chrome DevTools, tab Performance: đánh dấu từng lần layout shift.
- Thư viện web-vitals: đo CLS của người dùng thật.
Xem thêm các tối ưu khác trong bài 100 điểm PageSpeed cho WordPress.