CLS là gì? Tìm hiểu về chỉ số Cumulative Layout Shift trong SEO

CLS là gì? Đây là viết tắt của Cumulative Layout Shift, một chỉ số quan trọng trong bộ Core Web Vitals của Google. CLS dùng để đo lường mức độ ổn định của bố cục website khi tải trang. Việc hiểu rõ và cải thiện CLS sẽ giúp website của bạn thân thiện hơn với người dùng và nâng cao thứ hạng trên công cụ tìm kiếm.

CLS là gì?

CLS (Cumulative Layout Shift) là một chỉ số quan trọng trong bộ Core Web Vitals của Google. CLS dùng để đo lường mức độ ổn định của bố cục trang web trong quá trình tải và khi người dùng tương tác. Cụ thể, CLS phản ánh tổng số điểm của tất cả các lần thay đổi bố cục không mong muốn trên trang. Tức là khi các phần tử như hình ảnh, văn bản, nút bấm… bất ngờ di chuyển hoặc thay đổi vị trí mà không có sự tác động trực tiếp từ người dùng.

Điểm CLS càng cao thì trang web càng thiếu ổn định, làm gián đoạn trải nghiệm người dùng. Ví dụ, bạn đang đọc một đoạn văn thì bất ngờ một quảng cáo hoặc hình ảnh tải chậm xuất hiện, đẩy nội dung xuống dưới khiến bạn mất vị trí đang đọc – đó chính là một “layout shift” và sẽ bị tính vào điểm CLS.

Tại sao CLS lại quan trọng với SEO?

CLS (Cumulative Layout Shift) không chỉ là một chỉ số kỹ thuật mà còn là yếu tố sống còn đối với bất kỳ website nào. Dưới đây là những lý do lý giải vì sao CLS lại quan trọng với SEO!

Ảnh hưởng đến trải nghiệm người dùng

CLS cao gây ra sự thay đổi bất ngờ của các phần tử trên trang như hình ảnh, nút bấm hoặc văn bản, khiến người dùng cảm thấy khó chịu và dễ nhấp nhầm vào các liên kết không mong muốn. Điều này làm gián đoạn quá trình đọc, giảm sự hài lòng và khiến khách truy cập có thể rời khỏi trang ngay lập tức. Một website ổn định, không “nhảy múa” sẽ giữ chân người dùng lâu hơn và tạo ấn tượng chuyên nghiệp hơn.

Tác động đến thứ hạng tìm kiếm

Google đã xác nhận CLS là một yếu tố trong bộ Core Web Vitals, ảnh hưởng trực tiếp đến thứ hạng trên kết quả tìm kiếm. Website có điểm CLS thấp sẽ được ưu tiên hơn, giúp tăng khả năng hiển thị và thu hút lượng truy cập tự nhiên. Ngược lại, CLS cao khiến website bị “mất điểm” với Google, dễ bị đẩy xuống dưới các đối thủ cạnh tranh.

Giảm tỷ lệ thoát trang

Khi bố cục trang web thay đổi liên tục, người dùng dễ cảm thấy bực bội và mất kiên nhẫn, dẫn đến việc rời khỏi trang mà không thực hiện bất kỳ hành động nào. Điều này làm tăng tỷ lệ thoát trang và giảm thời gian ở lại, hai chỉ số quan trọng mà Google sử dụng để đánh giá chất lượng website. Tối ưu CLS giúp giữ chân người dùng hiệu quả hơn.

Nâng cao tỷ lệ chuyển đổi

Một trải nghiệm mượt mà, ổn định sẽ thúc đẩy người dùng thực hiện các hành động như mua hàng, đăng ký hoặc liên hệ. Ngược lại, nếu website liên tục thay đổi, khách hàng tiềm năng dễ bỏ qua cơ hội chuyển đổi. Tối ưu CLS không chỉ giúp tăng tỷ lệ chuyển đổi mà còn nâng cao uy tín và hình ảnh thương hiệu trong mắt khách hàng. 

Điểm CLS bao nhiêu là tốt?

