CLS là gì? Giải mã chỉ số ổn định bố cục (Cumulative Layout Shift)

Đăng vào bởi Nguyễn Thanh Hiền
CLS là gì? Giải mã chỉ số ổn định bố cục (Cumulative Layout Shift)
22
Th2

Trong quá trình tối ưu hiệu suất website, chắc hẳn bạn đã từng nghe đến thuật ngữ CLS là gì. Đây là một trong những chỉ số quan trọng thuộc bộ Core Web Vitals của Google, dùng để đánh giá mức độ ổn định của bố cục trang web khi người dùng truy cập. Nếu trang web thường xuyên bị xô lệch nội dung trong lúc tải, trải nghiệm người dùng sẽ bị ảnh hưởng đáng kể và kéo theo hiệu quả SEO giảm sút.

CLS là gì?

CLS (Cumulative Layout Shift) là một chỉ số trong bộ Core Web Vitals dùng để đo mức độ dịch chuyển bất ngờ của bố cục trên trang web khi người dùng đang xem nội dung.

Nói đơn giản, CLS phản ánh việc các thành phần như hình ảnh, nút bấm, đoạn văn hoặc banner trên website bị “nhảy vị trí” đột ngột mà không có tương tác từ người dùng. Điều này thường xảy ra khi trang tải chưa hoàn chỉnh hoặc các tài nguyên như ảnh, font, quảng cáo được load chậm hơn nội dung chính.

Chỉ số CLS càng thấp thì trang web càng ổn định, giúp người dùng trải nghiệm mượt mà hơn, không bị khó chịu vì nội dung thay đổi vị trí bất ngờ. Ngược lại, CLS cao cho thấy bố cục trang kém ổn định và có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng cũng như SEO.

Như thế nào được gọi là điểm CLS tốt?

Khi tìm hiểu về CLS là gì, một yếu tố quan trọng không thể bỏ qua là cách đánh giá chất lượng của chỉ số này. CLS ảnh hưởng trực tiếp đến trải nghiệm người dùng, vì vậy mức điểm càng thấp thì trang web càng ổn định và thân thiện hơn.

Theo tiêu chuẩn của Google, một điểm CLS tốt là khi giá trị từ 0.1 trở xuống. Ở mức này, bố cục trang web được xem là ổn định, ít xảy ra hiện tượng nội dung bị xê dịch bất ngờ trong quá trình tải hoặc người dùng thao tác.

Ngược lại, nếu CLS vượt quá 0.1, điều đó cho thấy trang web có nhiều thay đổi bố cục không mong muốn, dễ gây khó chịu và làm giảm trải nghiệm người dùng.

Để đánh giá chính xác, các chuyên gia SEO thường dựa trên phân vị thứ 75 của dữ liệu tải trang trên cả thiết bị di động và máy tính. Hiểu đơn giản, nếu 75% lượt tải trang có CLS nhỏ hơn hoặc bằng ngưỡng đo được thì kết quả đó được coi là đạt chuẩn. Phần 25% còn lại có thể cao hơn nhưng không ảnh hưởng đến đánh giá tổng thể.

Chi tiết về layout shift

Để hiểu rõ hơn về CLS là gì, cần nắm được khái niệm layout shift – yếu tố cốt lõi tạo nên chỉ số này. Layout shift xảy ra khi bố cục trang web thay đổi vị trí một cách bất ngờ trong quá trình tải hoặc hiển thị nội dung, làm các phần tử trên trang bị xê dịch ngoài ý muốn của người dùng.

Theo cơ chế hoạt động, layout shift được ghi nhận bởi API Instability Layout. Mỗi khi một phần tử hiển thị trên giao diện bị thay đổi vị trí giữa hai khung hình liên tiếp, hệ thống sẽ đánh dấu đó là một “phần tử không ổn định”.

Layout shift được xác định như thế nào?

Layout shift chỉ được tính khi các phần tử đang hiển thị bị thay đổi vị trí so với ban đầu. Trong trường hợp có phần tử mới xuất hiện hoặc thay đổi kích thước, hệ thống cũng sẽ tính là layout shift nếu điều đó làm ảnh hưởng đến vị trí của các phần tử khác trên trang.

Cách xác định điểm số layout shift

Điểm layout shift được tính dựa trên mức độ ảnh hưởng và khoảng cách di chuyển của các phần tử không ổn định. Đây là thành phần quan trọng trong việc xác định CLS là gì trong thực tế.

Công thức tính như sau:

Layout shift score = Impact fraction x Distance fraction

Impact fraction

Impact fraction thể hiện mức độ ảnh hưởng của phần tử bị dịch chuyển lên toàn bộ khu vực hiển thị giữa hai khung hình liên tiếp. Hiểu đơn giản, nó đo lường phần diện tích màn hình bị chiếm bởi phần tử không ổn định trong cả hai trạng thái trước và sau khi thay đổi.

Ví dụ, nếu một phần tử chiếm 50% màn hình ban đầu và sau khi di chuyển nó ảnh hưởng đến tổng cộng 75% diện tích khung hình, thì impact fraction sẽ là 0.75.

Distance fraction

