Cumulative Layout Shift (CLS)
Tóm tắt
Đo tổng layout shift bất ngờ — khi nội dung nhảy vị trí không do bạn bấm. Mục tiêu ≤0.1, thường do ảnh thiếu kích thước hoặc quảng cáo inject.
Giải thích đơn giản
Bạn đang đọc bài báo, sắp bấm link thì quảng cáo xuất hiện đẩy mọi thứ xuống — bạn bấm nhầm quảng cáo. Rất khó chịu! CLS đo chính xác mức độ "nhảy" đó.
CLS đo tổng layout shift không mong muốn trong suốt vòng đời trang. Layout shift xảy ra khi phần tử thay đổi vị trí mà không có user interaction. Ngưỡng tốt: ≤0.1, cần cải thiện: 0.1-0.25, kém: >0.25.
Nguyên nhân CLS phổ biến: hình ảnh không có width/height attributes, ads/embeds inject không reserve space, web fonts gây FOUT (Flash of Unstyled Text), và dynamic content inject ở trên fold.
Cách tối ưu: luôn set width/height cho và
⚡Tại sao quan trọng
Layout shift gây khó chịu cho người dùng — đặc biệt khi đang đọc hoặc click. CLS kém có thể khiến người dùng bấm nhầm (quảng cáo, link sai). Google sử dụng CLS làm Core Web Vital ảnh hưởng xếp hạng.
🔍AiSEO kiểm tra thế nào
AiSEO đo CLS qua PageSpeed và CrUX, xác định các phần tử gây layout shift lớn nhất, kiểm tra width/height trên images, và đề xuất reserve space cho ads/embeds.
Điểm AiSEO
Đóng góp tối đa 15 điểm trong nhóm Performance. CLS: 5đ — ≤0.1: 5đ, 0.1-0.25: 2.5đ, >0.25: 0đ.
Độ khó sửa
Biên tập viên: Không áp dụng | Lập trình viên: Trung bình | AI Agent: Dễ