CLS là gì? Điểm CLS bao nhiêu là tốt nhất? Theo đó, CLS càng thấp càng tốt, bởi chỉ số này phản ánh mức độ ổn định của bố cục trang web trong suốt quá trình tải và sử dụng. Theo khuyến nghị từ Google, điểm CLS được xem là tốt khi đạt 0.1 hoặc thấp hơn. Đây là ngưỡng đảm bảo trải nghiệm người dùng ổn định, không có các thay đổi bố cục đột ngột gây khó chịu.

Cụ thể, điểm CLS được phân loại như sau:

• CLS ≤ 0.1: Tốt – Trang web ổn định, người dùng không bị gián đoạn khi đọc hoặc thao tác.
• 0.1 < CLS ≤ 0.25: Trung bình – Trang có một số chuyển động nhỏ, vẫn nhận thấy sự thay đổi nhưng chưa gây ảnh hưởng lớn. Tuy nhiên, vẫn nên tối ưu để đạt mức tốt nhất.
• CLS > 0.25: Kém – Bố cục trang thay đổi nhiều, gây khó chịu và làm giảm đáng kể trải nghiệm người dùng, cần khắc phục ngay.

Google cũng lưu ý rằng để đảm bảo phần lớn người dùng đều có trải nghiệm tốt, bạn nên đo điểm CLS ở phân vị thứ 75 của tất cả lượt tải trang, trên cả thiết bị di động lẫn máy tính để bàn. Điều này có nghĩa là ít nhất 75% lượt truy cập vào website của bạn phải đạt điểm CLS 0.1 trở xuống.

Tìm hiểu chi tiết về thay đổi bố cục (layout shift) trên trang web

Khi truy cập một website, chắc hẳn bạn từng gặp trường hợp các phần tử như hình ảnh, nút bấm hoặc văn bản bất ngờ di chuyển vị trí sau khi trang đã tải xong. Đây chính là hiện tượng “thay đổi bố cục” (layout shift) – nguyên nhân gây khó chịu cho người dùng và ảnh hưởng trực tiếp đến điểm số CLS của website.

Điểm số layout shift

Điểm số layout shift là con số thể hiện mức độ thay đổi vị trí của các phần tử không ổn định trên trang trong quá trình tải hoặc khi người dùng tương tác. Điểm số này được tính cho từng lần thay đổi bố cục và là kết quả của phép nhân giữa chỉ số impact fraction và distance fraction. Tổng điểm layout shift của một trang là tổng các điểm số này trong suốt vòng đời tải trang.

Layout shift score = Impact fraction x Distance fraction.

Chỉ số Impact fraction

Impact fraction cho biết mức độ diện tích của khu vực hiển thị (viewport) bị ảnh hưởng bởi các phần tử không ổn định giữa hai khung hình liên tiếp. Cụ thể, nó đo tỷ lệ diện tích mà các phần tử này chiếm giữ trước và sau khi xảy ra thay đổi bố cục, so với tổng diện tích của viewport. Ví dụ, nếu một phần tử chiếm 50% màn hình ở khung hình đầu và di chuyển xuống dưới chiếm thêm 25% ở khung hình tiếp theo, thì impact fraction là 0.75 (tức 75% diện tích viewport bị ảnh hưởng).

Chỉ số Distance fraction

Distance fraction đo lường khoảng cách lớn nhất mà bất kỳ phần tử không ổn định nào đã di chuyển, tính theo chiều ngang hoặc dọc – lấy chiều lớn nhất của viewport làm chuẩn. Chỉ số này được tính bằng cách lấy khoảng cách di chuyển lớn nhất của phần tử chia cho chiều dài lớn nhất của viewport. Ví dụ, nếu phần tử di chuyển xuống dưới bằng 25% chiều cao của màn hình, distance fraction sẽ là 0.25.

Công thức tính điểm layout shift:

Layout shift score = Impact fraction ×Distance fraction

Ví dụ, nếu impact fraction là 0.75 và distance fraction là 0.25 thì điểm layout shift cho lần thay đổi đó sẽ là 0.1875.

Cách đo lường CLS hiệu quả

Ngoài việc tìm hiểu CLS là gì, bạn cũng cần quan tâm đến cách đo lường CLS để từ đó tìm cách cải thiện chỉ số này cho website. 

Các công cụ đo lường CLS

