CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) là gì?

CLS — viết tắt của Cumulative Layout Shift — 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. Nói cách khác, nó ghi lại những lúc bạn đang đọc hoặc chuẩn bị nhấn vào một nút thì đột nhiên nội dung nhảy sang chỗ khác, khiến bạn bấm nhầm hoặc mất tập trung.

Google tính CLS bằng cách cộng dồn tất cả các lần dịch chuyển bố cục đáng kể xảy ra từ khi trang bắt đầu tải cho đến khi người dùng tương tác ổn định (thường là sau 5 giây đầu tiên hoặc đến khi trang hoàn toàn tương tác được). Giá trị CLS là một số thập phân không âm: càng gần 0, trang càng ổn định; giá trị ≥ 0,25 được coi là kém.

Tại sao quan trọng trong SEO?

CLS là một trong ba chỉ số Core Web Vitals do Google công bố chính thức, và được sử dụng trực tiếp trong xếp hạng tìm kiếm trên thiết bị di động từ tháng 6/2021. Nó phản ánh chất lượng trải nghiệm người dùng — yếu tố ngày càng quyết định vị trí hiển thị trên Google Search.

Một trang có CLS cao thường gây khó chịu, làm tăng tỷ lệ thoát, giảm thời gian ở lại và ảnh hưởng tiêu cực đến chuyển đổi. Google ưu tiên các trang mang lại cảm giác mượt mà, tin cậy và kiểm soát được — điều mà CLS thấp thể hiện rõ.

Lưu ý: CLS không ảnh hưởng trực tiếp đến thứ hạng nếu trang không đạt ngưỡng tối thiểu về trải nghiệm (ví dụ: không đạt 'tốt' theo tiêu chuẩn Core Web Vitals), nhưng nó là thành phần bắt buộc để được đánh dấu là 'trải nghiệm tốt' trong Google Search Console và có thể nhận ưu đãi hiển thị (như badge 'Trải nghiệm tốt' trong kết quả tìm kiếm).

Cách hoạt động

CLS được tính dựa trên hai yếu tố cho mỗi lần dịch chuyển:

• Impact Fraction: Tỷ lệ diện tích màn hình bị ảnh hưởng bởi sự dịch chuyển (tính theo % diện tích viewport).
• Distance Fraction: Khoảng cách lớn nhất mà một phần tử dịch chuyển theo chiều ngang hoặc dọc, chia cho chiều cao hoặc chiều rộng viewport (lấy giá trị lớn hơn).

Công thức cho mỗi lần dịch chuyển: Layout Shift Score = Impact Fraction × Distance Fraction. CLS tổng là tổng của tất cả các điểm số này trong suốt giai đoạn đo.

Chỉ những thay đổi do trình duyệt không thể dự đoán trước mới được tính — ví dụ: ảnh chưa đặt kích thước, quảng cáo chèn giữa nội dung, font tải chậm khiến văn bản nhảy (FOIT/FOUT), hoặc iframe không có thuộc tính width/height.

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

Để cải thiện CLS, bạn cần ngăn chặn các nguyên nhân gây dịch chuyển bố cục. Dưới đây là các bước cụ thể, áp dụng được cho hầu hết website:

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 (hỗ trợ từ Chrome 88+).
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 hoặc thông báo nổi (toast) vào đầu trang sau khi trang đã hiển thị một phần.
3. Tối ưu font web: Dùng font-display: swap để tránh FOIT; hoặc đặt size-adjust và descender-override nếu dùng font tùy chỉnh để giữ khoảng trắng phù hợp.
4. Giới hạn hiệu ứng CSS chuyển động: Tránh dùng transform, opacity trên các phần tử có thể thay đổi layout (như top, left). Thay vào đó, ưu tiên will-change: transform hoặc dùng transform: translate() cho animation.
5. Đảm bảo iframe có kích thước rõ ràng: Gán width, height hoặc dùng aspect-ratio; tránh để iframe tự co giãn theo nội dung bên trong.
6. Kiểm tra và loại bỏ JavaScript gây layout thrashing: Những đoạn script chạy đồng bộ, thay đổi DOM nhiều lần liên tiếp (đặc biệt trên DOMContentLoaded) có thể gây dịch chuyển. Dùng requestAnimationFrame hoặc batch thay đổi.

