CSSCLS đo mức nội dung bị xê dịch ngoài ý muốn trong lúc trang tải. Ngưỡng tốt: ≤ 0.1.
Bốn nguồn gây dịch chuyển, xử lý theo thứ tự tác động:
1. Ảnh và video không có kích thước — nguyên nhân phổ biến nhất.
<img src="/hero.jpg" width="1200" height="630" alt=""> <!-- browser giữ chỗ theo tỉ lệ -->.media { aspect-ratio: 16 / 9; width: 100%; height: auto; }**2.
Nội dung chèn động** — banner, quảng cáo, khung nhúng.
.ad-slot { min-height: 250px; } /* giữ chỗ trước, đừng để nó đẩy nội dung */**3.
Web font đổi kích thước chữ.**
@font-face {
font-family: 'Be Vietnam Pro';
src: url('/fonts/bvp.woff2') format('woff2');
font-display: swap;
size-adjust: 100%; /* căn metric với font dự phòng */
}4. Chèn nội dung phía trên vùng đang đọc — thông báo, thanh cookie xuất hiện muộn đẩy cả trang xuống. Nếu bắt buộc phải có, dùng overlay position: fixed thay vì chèn thẳng vào normal flow.
Lưu ý: CLS không chỉ đo lúc tải. Google tính cả dịch chuyển xảy ra sau tương tác (trừ 500ms ngay sau input của người dùng). Accordion mở ra đẩy nội dung là hợp lệ; nhưng một khối tự bung sau 3 giây thì bị tính.
Đo: Lighthouse cho dữ liệu lab, web-vitals + Search Console cho dữ liệu người dùng thật — hai con số này thường lệch nhau khá nhiều.