Để đảm bảo website đạt chuẩn về trải nghiệm người dùng và tối ưu hóa SEO, việc đo lường chỉ số CLS (Cumulative Layout Shift) là vô cùng cần thiết. Hiện nay, có nhiều công cụ uy tín giúp bạn kiểm tra, phân tích và theo dõi CLS, từ dữ liệu thực tế đến môi trường giả lập. Dưới đây là những công cụ phổ biến và đáng tin cậy nhất:

Google PageSpeed Insights

Google PageSpeed Insights là công cụ trực tuyến miễn phí của Google, cho phép bạn kiểm tra điểm CLS dựa trên cả dữ liệu thực tế từ người dùng lẫn dữ liệu mô phỏng. Công cụ này không chỉ hiển thị điểm số CLS mà còn phân tích các nguyên nhân gây ra dịch chuyển bố cục. Đồng thời đưa ra các khuyến nghị tối ưu hóa cụ thể như bổ sung kích thước cho hình ảnh hoặc điều chỉnh quảng cáo. PageSpeed Insights cũng phân loại chất lượng trải nghiệm thành ba mức: Tốt (CLS ≤ 0.1), Cần cải thiện (0.1 < CLS ≤ 0.25) và Kém (CLS > 0.25).

Lighthouse

Lighthouse là công cụ mã nguồn mở do Google phát triển, có thể chạy trực tiếp trên Chrome DevTools hoặc thông qua dòng lệnh. Lighthouse thực hiện kiểm tra tự động, mô phỏng hành vi người dùng để đo lường CLS cùng các chỉ số Core Web Vitals khác. 

Sau khi kiểm tra, Lighthouse cung cấp báo cáo chi tiết về điểm số, liệt kê các phần tử gây dịch chuyển và đề xuất giải pháp tối ưu. Đây là công cụ lý tưởng cho các nhà phát triển khi cần kiểm tra và tối ưu website trong môi trường thử nghiệm.

Chrome DevTools

Chrome DevTools là bộ công cụ phát triển tích hợp sẵn trong trình duyệt Chrome, giúp bạn phân tích hiệu suất trang web một cách trực quan. Tại tab “Performance”, bạn có thể ghi lại quá trình tải trang, theo dõi các sự kiện layout shift và xác định chính xác phần tử nào gây ra CLS. Công cụ này rất hữu ích cho việc kiểm tra nhanh và xử lý sự cố ngay trong quá trình phát triển website.

Web Vitals Extension

Web Vitals Extension là tiện ích mở rộng cho trình duyệt Chrome, cho phép bạn theo dõi CLS và các chỉ số Core Web Vitals khác theo thời gian thực khi duyệt web. Tiện ích này sẽ cảnh báo nếu điểm CLS vượt ngưỡng cho phép, đồng thời gợi ý các bước khắc phục. Đây là giải pháp tiện lợi để kiểm tra nhanh và giám sát liên tục hiệu suất website mà không cần rời khỏi trình duyệt.

Hướng dẫn đo lường CLS trong JavaScript

Đo lường mức thay đổi bố cục trong JavaScript

Để đo lường mức thay đổi bố cục trong JavaScript, bạn có thể sử dụng Layout Instability API (API không ổn định của bố cục). Dưới đây là ví dụ về cách tạo PerformanceObserver để ghi lại các mục nhập layout-shift vào bảng điều khiển:

new PerformanceObserver((entryList) => {

  for (const entry of entryList.getEntries()) {

    console.log(‘Layout shift:’, entry);

 }

}).observe({type: ‘layout-shift’, buffered: true});

Đo lường chỉ số CLS trong JavaScript

Để đo lường CLS trong JavaScript bạn cần nhóm các mục nhập layout-shift không mong muốn thành các phiên và tính giá trị phiên tối đa. Hầu hết các trường hợp, chỉ số CLS tại thời điểm trang đang được tải xuống là giá trị CLS cuối cùng cho trang đó, nhưng vẫn có một số trường hợp ngoại lệ. Thư viện JavaScript web vitals tính đến các yếu tố này nhiều nhất có thể, trong phạm vi giới hạn của API Web.

Nguyên nhân khiến chỉ số CLS tăng cao

