CLS là gì đang trở thành câu hỏi sống còn đối với giới Developer và SEO-er khi Google chính thức đưa tính ổn định của trang web vào tiêu chuẩn xếp hạng. Bạn đã bao giờ cảm thấy cực kỳ khó chịu khi đang chuẩn bị click vào một nút bấm thì bất ngờ một banner quảng cáo hiện ra, đẩy nút bấm đó xuống dưới và khiến bạn nhấn nhầm vào chỗ khác? Hiện tượng “giật khung hình” này không chỉ gây ức chế cho người dùng mà còn là dấu hiệu cho thấy website của bạn đang có điểm hiệu năng thấp.
Hiểu rõ về CLS sẽ giúp bạn xây dựng trải nghiệm người dùng mượt mà và duy trì vị trí vững chắc trên kết quả tìm kiếm.
CLS là gì?
CLS là gì? Viết tắt của Cumulative Layout Shift, đây là một chỉ số quan trọng trong bộ Core Web Vitals của Google dùng để đo lường mức độ ổn định bố cục (visual stability) của một trang web. Khác với các chỉ số đo tốc độ tải thuần túy, CLS tập trung vào việc ghi nhận các thay đổi vị trí không mong muốn của các phần tử trên màn hình trong suốt vòng đời của trang.
Về mặt kỹ thuật, mỗi khi một phần tử đang hiển thị thay đổi vị trí từ frame này sang frame khác mà không có sự tương tác chủ động từ người dùng, một “Layout Shift” sẽ được ghi lại. Điểm số CLS không dựa trên thời gian (mili giây) mà dựa trên một công thức tính toán độ dịch chuyển của phần tử so với khung hình hiển thị (viewport). Chỉ số này càng thấp đồng nghĩa với việc trang web càng ổn định, giúp người dùng dễ dàng theo dõi nội dung mà không bị phân tâm bởi các yếu tố “nhảy múa” bất thình lình.
Cách CLS hoạt động và công thức tính
Cơ chế hoạt động của CLS dựa trên việc theo dõi các thay đổi vị trí của các “unstable elements” (phần tử không ổn định). Trình duyệt sẽ ghi nhận mọi dịch chuyển và gom chúng vào các Session Window (cửa sổ phiên) kéo dài tối đa 5 giây. Điểm CLS cuối cùng được tính bằng tổng điểm của cửa sổ phiên có giá trị lớn nhất.
Để tính toán điểm số cho từng lần dịch chuyển, Google sử dụng công thức:
CLS = Impact Fraction * Distance Fraction
Trong đó:
- Impact Fraction (Phân đoạn ảnh hưởng): Đo lường phần diện tích viewport bị ảnh hưởng bởi sự dịch chuyển. Ví dụ, nếu một phần tử chiếm 50% khung hình và dịch chuyển xuống thêm 25% nữa, tổng diện tích bị ảnh hưởng là 75%.
- Distance Fraction (Phân đoạn khoảng cách): Đo lường khoảng cách lớn nhất mà phần tử đó đã di chuyển so với chiều lớn nhất của viewport (chiều dọc hoặc chiều ngang).
Quy trình ghi nhận diễn ra như sau: người dùng mở trang, trình duyệt render DOM ban đầu, sau đó các tài nguyên như ảnh, font hoặc quảng cáo load trễ làm thay đổi cấu trúc layout. Trình duyệt ghi lại, tính điểm và xuất ra báo cáo cuối cùng.
Ngưỡng CLS tốt, trung bình, kém
Để đánh giá một website có đạt chuẩn trải nghiệm người dùng hay không, Google đã đưa ra các mốc định lượng cụ thể cho chỉ số CLS. Bạn có thể tham khảo bảng tiêu chuẩn dưới đây để đối soát với website của mình:
| Chỉ số CLS | Đánh giá | Trạng thái thực tế |
| Dưới 0.1 | ✅ Tốt | Website rất ổn định, trải nghiệm mượt mà. |
| 0.1 – 0.25 | ⚠️ Cần cải thiện | Có hiện tượng dịch chuyển nhẹ, cần tối ưu lại tài nguyên. |
| Trên 0.25 | ❌ Kém | Bố cục nhảy loạn xạ, gây ảnh hưởng cực xấu đến UX/SEO. |
Thông thường, các website tối ưu tốt sẽ duy trì mức benchmark từ 0.02 đến 0.08. Những trang tin tức nhiều quảng cáo hoặc trang thương mại điện tử chưa tối ưu thường dễ rơi vào vùng “Kém” với mức điểm trên 0.2.
Cách kiểm tra CLS của website
Việc kiểm tra chỉ số CLS thường xuyên giúp bạn phát hiện sớm các vấn đề phát sinh sau mỗi lần cập nhật code hoặc nội dung. Có 3 công cụ phổ biến nhất hiện nay:
Dùng Google PageSpeed Insights
Đây là cách đơn giản nhất để xem dữ liệu thực tế (Field Data) từ người dùng thật. Bạn chỉ cần nhập URL, công cụ sẽ phân tích và hiển thị điểm CLS trung bình trong 28 ngày qua. PageSpeed Insights cũng liệt kê cụ thể những phần tử nào đang gây ra lỗi dịch chuyển bố cục lớn nhất để bạn sửa chữa.
Dùng Chrome DevTools
Đối với các Developer, tab Performance trong Chrome DevTools là “vũ khí” đắc lực. Bạn hãy mở DevTools (F12), chọn Record và tải lại trang. Sau khi dừng, hãy tìm dòng Layout Shifts. Khi di chuột vào các ô vuông đỏ, trình duyệt sẽ highlight trực tiếp phần tử bị nhảy trên màn hình kèm theo điểm số chi tiết.
Dùng Google Search Console
Search Console cung cấp báo cáo Core Web Vitals cho toàn bộ các trang trên domain. Tại mục “Trải nghiệm”, bạn có thể thấy danh sách các nhóm URL đang gặp vấn đề về CLS trên thiết bị di động hoặc máy tính để bàn, giúp bạn có cái nhìn tổng quan hơn về sức khỏe kỹ thuật của toàn site.
Cách cải thiện CLS hiệu quả
Sau khi đã hiểu CLS là gì và cách đo lường, bước quan trọng nhất là tối ưu hóa. Dưới đây là 3 kỹ thuật hàng đầu để xử lý triệt để lỗi nhảy bố cục.
Cách 1 — Luôn xác định kích thước cho hình ảnh và video
Nguyên nhân phổ biến nhất gây tăng CLS là hình ảnh không có thuộc tính rộng/cao. Khi trình duyệt chưa tải xong ảnh, nó sẽ đặt chiều cao bằng 0, và khi ảnh hiện ra, nó sẽ “đẩy” nội dung phía dưới xuống.
- Giải pháp: Luôn khai báo thuộc tính
widthvàheighttrực tiếp trong thẻ HTML hoặc sử dụng CSSaspect-ratio. - Ví dụ:
<img src="banner.jpg" width="800" height="400" alt="...">
Cách 2 — Giành trước không gian cho quảng cáo (Reserve Space)
Quảng cáo thường được load động qua JavaScript, gây ra sự thay đổi layout đột ngột. Để khắc phục, bạn cần tạo một “vỏ bọc” (container) có chiều cao cố định cho khu vực đặt quảng cáo.
- Ví dụ CSS:
CSS
.ad-slot {
min-height: 250px;
background-color: #f0f0f0; /* Tạo placeholder */
}
Việc này đảm bảo ngay cả khi quảng cáo chưa load, vị trí đó vẫn được giữ trống, không làm xê dịch các phần tử khác.
Cách 3 — Tối ưu hóa Font Loading
Sử dụng Web Fonts đôi khi gây ra hiện tượng FOIT (Flash of Invisible Text) hoặc FOUT (Flash of Unstyled Text). Khi font chữ thay đổi từ font hệ thống sang font tùy chỉnh, kích thước chữ có thể co giãn làm layout bị shift.
- Giải pháp: Sử dụng thuộc tính
font-display: swap;trong @font-face và đảm bảo các font fallback có kích thước tương đồng với font chính.
CLS ảnh hưởng SEO thế nào?
Trong hệ sinh thái Google, CLS không chỉ là một thông số kỹ thuật khô khan mà là một phần của tín hiệu xếp hạng Page Experience. Khi một website có chỉ số CLS kém, Google sẽ đánh giá thấp trải nghiệm người dùng trên trang đó.
Tác động thực tế của CLS đến SEO bao gồm:
- Tăng Bounce Rate: Người dùng sẽ nhanh chóng thoát trang nếu nội dung cứ liên tục nhảy lò cò hoặc họ vô tình click nhầm vào quảng cáo.
- Giảm Tỷ lệ chuyển đổi: Sự thiếu ổn định gây mất lòng tin. Một khách hàng sẽ không muốn nhập thông tin thanh toán trên một giao diện chập chờn.
- Thứ hạng từ khóa: Kể từ năm 2021, Core Web Vitals đã trở thành tiêu chuẩn để Google ưu tiên các trang web chất lượng. Nếu đối thủ của bạn có tốc độ tương đương nhưng CLS tốt hơn, họ sẽ chiếm ưu thế trên bảng xếp hạng.
Bạn có thể tìm hiểu thêm về cách kết hợp CLS với các chỉ số khác tại [INP là gì? Metric mới thay thế FID từ 2024 bạn phải biết].
Câu hỏi thường gặp về CLS
CLS bao nhiêu là tốt?
Chỉ số CLS dưới hoặc bằng 0.1 được coi là tốt. Ở mức này, người dùng hầu như không nhận thấy sự dịch chuyển bố cục, đảm bảo tính thẩm mỹ và công năng của website luôn đạt trạng thái ổn định nhất theo tiêu chuẩn của Google Core Web Vitals.
CLS khác LCP thế nào?
LCP (Largest Contentful Paint) đo lường tốc độ tải của phần tử lớn nhất trên trang, tập trung vào cảm nhận về sự nhanh chóng. Trong khi đó, CLS đo lường sự ổn định thị giác, tập trung vào việc ngăn chặn các thay đổi bố cục gây khó chịu cho người dùng.
Làm sao cải thiện CLS nhanh nhất?
Cách nhanh nhất là set kích thước cố định (width/height) cho toàn bộ hình ảnh, video trên trang và thiết lập chiều cao tối thiểu cho các khung chứa quảng cáo. Đồng thời, hãy hạn chế việc chèn (inject) nội dung mới vào phía trên những nội dung hiện có bằng JavaScript.
Tóm lại, việc tối ưu hóa chỉ số CLS là một quá trình đòi hỏi sự tỉ mỉ trong việc quản lý tài nguyên website. Bằng cách luôn đặt kích thước cho hình ảnh, dự phòng không gian cho quảng cáo và kiểm soát tốt việc load font, bạn hoàn toàn có thể đưa điểm số CLS về mức an toàn. Hãy nhớ rằng một website ổn định không chỉ làm hài lòng Google mà còn mang lại trải nghiệm tuyệt vời cho chính người dùng của bạn.
Đọc tiếp: [Tối ưu hình ảnh cho web], [WebP là gì?]
Tham khảo tài liệu chính thức về CLS tại: web.dev/cls/
