Bạn đã bao giờ gặp tình trạng đang đọc website thì nội dung bất ngờ dịch chuyển? Đó có thể là dấu hiệu của việc chỉ số Cumulative Layout Shift trên web đang gặp vấn đề. Vậy chỉ số này là gì và ảnh hưởng thế nào tới người dùng, hãy cùng Nhân Hòa tìm hiểu ngay trong bài viết dưới đây.
Cumulative Layout Shift là gì?
Cumulative Layout Shift (CLS) là chỉ số đo lường tổng mức độ dịch chuyển bố cục không mong muốn của giao diện trang web trong suốt quá trình tải và hiển thị. Đây là một trong ba chỉ số quan trọng thuộc bộ Core Web Vitals do Google phát triển nhằm đánh giá trải nghiệm người dùng.
- CLS ghi nhận khi các thành phần trên trang (như hình ảnh, nút bấm, văn bản, quảng cáo) bất ngờ thay đổi vị trí mà không do người dùng tương tác.
- Hiện tượng này thường gây khó chịu, làm người dùng đọc nhầm dòng hoặc bấm nhầm vào các liên kết/quảng cáo không mong muốn.
Ví dụ về layout shift – bố cục website thay đổi ngoài dự kiến
Bạn đang đọc một bài viết trên website. Khi trang vừa tải, nội dung hiển thị bình thường. Vài giây sau, một banner quảng cáo xuất hiện phía trên khiến đoạn văn bạn đang đọc bị đẩy xuống dưới. CLS ghi nhận mức độ dịch chuyển này, chỉ số càng thấp thì bố cục càng ổn định.
Mục đích cốt lõi của chỉ số CLS là gì?
Mục đích chính của việc tối ưu chỉ số Cumulative Layout Shift là loại bỏ hiện tượng nhảy bố cục bất ngờ khi trang web đang tải, từ đó mang lại trải nghiệm ổn định và mượt mà cho người dùng.
- Cải thiện trải nghiệm người dùng: Ngăn chặn việc nội dung, hình ảnh hoặc nút bấm bị xê dịch đột ngột khiến người dùng bấm nhầm vào quảng cáo hay liên kết khác.
- Giảm tỷ lệ thoát trang: Giúp khách truy cập cảm thấy dễ chịu, không bị khó chịu khi đọc bài viết hoặc mua sắm, giữ chân họ ở lại trang lâu hơn.
- Tăng tỷ lệ chuyển đổi: Giao diện ổn định làm tăng độ uy tín của website, giúp khách hàng dễ dàng hoàn tất các thao tác mua hàng hoặc điền form.
- Tối ưu hóa SEO: CLS là một phần trong bộ chỉ số quan trọng Core Web Vitals của Google, giúp cải thiện thứ hạng trên bảng kết quả tìm kiếm.
Các mức đánh giá chỉ số CLS của website
Theo Google, các mức đánh giá chỉ số Cumulative Layout Shift trên website được chia thành 3 mức chính dựa trên trải nghiệm thực tế của người dùng:
Lưu ý: Để đạt điểm "Tốt" chính thức từ Google, website của bạn cần duy trì chỉ số CLS dưới 0.1 cho ít nhất 75% tổng số lượt tải trang thực tế trên cả thiết bị di động và máy tính.
3 cách kiểm tra Cumulative Layout Shift của website
Bạn có thể kiểm tra Cumulative Layout Shift bằng nhiều công cụ khác nhau.
Cách 1: Kiểm tra CLS bằng PageSpeed Insights
Với người mới, PageSpeed Insights là lựa chọn dễ sử dụng nhất vì chỉ cần nhập URL website, công cụ sẽ tự động phân tích và đưa ra điểm CLS.
Bước 1: Truy cập PageSpeed Insights, nhập URL website cần kiểm tra
Bước 2: Sau khi phân tích hoàn tất, kéo xuống phần Core Web Vitals. Tại đây, tìm chỉ số Cumulative Layout Shift.
Bước 3: Đọc kết quả. PageSpeed Insights sẽ hiển thị kết quả CLS cùng trạng thái đánh giá:
- Tốt: CLS ≤ 0,1
- Cần cải thiện: CLS > 0,1 và ≤ 0,25
- Kém: CLS > 0,25
Cách 2: Kiểm tra CLS bằng Google Search Console
Google Search Console phù hợp khi bạn muốn theo dõi CLS trên nhiều URL, thay vì kiểm tra từng trang riêng lẻ.
Bước 1: Đăng nhập Google Search Console chọn website (property) muốn kiểm tra.
Bước 2: Trong menu bên trái, chọn Core Web Vitals (Chỉ số quan trọng chính của website). Báo cáo sẽ hiển thị dữ liệu riêng cho Mobile và Desktop.
Bước 3: Xem nhóm URL gặp vấn đề
Google Search Console phân loại các URL thành Tốt, Cần cải thiện và Kém. Chọn nhóm cần kiểm tra để xem các URL liên quan.
Cách 3: Kiểm tra CLS bằng Chrome DevTools
Chrome DevTools phù hợp khi bạn không chỉ muốn biết CLS bao nhiêu, mà còn muốn tìm thành phần nào đang gây ra dịch chuyển bố cục.
Bước 1: Truy cập trang cần kiểm tra trên Google Chrome → nhấn chuột phải → chọn Inspect.
Bước 2: Trong cửa sổ DevTools, chọn tab Performance rồi bắt đầu ghi bằng nút Record.
Bước 3: Trong khi DevTools đang ghi, hãy tải lại trang để trình duyệt ghi nhận quá trình hiển thị và các thay đổi về bố cục.
Bước 4: Sau khi quá trình ghi kết thúc, xem timeline và tìm các sự kiện Layout Shift. Khi chọn một sự kiện, DevTools sẽ hiển thị thông tin về phần tử liên quan đến lần dịch chuyển đó.
Bước 5: Xác định nguyên nhân gây dịch chuyển bố cục
Dựa vào phần tử được xác định, bạn có thể kiểm tra các vấn đề thường gặp như hình ảnh chưa khai báo kích thước, quảng cáo hoặc nội dung động chèn vào trang, font chữ thay đổi sau khi tải hoặc các thành phần được thêm vào khi trang đang hiển thị.
>>> Xem thêm: 9+ thủ thuật tăng tốc website WordPress nhanh, đơn giản
Nguyên nhân khiến chỉ số CLS của website cao
Chỉ số Cumulative Layout Shift tăng khi các thành phần trên trang bị thay đổi vị trí một cách bất ngờ trong quá trình tải hoặc hiển thị. Một số nguyên nhân phổ biến gồm:
Hình ảnh và video không có kích thước cố định
Thẻ <img> hoặc <video> thiếu thuộc tính width và height, khiến trình duyệt không chừa sẵn không gian trước khi tải file. Sau khi ảnh tải xong, kích thước được xác định và đẩy các nội dung xung quanh sang vị trí khác.
Quảng cáo, iframe và nội dung nhúng động
Các banner, quảng cáo, nội dung tự động load và đẩy nội dung chính xuống dưới hoặc sang bên khi xuất hiện. Đây là tình huống thường gặp ở website sử dụng quảng cáo, popup, banner hoặc nội dung được tải động.
Phông chữ tải muộn (Web Fonts)
Phông chữ tải muộn sẽ gây ra hiện tượng FOUT (Flash of Unstyled Text - đổi phông đột ngột) hoặc FOIT (Flash of Invisible Text), làm co giãn khối văn bản.
Nội dung chèn động (Dynamic Content)
Khi website chèn thêm nội dung mới như thông báo, giỏ hàng hoặc banner khuyến mãi vào phía trên, các nội dung đang hiển thị có thể bị đẩy xuống, làm bố cục trang thay đổi.
Cách cải thiện Cumulative Layout Shift
Muốn giảm Cumulative Layout Shift, cần hạn chế việc các thành phần trên trang thay đổi vị trí sau khi đã hiển thị. Có thể thực hiện theo các cách sau:
Xác định kích thước cho hình ảnh và video
Khai báo trước chiều rộng và chiều cao của hình ảnh, video để trình duyệt biết chính xác không gian cần dành cho chúng ngay từ đầu. Nhờ đó, khi tài nguyên tải xong, nội dung xung quanh không bị đẩy xuống hoặc dịch chuyển.
Dành sẵn không gian cho quảng cáo và nội dung động
Nếu website có quảng cáo, banner, iframe hoặc các nội dung được tải động, nên xác định trước kích thước hoặc vị trí hiển thị của chúng. Không nên để nội dung mới xuất hiện đột ngột ở phía trên nội dung người dùng đang xem.
Hạn chế chèn nội dung mới vào giữa trang
Các thông báo, banner khuyến mãi, biểu mẫu hoặc thành phần động nên được bố trí ở khu vực đã có sẵn không gian. Ví dụ, thay vì chèn một banner mới lên đầu bài viết sau khi trang đã tải, hãy dành sẵn vị trí cho banner ngay từ đầu.
Tối ưu cách tải font chữ
Tối ưu font chữ bằng cách giảm số lượng kiểu chữ cần tải, ưu tiên định dạng font hiện đại như WOFF2 và sử dụng font-display phù hợp. Ngoài ra, có thể dùng font-display: optional để hạn chế việc thay font sau khi trang hiển thị hoặc thuộc tính size-adjust để điều chỉnh kích thước font dự phòng gần với font chính.
Kiểm tra và xử lý các phần tử gây Layout Shift
Sau khi xác định website có CLS cao, sử dụng PageSpeed Insights hoặc Chrome DevTools để tìm thành phần gây dịch chuyển. Tập trung kiểm tra những khu vực thường gặp như:
- Hình ảnh, video chưa có kích thước cố định.
- Quảng cáo và iframe.
- Banner hoặc popup xuất hiện muộn.
- Nội dung được thêm bằng JavaScript.
- Font chữ thay đổi sau khi tải.
Nguyên tắc quan trọng: Hãy đảm bảo trình duyệt biết trước không gian mà mỗi thành phần cần sử dụng, đặc biệt với hình ảnh, quảng cáo và nội dung động. Đây là cách trực tiếp nhất để hạn chế bố cục trang bị xê dịch và cải thiện CLS.
>>> Xem thêm: FCP là gì? Nguyên nhân phổ biến khiến First Contentful Paint bị chậm
[FAQs] Những câu hỏi thường gặp về Cumulative Layout Shift
CLS có giống với tốc độ tải trang không?
Cumulative Layout Shift đo độ ổn định của bố cục, trong khi tốc độ tải phản ánh thời gian website hiển thị nội dung. Một trang có thể tải nhanh nhưng vẫn có CLS cao nếu các thành phần trên trang liên tục dịch chuyển.
Tại sao cùng một website nhưng CLS của các trang lại khác nhau?
Mỗi trang web sử dụng hình ảnh, quảng cáo, font chữ, nội dung động và thành phần giao diện khác nhau. Vì vậy, một trang có CLS tốt không đồng nghĩa với tất cả URL trên website đều có CLS tốt.
CLS website có thay đổi theo từng thiết bị không?
Có. CLS có thể khác nhau giữa điện thoại, máy tính bảng và máy tính do sự khác biệt về kích thước màn hình, trình duyệt, tốc độ tải tài nguyên và cách website hiển thị trên từng thiết bị.
Lời kết
Cumulative Layout Shift giúp đánh giá mức độ ổn định của bố cục website khi nội dung được tải và hiển thị. Duy trì CLS ở mức tốt, đồng thời xác định và xử lý các thành phần gây dịch chuyển sẽ giúp website ổn định và mang lại trải nghiệm tốt hơn cho người dùng.
Sở hữu kênh bán hàng riêng, thiết kế trọn gói và bàn giao thần tốc chỉ trong 3 ngày
Sở hữu website chuyên nghiệp chỉ với 9.000đ/ngày
Tầng 4, Tòa 97–99 Láng Hạ, Phường Đống Đa, Thành phố Hà Nội
Điện thoại: 
Mail: sales@nhanhoa.com
Phản ánh chất lượng dịch vụ: 
