CLS là gì?
Trần Thị Vân - 112
- 21/07/2026
Tìm hiểu CLS là gì, cách Google đánh giá chỉ số Cumulative Layout Shift, nguyên nhân khiến CLS cao và các phương pháp tối ưu giúp cải thiện Core Web Vitals, nâng cao trải nghiệm người dùng và hỗ trợ SEO hiệu quả, chi tiết như nào hãy cùng chúng tôi phân tích:
CLS là một trong những chỉ số quan trọng thuộc bộ Core Web Vitals của Google, phản ánh mức độ ổn định của bố cục khi một trang web được tải. Nếu bạn từng gặp tình huống đang đọc bài viết thì nội dung bất ngờ bị đẩy xuống vì hình ảnh hoặc quảng cáo xuất hiện, đó chính là trải nghiệm mà chỉ số CLS đánh giá.
Đối với SEO hiện đại, Google không chỉ quan tâm đến nội dung chất lượng mà còn đánh giá trải nghiệm người dùng. Vì vậy, tối ưu CLS không chỉ giúp website thân thiện hơn mà còn góp phần cải thiện khả năng cạnh tranh trên kết quả tìm kiếm. Trong bài viết này, Web Mới sẽ giúp bạn hiểu rõ CLS là gì, cách Google đo lường chỉ số này cũng như các phương pháp tối ưu hiệu quả.
Khái niệm về chỉ số CLS
CLS là viết tắt của Cumulative Layout Shift, có nghĩa là tổng mức dịch chuyển bố cục tích lũy. Chỉ số này đo lường mức độ thay đổi vị trí của các thành phần hiển thị trên trang trong quá trình tải.
Mỗi khi một phần tử như hình ảnh, video, biểu mẫu, quảng cáo hoặc font chữ được tải muộn khiến nội dung đang hiển thị bị dịch chuyển, Google sẽ ghi nhận một lần Layout Shift. Tổng điểm của các lần dịch chuyển này sẽ tạo thành chỉ số CLS.
Một website có CLS thấp sẽ mang lại trải nghiệm ổn định, giúp người dùng thao tác chính xác hơn. Ngược lại, CLS cao khiến người dùng dễ bấm nhầm liên kết, mất tập trung khi đọc và cảm thấy website thiếu chuyên nghiệp.
Vai trò của CLS trong SEO và trải nghiệm người dùng
Cải thiện trải nghiệm truy cập
Khi bố cục ổn định, người dùng có thể đọc nội dung hoặc thao tác trên website mà không bị gián đoạn. Điều này đặc biệt quan trọng với các trang bán hàng, biểu mẫu đăng ký và trang thanh toán.
Được Google sử dụng trong Core Web Vitals
CLS là một trong ba chỉ số chính của Core Web Vitals bên cạnh LCP và INP (trước đây là FID). Google sử dụng các chỉ số này để đánh giá chất lượng trải nghiệm thực tế của người dùng.
Mặc dù CLS không phải yếu tố quyết định hoàn toàn thứ hạng SEO, nhưng nó có thể tạo lợi thế khi các website có chất lượng nội dung tương đương.
Tăng tỷ lệ chuyển đổi
Một website ổn định giúp người dùng dễ dàng hoàn thành hành động như mua hàng, gửi biểu mẫu hoặc đăng ký dịch vụ. Điều này góp phần giảm tỷ lệ thoát và nâng cao hiệu quả kinh doanh.
Google đánh giá CLS như thế nào?
Google tính điểm CLS dựa trên hai yếu tố chính:
- Diện tích của phần tử bị dịch chuyển trên màn hình.
- Khoảng cách mà phần tử đó đã di chuyển.
Khi nhiều thành phần liên tục thay đổi vị trí trong quá trình tải, điểm CLS sẽ tăng lên.
Google phân loại chất lượng CLS theo các mức sau:
| Điểm CLS | Đánh giá |
|---|---|
| Từ 0 đến 0.1 | Tốt |
| Trên 0.1 đến 0.25 | Cần cải thiện |
| Trên 0.25 | Kém |
Mục tiêu nên hướng đến là giữ điểm CLS nhỏ hơn hoặc bằng 0.1 trên hầu hết các trang.
Những nguyên nhân phổ biến làm tăng CLS
Hình ảnh không khai báo kích thước
Đây là nguyên nhân xuất hiện nhiều nhất. Khi trình duyệt chưa biết kích thước ảnh, nó sẽ hiển thị khoảng trống không xác định. Sau khi ảnh tải xong, toàn bộ nội dung phía dưới sẽ bị đẩy xuống.
Quảng cáo tải sau nội dung
Nhiều hệ thống quảng cáo chỉ hiển thị sau khi trang gần tải xong. Nếu không dành sẵn không gian, quảng cáo sẽ khiến bố cục thay đổi đột ngột.
Nhúng video hoặc iframe không có vùng chứa
Các video YouTube, Google Maps hoặc iframe bên thứ ba nếu không thiết lập chiều rộng và chiều cao sẽ làm thay đổi cấu trúc trang khi tải.
Font chữ web tải chậm
Khi font chữ tùy chỉnh chưa được tải, trình duyệt sẽ dùng font dự phòng. Sau đó khi font chính xuất hiện, kích thước ký tự thay đổi khiến các đoạn văn bị dịch chuyển.
Chèn nội dung động phía trên
Các popup, banner thông báo hoặc thanh khuyến mại xuất hiện phía trên nội dung sau khi người dùng đã bắt đầu đọc sẽ làm toàn bộ trang bị đẩy xuống.
Cách kiểm tra chỉ số CLS của website
Việc kiểm tra CLS nên được thực hiện định kỳ để phát hiện các vấn đề ảnh hưởng đến trải nghiệm người dùng. Hiện nay có nhiều công cụ hỗ trợ phân tích chỉ số này với dữ liệu từ phòng thí nghiệm (Lab Data) và dữ liệu thực tế từ người dùng (Field Data).
Google PageSpeed Insights
Đây là công cụ được sử dụng phổ biến nhất để kiểm tra Core Web Vitals. Chỉ cần nhập địa chỉ website, hệ thống sẽ phân tích hiệu suất trên thiết bị di động và máy tính, đồng thời hiển thị điểm CLS nếu có dữ liệu.
Ngoài điểm số, công cụ còn chỉ ra những thành phần gây dịch chuyển bố cục và đưa ra các gợi ý tối ưu.
Google Search Console
Nếu website đã được xác minh trong Google Search Console, bạn có thể theo dõi báo cáo Core Web Vitals để biết những URL nào đang gặp vấn đề về CLS.
Báo cáo này sử dụng dữ liệu thực tế từ người dùng truy cập website, vì vậy kết quả phản ánh khá chính xác trải nghiệm của khách truy cập.
Chrome DevTools
Đối với lập trình viên, Chrome DevTools cung cấp công cụ giúp xác định chính xác thành phần nào đang gây ra Layout Shift.
Tính năng Performance sẽ ghi lại toàn bộ quá trình tải trang, từ đó hiển thị các lần dịch chuyển bố cục cùng vị trí xảy ra lỗi.
Lighthouse
Lighthouse là công cụ tích hợp trong trình duyệt Chrome, cho phép đánh giá hiệu suất website, khả năng truy cập, SEO và Core Web Vitals chỉ với một lần phân tích.
Những cách tối ưu CLS hiệu quả
Luôn khai báo kích thước hình ảnh
Mỗi hình ảnh nên có đầy đủ thuộc tính chiều rộng và chiều cao để trình duyệt tính toán trước không gian hiển thị.
Ví dụ:
<img src="banner.jpg" width="1200" height="630" alt="Banner">
Nếu website sử dụng CSS Responsive, trình duyệt vẫn dựa vào tỷ lệ này để giữ ổn định bố cục trong lúc tải.
Dành sẵn không gian cho quảng cáo
Không nên để các khối quảng cáo tự mở rộng sau khi tải xong. Thay vào đó hãy tạo vùng chứa với kích thước cố định để tránh làm thay đổi vị trí của nội dung.
Ví dụ:
<div class="ads-container">
<!-- Nội dung quảng cáo -->
</div>
.ads-container{
width:300px;
height:250px;
}
Sử dụng thuộc tính aspect-ratio
Thuộc tính aspect-ratio giúp trình duyệt xác định tỷ lệ của hình ảnh hoặc video ngay từ đầu.
Ví dụ:
.thumbnail{
aspect-ratio:16 / 9;
}
Đây là giải pháp hiện đại giúp giảm đáng kể hiện tượng dịch chuyển bố cục.
Không chèn nội dung lên phía trên sau khi trang đã tải
Các thông báo giảm giá, banner khuyến mại hoặc popup nên hiển thị dưới dạng lớp phủ thay vì chèn vào đầu trang.
Nếu bắt buộc phải thêm nội dung động, hãy chuẩn bị khoảng trống ngay từ khi trang bắt đầu tải.
Tối ưu font chữ
Nên sử dụng thuộc tính font-display: swap để giảm thời gian chờ tải font.
Ví dụ:
@font-face{
font-family:"MyFont";
src:url("font.woff2");
font-display:swap;
}
Việc này giúp trình duyệt hiển thị nội dung ngay lập tức bằng font dự phòng và hạn chế hiện tượng thay đổi kích thước chữ.
Ưu tiên tải các thành phần quan trọng
Những phần tử nằm phía trên màn hình đầu tiên nên được tải sớm để tránh việc nội dung liên tục thay đổi trong quá trình hiển thị.
Các tài nguyên ít quan trọng hơn có thể sử dụng kỹ thuật tải trì hoãn nhằm giảm áp lực cho trình duyệt.
Ví dụ thực tế về CLS
Giả sử một bài viết có tiêu đề, hình ảnh và nội dung văn bản.
Trong trường hợp hình ảnh chưa được khai báo kích thước, trình duyệt sẽ hiển thị phần văn bản ngay bên dưới tiêu đề.
Sau khoảng một giây, hình ảnh mới tải xong và xuất hiện phía trên đoạn văn. Toàn bộ nội dung sẽ bị đẩy xuống dưới khiến người dùng mất vị trí đang đọc.
Đây chính là một lần Layout Shift và sẽ được Google cộng vào điểm CLS.
Nếu ngay từ đầu hình ảnh đã được khai báo kích thước hoặc sử dụng thuộc tính aspect-ratio, trình duyệt sẽ dành sẵn khoảng trống, nhờ đó bố cục gần như không thay đổi.
CLS ảnh hưởng đến SEO như thế nào?
CLS không phải là yếu tố duy nhất quyết định thứ hạng trên Google, tuy nhiên đây là một phần trong hệ thống đánh giá trải nghiệm trang (Page Experience). Khi hai website có chất lượng nội dung tương đương, website mang lại trải nghiệm tốt hơn thường có nhiều lợi thế hơn.
Một chỉ số CLS được tối ưu tốt sẽ mang đến nhiều lợi ích như:
- Giảm tỷ lệ thoát trang do người dùng không còn bị gián đoạn khi đọc nội dung.
- Tăng thời gian ở lại trên website nhờ trải nghiệm ổn định.
- Hạn chế việc người dùng nhấp nhầm vào quảng cáo hoặc nút bấm.
- Nâng cao mức độ tin cậy và sự chuyên nghiệp của website.
- Hỗ trợ tối ưu tổng thể Core Web Vitals.
Ngược lại, nếu CLS quá cao, người dùng thường cảm thấy khó chịu vì nội dung liên tục thay đổi vị trí. Điều này có thể làm giảm tỷ lệ chuyển đổi, đặc biệt trên các website thương mại điện tử, landing page hoặc trang đăng ký dịch vụ.
Những sai lầm thường gặp khi tối ưu CLS
Chỉ tập trung vào tốc độ tải trang
Nhiều quản trị viên cho rằng website tải nhanh đồng nghĩa với trải nghiệm tốt. Thực tế, một trang có tốc độ tải nhanh nhưng bố cục liên tục thay đổi vẫn có thể sở hữu điểm CLS rất cao.
Không kiểm tra trên thiết bị di động
CLS trên điện thoại thường khác với máy tính vì kích thước màn hình nhỏ hơn. Một số thành phần hiển thị bình thường trên desktop nhưng lại gây dịch chuyển đáng kể trên thiết bị di động.
Lạm dụng quảng cáo
Việc đặt quá nhiều quảng cáo hoặc sử dụng các mạng quảng cáo tải nội dung động mà không có vùng chứa cố định là nguyên nhân phổ biến khiến CLS tăng mạnh.
Thêm banner thông báo sau khi người dùng bắt đầu đọc
Nhiều website hiển thị thanh thông báo khuyến mại ở đầu trang sau vài giây truy cập. Điều này khiến toàn bộ nội dung bị đẩy xuống và tạo ra trải nghiệm không tốt.
Không kiểm tra sau mỗi lần cập nhật giao diện
Mỗi khi thay đổi theme, plugin, widget hoặc thêm tính năng mới, bạn nên đo lại Core Web Vitals. Một thay đổi nhỏ trong giao diện cũng có thể làm tăng CLS nếu không được tối ưu đúng cách.
Mối liên hệ giữa CLS với LCP và INP
CLS chỉ là một trong ba chỉ số quan trọng của Core Web Vitals. Để tối ưu toàn diện trải nghiệm người dùng, website cần quan tâm đồng thời cả ba yếu tố.
| Chỉ số | Mục đích đánh giá | Mục tiêu khuyến nghị |
|---|---|---|
| CLS | Mức độ ổn định của bố cục | ≤ 0.1 |
| LCP | Tốc độ hiển thị nội dung chính | ≤ 2.5 giây |
| INP | Khả năng phản hồi khi người dùng tương tác | ≤ 200 ms |
Một website chỉ thực sự mang lại trải nghiệm tốt khi cả ba chỉ số đều nằm trong ngưỡng mà Google khuyến nghị.
Câu hỏi thường gặp về CLS
CLS bao nhiêu là đạt chuẩn?
Google khuyến nghị điểm CLS không vượt quá 0.1. Nếu nằm trong khoảng từ 0.1 đến 0.25, website nên được tối ưu thêm. Trên 0.25 được xem là mức kém và cần khắc phục càng sớm càng tốt.
CLS có ảnh hưởng trực tiếp đến thứ hạng Google không?
CLS là một tín hiệu trong hệ thống đánh giá trải nghiệm trang. Mặc dù không phải yếu tố quyết định duy nhất, nhưng việc tối ưu CLS sẽ giúp website có lợi thế hơn về trải nghiệm người dùng và hỗ trợ SEO lâu dài.
Có cần tối ưu CLS cho mọi trang không?
Có. Những trang có lượng truy cập lớn như trang chủ, danh mục sản phẩm, bài viết và landing page nên được ưu tiên kiểm tra thường xuyên. Tuy nhiên, về lâu dài, toàn bộ website đều nên đạt mức CLS tốt.
Plugin có thể làm tăng CLS không?
Có. Một số plugin chèn quảng cáo, popup, biểu mẫu hoặc tiện ích mạng xã hội có thể khiến bố cục thay đổi nếu không được cấu hình hợp lý. Sau khi cài đặt plugin mới, bạn nên kiểm tra lại Core Web Vitals để phát hiện sớm các vấn đề.
Kết luận
CLS là chỉ số phản ánh mức độ ổn định của bố cục trong quá trình tải trang và là một thành phần quan trọng của Core Web Vitals. Một website có điểm CLS thấp sẽ mang lại trải nghiệm mượt mà, giúp người dùng thao tác chính xác hơn, giảm tỷ lệ thoát và tạo lợi thế trong quá trình tối ưu SEO.
Để cải thiện CLS, bạn nên khai báo kích thước cho hình ảnh và video, sử dụng vùng chứa cố định cho quảng cáo, tối ưu font chữ, hạn chế chèn nội dung động và thường xuyên kiểm tra website bằng các công cụ của Google. Khi kết hợp tối ưu CLS cùng LCP và INP, website sẽ đáp ứng tốt hơn các tiêu chí về hiệu suất cũng như trải nghiệm người dùng, góp phần phát triển bền vững trên công cụ tìm kiếm.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