Distance fraction đo khoảng cách mà phần tử không ổn định đã di chuyển so với kích thước lớn nhất của khung hình (chiều ngang hoặc chiều dọc).

Ví dụ, nếu phần tử di chuyển 25% chiều cao của màn hình, thì distance fraction sẽ là 0.25.

Ví dụ về cách tính layout shift score

Khi kết hợp hai chỉ số:

  • Impact fraction = 0.75
  • Distance fraction = 0.25

Ta có:

Layout shift score = 0.75 × 0.25 = 0.1875

Kết quả này cho thấy mức độ dịch chuyển bố cục khá lớn, từ đó ảnh hưởng trực tiếp đến chỉ số CLS là gì và trải nghiệm người dùng trên website.

Trước đây, layout shift chỉ được tính dựa trên impact fraction. Tuy nhiên, distance fraction đã được bổ sung để phản ánh chính xác hơn mức độ ảnh hưởng, tránh trường hợp phần tử lớn chỉ dịch chuyển nhẹ nhưng vẫn bị đánh giá sai lệch là gây thay đổi bố cục nghiêm trọng.

Cách đo lường chỉ số CLS

Để hiểu đầy đủ CLS là gì, không chỉ cần biết khái niệm mà còn phải nắm được cách đo lường chỉ số này trong thực tế. CLS có thể được theo dõi trong cả môi trường người dùng thật (field data) lẫn môi trường thử nghiệm (lab data), tùy vào mục đích phân tích hiệu suất website.

Các công cụ đo CLS trong thực tế (Field data)

Các công cụ này phản ánh dữ liệu từ người dùng thật khi họ truy cập website:

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • Thư viện JavaScript web-vitals

Ví dụ, khi sử dụng PageSpeed Insights, bạn có thể xem trực tiếp chỉ số CLS dựa trên dữ liệu thực tế từ người dùng đã truy cập trang web.

Các công cụ đo CLS trong thử nghiệm (Lab data)

Những công cụ này mô phỏng môi trường tải trang để kiểm tra hiệu suất:

  • Chrome DevTools
  • Lighthouse
  • PageSpeed Insights
  • WebPageTest

Các công cụ này giúp phát hiện sớm vấn đề liên quan đến CLS là gì, nhưng chỉ phản ánh quá trình tải trang ban đầu trong môi trường giả lập, chưa thể mô tả đầy đủ hành vi người dùng thực tế.

Đo lường layout shift bằng JavaScript

Bạn có thể sử dụng API Layout Instability để theo dõi layout shift trực tiếp trong trình duyệt. Ví dụ:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Đoạn code trên giúp ghi lại các sự kiện layout shift và hiển thị trong console, hỗ trợ phân tích hành vi thay đổi bố cục của trang.

Đo CLS bằng JavaScript

Để tính CLS là gì trong JavaScript, các layout shift không mong muốn sẽ được nhóm lại theo từng phiên (session). Sau đó, hệ thống sẽ lấy giá trị lớn nhất của mỗi phiên để xác định điểm CLS cuối cùng. Thư viện web-vitals thường được sử dụng để triển khai cách đo này một cách tối ưu, đảm bảo phản ánh đúng trải nghiệm thực tế của người dùng.

Các lưu ý khi cải thiện điểm CLS

Khi tìm hiểu về chỉ số này, điều quan trọng không chỉ nằm ở việc đo lường mà còn ở cách tối ưu để giảm thiểu các thay đổi bố cục bất ngờ. Mục tiêu chính là giữ cho giao diện trang web luôn ổn định trong suốt quá trình tải và tương tác của người dùng.

Dưới đây là một số nguyên tắc quan trọng giúp cải thiện chỉ số CLS hiệu quả:

  • Luôn khai báo kích thước (width/height) cho hình ảnh và video, hoặc sử dụng CSS như aspect-ratio để giữ chỗ trước cho nội dung đang tải. Điều này giúp trình duyệt phân bổ đúng không gian ngay từ đầu, tránh tình trạng nội dung “nhảy” khi tài nguyên được tải xong.
  • Không chèn thêm nội dung vào phía trên nội dung hiện có, trừ khi đó là phản hồi từ thao tác người dùng (ví dụ: click, submit). Việc này giúp hạn chế các thay đổi bố cục không mong muốn, giữ trải nghiệm ổn định hơn.
  • Ưu tiên sử dụng hiệu ứng chuyển đổi (transition) thay vì animation gây thay đổi layout. Các thuộc tính như transform hoặc opacity sẽ giúp tạo chuyển động mượt mà mà không làm ảnh hưởng đến bố cục trang.

Áp dụng đúng các nguyên tắc này sẽ giúp giảm đáng kể CLS, từ đó cải thiện trải nghiệm người dùng và hiệu suất tổng thể của website.

Tóm lại, hiểu rõ CLS là gì giúp bạn không chỉ nắm được cách Google đánh giá độ ổn định của website mà còn biết cách tối ưu để mang lại trải nghiệm tốt hơn cho người dùng. Một website có CLS thấp sẽ hiển thị mượt mà, hạn chế tình trạng nhảy bố cục và góp phần cải thiện thứ hạng tìm kiếm một cách bền vững.

Nguyễn Thanh Hiền