Chỉ số CLS tăng cao có thể do một trong các nguyên nhân sau:

Hình ảnh, video không đặt kích thước cụ thể (width/height)

Khi hình ảnh hoặc video không xác định thuộc tính width và height, trình duyệt không thể dành sẵn không gian phù hợp. Khi tài nguyên tải xong, kích thước thực tế khác với dự kiến sẽ đẩy các phần tử xung quanh dịch chuyển. Ví dụ: Một hình ảnh không khai báo kích thước khi tải xuống sẽ chiếm diện tích lớn hơn dự kiến, đẩy nội dung văn bản xuống dưới đột ngột.

Font chữ tải chậm, nhảy kích thước khi render

Web font (Google Fonts, Adobe Fonts) tải chậm khiến trình duyệt tạm dùng font dự phòng (FOIT/FOUT). Khi font chính thức tải xong, kích thước văn bản thay đổi đột ngột gây dịch chuyển bố cục. Đặc biệt nghiêm trọng khi font dự phòng (sans-serif) có kích thước khác biệt lớn so với font chính (Google Sans).

Quảng cáo, widget bên thứ ba thay đổi kích thước động

Các thành phần như quảng cáo, iframe nhúng từ bên ngoài thường tải chậm và thay đổi kích thước sau khi trang đã hiển thị. Chúng chiếm không gian không được dự trữ trước, đẩy nội dung chính lệch vị trí. Ví dụ: Một banner quảng cáo xuất hiện muộn ở giữa trang sẽ đẩy toàn bộ nội dung phía dưới xuống thấp hơn.

Nội dung động (popup, banner, iframe) chèn vào sau khi trang đã tải

Popup, banner chào mừng, hoặc nội dung AJAX tải sau khi trang đã render xong chiếm không gian đột ngột. Điều này đặc biệt nghiêm trọng khi chúng xuất hiện gần đầu trang, buộc toàn bộ nội dung phía dưới dịch chuyển. Ví dụ: Một popup đăng ký bật lên sau 3 giây sẽ đẩy nút “Mua hàng” ra khỏi tầm nhìn người dùng.

Hướng dẫn tối ưu CLS cho website

Tối ưu CLS (Cumulative Layout Shift) là quá trình quan trọng giúp ổn định bố cục trang web, giảm thiểu sự dịch chuyển không mong muốn và cải thiện trải nghiệm người dùng.

Luôn đặt thuộc tính width và height cho hình ảnh, video, iframe

Khi không có thuộc tính width và height, trình duyệt không biết trước phải dành bao nhiêu không gian. Từ đó dẫn đến việc nội dung phía dưới bị đẩy xuống hoặc dịch chuyển khi hình ảnh/video/iframe tải xong.

Để khắc phục bạn cần:

• Luôn thêm thuộc tính width và height vào thẻ <img>, <video>, <iframe>.
• Đối với hình ảnh responsive, hãy đảm bảo các thuộc tính này giữ đúng tỷ lệ khung hình (aspect ratio) để trình duyệt dự trù chính xác không gian, dù kích thước thực tế có thể thay đổi theo thiết bị.
• Với thẻ <picture>, nên đặt width và height cho cả <source> và <img> để hỗ trợ tốt trên các trình duyệt hiện đại.

Ví dụ:

xml

<img src=”banner.jpg” width=”1200″ height=”400″ alt=”Banner quảng cáo”>

Điều này giúp trình duyệt “chừa chỗ” trước khi nội dung tải xong, loại bỏ hoàn toàn hiện tượng nhảy layout.

Dự trù không gian cho quảng cáo, widget động

Quảng cáo và các widget động (ví dụ: bảng giá, bình luận, chatbox) thường tải chậm hoặc thay đổi kích thước bất ngờ, gây ra CLS rất lớn. Để tối ưu, cần dự trù không gian cố định cho các thành phần này ngay từ đầu.

