Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) là chỉ số đo lường mức độ dịch chuyển bất ngờ của các phần tử trên trang web trong quá trình tải và tương tác. Nói cách khác, nó ghi lại xem nội dung có “nhảy lung tung” khi người dùng đang đọc hoặc chuẩn bị nhấn vào một nút hay không — ví dụ: ảnh chưa tải xong khiến văn bản đẩy xuống, quảng cáo xuất hiện giữa chừng làm nút CTA biến mất, hay tiêu đề tự dãn ra sau khi font tải xong.

CLS được tính bằng tổng các layout shift scores xảy ra từ lúc bắt đầu tải trang đến khi trang ổn định hoàn toàn (thời điểm visibilityState chuyển sang hidden hoặc người dùng rời tab). Mỗi lần dịch chuyển được tính dựa trên hai yếu tố: tỷ lệ vùng ảnh hưởng (impact fraction) và tỷ lệ khoảng cách dịch chuyển (distance fraction). Giá trị CLS là số thập phân, càng gần 0 càng tốt.

Theo Google, ngưỡng chấp nhận được là CLS ≤ 0.1. Từ 0.1 đến 0.25 là mức cần cải thiện; trên 0.25 là kém — gây trải nghiệm người dùng xấu và ảnh hưởng tiêu cực đến thứ hạng tìm kiếm.

Tại sao quan trọng trong SEO?

CLS là một trong ba chỉ số Core Web Vitals — nhóm tiêu chí đánh giá trải nghiệm người dùng do Google công bố chính thức từ năm 2021. Từ tháng 6/2021, CLS trở thành yếu tố xếp hạng trực tiếp trên cả tìm kiếm di động và máy tính.

Một trang có CLS cao thường đi kèm với:

• Tỷ lệ thoát (bounce rate) tăng — người dùng rời đi vì khó tương tác;
• Tỷ lệ chuyển đổi giảm — khách hàng bấm nhầm nút hoặc bỏ giỏ hàng;
• Thời gian tương tác ngắn hơn — do nội dung không ổn định, gây khó chịu;
• Khả năng được Google ưu tiên hiển thị trong kết quả tìm kiếm thấp hơn.

Điều này không có nghĩa Google “trừ điểm” từng trang theo công thức cố định, mà CLS góp phần vào đánh giá tổng thể về chất lượng trải nghiệm — yếu tố ngày càng chiếm tỷ trọng lớn trong thuật toán xếp hạng.

Cách hoạt động

CLS được tính toán dựa trên từng sự kiện layout shift xảy ra trong vòng đời trang. Một layout shift chỉ được ghi nhận nếu đáp ứng đồng thời hai điều kiện:

1. Có ít nhất một phần tử visible (không bị ẩn bằng display: none hay visibility: hidden) thay đổi vị trí trong khung nhìn (viewport);
2. Sự thay đổi đó không do hành động chủ động của người dùng (ví dụ: cuộn, nhấn, nhập liệu).

Mỗi lần dịch chuyển tạo ra một layout shift score = impact fraction × distance fraction. Trong đó:

• Impact fraction: diện tích vùng bị ảnh hưởng chia cho diện tích viewport (tính theo pixel);
• Distance fraction: khoảng cách lớn nhất mà bất kỳ phần tử nào dịch chuyển theo chiều dọc hoặc ngang, chia cho chiều cao hoặc chiều rộng viewport — lấy giá trị lớn hơn trong hai hướng.

CLS cuối cùng là tổng các score của tất cả các shift trong phiên, nhưng chỉ tính những shift xảy ra trong cùng một session window (khoảng thời gian 5 giây liên tục, với mỗi lần cách nhau dưới 1 giây được gom chung).

Hướng dẫn thực hiện

Để đạt CLS ≤ 0.1, bạn cần kiểm soát mọi yếu tố gây dịch chuyển bố cục. Dưới đây là các bước thực tế, ưu tiên theo mức độ ảnh hưởng:

