CLS là gì?

CLS là gì?

CLS (Cumulative Layout Shift) là chỉ số thuộc Core Web Vitals, đo tổng mức độ dịch chuyển bố cục bất ngờ của các phần tử trên trang trong suốt quá trình tải – ví dụ khi người dùng định click một nút nhưng nội dung đột nhiên đẩy nút xuống dưới do một hình ảnh hoặc quảng cáo vừa tải xong.

Ngưỡng đánh giá CLS

Khác với LCP/INP đo bằng thời gian, CLS là một điểm số không đơn vị, tính từ diện tích phần tử bị dịch chuyển nhân với khoảng cách dịch chuyển.

Nguyên nhân phổ biến gây CLS cao

• Hình ảnh/video không khai báo trước kích thước (width/height), khiến trình duyệt phải “nhường chỗ” đột ngột khi tải xong
• Quảng cáo, banner hoặc iframe chèn động vào giữa nội dung mà không dự trù không gian trước
• Web font tải chậm gây hiện tượng đổi font đột ngột (FOIT/FOUT) làm thay đổi kích thước văn bản
• Nội dung được chèn động qua JavaScript phía trên nội dung đã hiển thị

Cách cải thiện CLS

• Luôn khai báo thuộc tính width và height (hoặc dùng CSS aspect-ratio) cho mọi hình ảnh và video
• Dự trù sẵn không gian cố định cho vị trí quảng cáo, banner trước khi chúng tải xong
• Dùng font-display: optional hoặc preload web font để giảm dịch chuyển do đổi font
• Tránh chèn nội dung động (thông báo, popup) phía trên nội dung người dùng đang xem, trừ khi do tương tác trực tiếp của người dùng

CLS so với LCP và INP

Xem tổng quan tại bài Core Web Vitals là gì?. LCP đo tốc độ, INP đo khả năng phản hồi, còn CLS đo tính ổn định thị giác – ba khía cạnh độc lập của trải nghiệm tải trang.

Ví dụ debug CLS thực tế

Một trang tin tức có CLS 0,35 (mức Kém). Kiểm tra bằng Chrome DevTools (Performance panel, Layout Shift entries) phát hiện nguyên nhân chính: một banner quảng cáo được chèn động phía trên đoạn văn đầu tiên sau khi trang đã hiển thị được 2 giây, đẩy toàn bộ nội dung xuống. Giải pháp: dự trù sẵn một khối không gian cố định (kích thước tối thiểu) cho vị trí quảng cáo đó trước khi nó tải xong, giúp CLS giảm xuống 0,05 (mức Tốt) mà không cần gỡ bỏ quảng cáo.

CLS trên trang có nhiều hình ảnh

Các trang tin tức/blog có nhiều hình ảnh chèn giữa bài viết đặc biệt dễ gặp CLS cao nếu không khai báo kích thước ảnh trước – trình duyệt không biết trước ảnh cao/rộng bao nhiêu nên phải “dịch” nội dung bên dưới xuống khi ảnh tải xong. Khai báo width/height hoặc dùng CSS aspect-ratio giải quyết triệt để vấn đề này vì trình duyệt dự trù đúng không gian ngay từ đầu.

Những sai lầm thường gặp

• Chỉ kiểm tra CLS trên kết nối mạng nhanh – CLS thường nghiêm trọng hơn trên mạng chậm vì tài nguyên tải rời rạc, dễ gây dịch chuyển hơn
• Quên các quảng cáo/banner của bên thứ ba khi tối ưu CLS – đây là nguyên nhân phổ biến nằm ngoài kiểm soát trực tiếp nếu không dự trù không gian

CLS và quảng cáo – bài toán khó cân bằng

Quảng cáo là nguồn thu quan trọng với nhiều website nhưng cũng là nguyên nhân CLS phổ biến nhất vì kích thước quảng cáo thường không cố định và tải chậm hơn nội dung chính. Giải pháp cân bằng: dự trù kích thước tối thiểu cố định cho từng vị trí quảng cáo dựa trên kích thước quảng cáo phổ biến nhất, chấp nhận một khoảng trống nhỏ nếu quảng cáo nhỏ hơn dự kiến, thay vì để nội dung dịch chuyển hoàn toàn khi quảng cáo tải xong.

Câu hỏi thường gặp

CLS bằng 0 có khả thi không?

Về lý thuyết có thể, nhưng không bắt buộc – chỉ cần đạt ngưỡng “Tốt” (≤ 0,1) là đủ đáp ứng tiêu chuẩn Core Web Vitals của Google.

Animation trên trang có luôn gây CLS không?

Không phải mọi animation đều tính vào CLS – Google chỉ tính các dịch chuyển bố cục “bất ngờ”, animation dùng thuộc tính transform (không làm thay đổi luồng bố cục layout) thường không bị tính vào CLS.

Nguồn tham khảo

• web.dev (Google) – Cumulative Layout Shift (CLS)

Nguồn tham khảo

• web.dev (Google) - CLS