• Đặt placeholder (khung chờ) với chiều cao và chiều rộng bằng kích thước lớn nhất mà quảng cáo/widget có thể chiếm dụng.
• Sử dụng CSS min-height, aspect-ratio hoặc các giá trị cụ thể để giữ chỗ, dù nội dung thực tế có thể nhỏ hơn.
• Nếu quảng cáo có nhiều kích thước, nên chọn kích thước phổ biến nhất hoặc lớn nhất để giảm thiểu dịch chuyển khi nội dung thực tế hiển thị.
• Tránh xóa bỏ không gian đã dự trù nếu quảng cáo không hiển thị, vì điều này cũng gây ra layout shift.

Ví dụ:

xml

<div style=”min-height: 250px; width: 970px; background: #f5f5f5;”>

  

</div>

Việc này đảm bảo khi quảng cáo hoặc widget tải xong, giao diện không bị “nhảy” hoặc xô lệch, giữ trải nghiệm người dùng liền mạch.

Sử dụng font-display: swap để giảm nhảy font

Để giảm nhảy font bạn cần thêm thuộc tính font-display: swap vào CSS khi khai báo font để trình duyệt hiển thị font dự phòng ngay lập tức, sau đó tự động chuyển sang font chính khi đã tải xong. Điều này giúp văn bản luôn hiển thị, giảm thiểu dịch chuyển khi font chính xuất hiện, cải thiện điểm CLS và SEO.

Tránh chèn nội dung động phía trên nội dung đã tải

Việc chèn thêm popup, banner, quảng cáo hoặc các nội dung động phía trên phần nội dung đã hiển thị khiến điểm CLS tăng cao. Khi các phần tử này xuất hiện, chúng đẩy toàn bộ nội dung phía dưới xuống, gây ra thay đổi bố cục đột ngột và làm gián đoạn trải nghiệm người dùng. Để khắc phục, bạn nên:

• Dự trù sẵn không gian cho các thành phần động bằng placeholder hoặc skeleton UI trước khi nội dung thực sự được tải về.
• Ưu tiên chèn nội dung mới ở phía dưới hoặc bên cạnh nội dung hiện có thay vì phía trên.
• Nếu cần chèn nội dung động, hãy để người dùng chủ động kích hoạt (ví dụ: nhấn nút “Tải thêm”, “Làm mới”).
• Đảm bảo các layout shift diễn ra trong vòng 500 mili giây sau khi người dùng tương tác (vì những thay đổi này không bị tính vào điểm CLS).

Kiểm tra và tối ưu trên cả desktop lẫn mobile

CLS có thể ảnh hưởng khác nhau trên từng loại thiết bị. Trên di động, màn hình nhỏ khiến bất kỳ sự thay đổi bố cục nào cũng trở nên rõ rệt và dễ gây khó chịu hơn so với desktop. Do đó, bạn cần:

• Thường xuyên kiểm tra điểm CLS riêng biệt cho cả desktop và mobile bằng các công cụ chuyên dụng như Google PageSpeed Insights, Lighthouse hoặc Chrome DevTools.
• Đảm bảo các thành phần giao diện, quảng cáo và nội dung động đều được tối ưu hóa và kiểm tra hiển thị tốt trên mọi kích thước màn hình, tránh trường hợp tối ưu cho desktop nhưng bỏ quên mobile.
• Đối chiếu nội dung và chức năng giữa hai phiên bản để tránh thiếu sót hoặc khác biệt gây ảnh hưởng đến trải nghiệm và điểm CLS.

Theo dõi thường xuyên bằng các công cụ kiểm tra tốc độ và Core Web Vitals

Việc tối ưu CLS không phải là công việc một lần mà cần được kiểm tra, giám sát và điều chỉnh thường xuyên. Sử dụng các công cụ đo lường uy tín đã được giới thiệu ở trên sẽ giúp bạn phát hiện kịp thời các vấn đề phát sinh và đánh giá hiệu quả các thay đổi.

Hy vọng với những chia sẻ trong bài viết đã giúp bạn đã hiểu rõ CLS là gì và tầm quan trọng của nó trong việc nâng cao trải nghiệm người dùng cũng như hiệu suất SEO. Việc tối ưu CLS không chỉ giúp website hoạt động mượt mà hơn mà còn góp phần cải thiện thứ hạng trên Google. Hãy kiểm tra và tối ưu CLS cho website ngay để mang lại giá trị tốt nhất cho người truy cập.