1. Đặt kích thước cố định cho ảnh và video: Luôn khai báo width và height trong thẻ <img>, <video> hoặc dùng CSS aspect-ratio. Tránh để trình duyệt phải “đo lại” kích thước sau khi tài nguyên tải xong.
2. Tránh chèn nội dung phía trên nội dung hiện có: Không thêm quảng cáo, banner, thông báo (toast) hoặc widget ở đầu trang sau khi trang đã hiển thị một phần.
3. Dùng font có kích thước dự phòng (font-display: swap): Đảm bảo văn bản hiển thị ngay bằng font hệ thống, sau đó thay thế bằng font tùy chỉnh — tránh hiện tượng “FOIT” (Flash of Invisible Text) hoặc “FOUT” gây dịch chuyển dòng.
4. Giới hạn hiệu ứng CSS gây thay đổi layout: Tránh dùng transform: scale(), position: absolute không kèm top/left rõ ràng, hoặc margin-top động dựa trên JS.
5. Tối ưu hóa iframe và widget bên ngoài: Đặt width, height, và sandbox; dùng loading="lazy" cho iframe không nằm trong khung nhìn ban đầu.

Lỗi thường gặp

Lỗi	Nguyên nhân	Cách khắc phục
Ảnh không có kích thước rõ ràng	Thẻ <img> thiếu thuộc tính width/height → trình duyệt không dành chỗ trước	Thêm width & height tĩnh hoặc dùng CSS aspect-ratio: 4/3; + object-fit: cover;
Font tải chậm gây dịch chuyển dòng	Font tùy chỉnh chưa tải xong → trình duyệt hiển thị font hệ thống rồi thay thế	Dùng @font-face với font-display: swap; và preload font quan trọng qua <link rel="preload">
Quảng cáo hoặc widget chèn động	Script quảng cáo chạy sau khi DOM đã render → đẩy nội dung xuống	Dành sẵn khối (container) có chiều cao cố định; dùng lazy-loading và giới hạn kích thước tối đa

Ví dụ thực tế

Một trang tin tức có bài viết với 3 ảnh không khai báo kích thước. Khi tải, trình duyệt hiển thị văn bản trước, sau đó từng ảnh lần lượt tải xong và đẩy đoạn văn phía dưới xuống — mỗi lần như vậy tạo một layout shift. Tổng CLS đo được là 0.38.

Sau khi sửa: tất cả ảnh đều có width="600" height="400" và CSS max-width: 100%; height: auto;. Đồng thời, tiêu đề bài viết dùng font được preload và hiển thị ngay bằng font hệ thống. Kết quả: CLS giảm còn 0.06 — đạt mức tốt theo tiêu chuẩn Google.

Một ví dụ khác: trang sản phẩm có nút “Thêm vào giỏ” nằm ngay dưới ảnh. Nếu ảnh tải chậm và không có placeholder, nút sẽ “nhảy” xuống dưới khi ảnh xuất hiện — người dùng có thể bấm nhầm hoặc bỏ qua. Việc đặt aspect-ratio và background-color nhẹ cho ảnh giúp giữ vị trí nút ổn định.

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

CLS được đo ở đâu?

CLS được thu thập từ dữ liệu thực tế (field data) qua Chrome User Experience Report (CrUX), và cũng có thể kiểm tra trong môi trường phát triển qua Lighthouse, WebPageTest hoặc DevTools (tab Performance → chọn “Layout Shifts”). Lưu ý: kết quả lab (Lighthouse) có thể khác field data do điều kiện mạng, thiết bị và hành vi người dùng.

CLS có áp dụng cho trang AMP không?

AMP không loại trừ CLS — trang AMP vẫn phải đạt CLS ≤ 0.1 để được xếp hạng tốt. Tuy nhiên, do AMP buộc quy tắc về kích thước tài nguyên và giới hạn script, nên CLS thường thấp hơn trang HTML thông thường. Nhưng nếu dùng widget AMP không đúng cách (ví dụ: <amp-ad> không đặt height), vẫn có thể gây layout shift.

Có thể bỏ qua CLS nếu trang chỉ dùng nội bộ?

Nếu trang không xuất hiện trên Google (có thẻ noindex hoặc chặn qua robots.txt), CLS không ảnh hưởng đến thứ hạng. Tuy nhiên, về mặt UX, chỉ số này vẫn quan trọng để đảm bảo người dùng không gặp khó khăn khi tương tác — đặc biệt với hệ thống nội bộ có nhiều form, bảng biểu hoặc dashboard.