Lỗi thường gặp

Lỗi	Dấu hiệu	Cách khắc phục
Ảnh không có width/height	Ảnh xuất hiện muộn, đẩy nội dung phía dưới xuống	Thêm thuộc tính width và height tĩnh, hoặc dùng CSS aspect-ratio: 4/3 + object-fit
Quảng cáo động chèn vào DOM sau load	Nội dung nhảy lên/xuống khi banner xuất hiện giữa màn hình	Dành sẵn vùng trống (placeholder) có kích thước đúng; hoặc tải quảng cáo cùng lúc với nội dung chính
Font web tải chậm	Văn bản hiển thị tạm bằng font hệ thống rồi nhảy sang font gốc	Dùng @font-face với font-display: swap; preload font quan trọng qua <link rel="preload">
iFrame YouTube / Facebook không có kích thước	Khung video xuất hiện muộn, làm layout rung lắc	Đặt width/height tĩnh hoặc dùng aspect-ratio; thêm loading="lazy" nhưng không bỏ kích thước

Ví dụ thực tế

Một trang tin tức có bài viết dài, kèm 3 ảnh lớn và 1 video YouTube nhúng. Khi kiểm tra trên PageSpeed Insights, CLS đo được là 0,38 — mức 'kém'. Nguyên nhân xác định qua Chrome DevTools > Tab 'Experience' > 'Layout Shift Regions':

• Ảnh thứ hai thiếu height, chiếm 12% viewport và dịch chuyển xuống 80px → góp 0,096 điểm.
• Video YouTube nhúng không có kích thước, chiếm 20% viewport và dịch chuyển sang phải 50px → góp 0,11 điểm.
• Thanh quảng cáo 'Top Banner' được chèn bằng JavaScript sau 1,2s → chiếm 15% viewport và đẩy toàn bộ nội dung xuống 100px → góp 0,174 điểm.

Sau khi sửa: đặt width="600" height="400" cho ảnh, dùng aspect-ratio: 16/9 cho iframe, và thay thanh quảng cáo bằng placeholder tĩnh có chiều cao cố định — CLS giảm còn 0,07 ('tốt').

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

CLS có ảnh hưởng đến thứ hạng trên Google không?

Có — nhưng gián tiếp. CLS là một phần của Core Web Vitals, và Google xác nhận rằng trải nghiệm người dùng tốt (bao gồm CLS < 0,1) là tín hiệu xếp hạng trên thiết bị di động. Tuy nhiên, nó không phải yếu tố độc lập: một trang có CLS cao nhưng nội dung xuất sắc vẫn có thể xếp hạng cao — nhưng sẽ khó cạnh tranh nếu đối thủ vừa có nội dung tốt vừa có trải nghiệm vượt trội.

CLS được đo ở đâu? Chỉ trên mobile hay cả desktop?

Google đo CLS chủ yếu từ dữ liệu thực tế người dùng (Real User Monitoring – RUM) trên thiết bị di động, vì đây là môi trường dễ bị ảnh hưởng nhất. Dữ liệu này xuất hiện trong Google Search Console > Báo cáo Core Web Vitals. Trên desktop, CLS vẫn được thu thập nhưng không được dùng làm tiêu chí xếp hạng chính thức — tuy nhiên vẫn nên tối ưu để đảm bảo trải nghiệm đồng đều.

Tôi đã tối ưu hết rồi mà CLS vẫn dao động — tại sao?

CLS phụ thuộc nhiều vào điều kiện mạng và thiết bị người dùng. Một số yếu tố như tốc độ tải font, thời điểm hiển thị quảng cáo, hoặc hành vi tương tác (cuộn nhanh, nhấn vào menu) có thể gây dịch chuyển chỉ ở một số phiên. Nếu CLS dao động trong khoảng 0,05–0,12, đây là mức chấp nhận được. Trường hợp dao động mạnh (>0,15) cần kiểm tra lại dữ liệu RUM theo thiết bị, quốc gia và nguồn lưu lượng — vì có thể do một nhóm người dùng cụ thể gặp lỗi (ví dụ: plugin chặn quảng cáo làm mất placeholder).