Cumulative Layout Shift (CLS)

Những thay đổi ngoài dự kiến về bố cục có thể làm gián đoạn trải nghiệm người dùng theo nhiều cách, từ việc khiến họ mất vị trí trong lúc đọc nếu văn bản di chuyển đột ngột, cho đến việc khiến họ nhấp vào sai đường liên kết hoặc nút. Trong một số trường hợp, việc này có thể gây ra thiệt hại nghiêm trọng.

Nội dung trang thường bị di chuyển ngoài dự kiến khi tài nguyên tải không đồng bộ hoặc các phần tử DOM được thêm động vào trang trước nội dung hiện có. Nguyên nhân gây ra sự thay đổi bố cục có thể là hình ảnh hoặc video có kích thước không xác định, phông chữ hiển thị lớn hơn hoặc nhỏ hơn so với dự phòng ban đầu, hoặc quảng cáo hoặc tiện ích của bên thứ ba tự động thay đổi kích thước.

Sự khác biệt giữa cách hoạt động của một trang web trong quá trình phát triển và trải nghiệm của người dùng sẽ khiến vấn đề này trở nên nghiêm trọng hơn. Ví dụ:

• Nội dung được cá nhân hoá hoặc của bên thứ ba thường có cách thức hoạt động khác nhau trong quá trình phát triển và sản xuất.
• Hình ảnh thử nghiệm thường đã có trong bộ nhớ đệm trên trình duyệt của nhà phát triển, nhưng người dùng cuối lại tải lâu hơn.
• Các lệnh gọi API chạy cục bộ thường nhanh đến mức sự chậm trễ không đáng kể trong quá trình phát triển có thể trở nên đáng kể trong quá trình sản xuất.

Chỉ số Mức thay đổi bố cục tích luỹ (CLS) giúp bạn giải quyết vấn đề này bằng cách đo lường tần suất xảy ra của vấn đề này đối với người dùng thực.

CLS (Mức thay đổi bố cục tích luỹ) là gì?

CLS là chỉ số đo lường cho điểm thay đổi bố cục hàng loạt lớn nhất đối với mọi thay đổi bố cục không mong muốn xảy ra trong toàn bộ vòng đời của một trang.

Sự thay đổi bố cục xảy ra bất cứ khi nào một phần tử hiển thị thay đổi vị trí từ một khung hình đã kết xuất sang khung hình tiếp theo. (Thông tin chi tiết về cách tính từng điểm thay đổi bố cục được đề cập ở phần sau của hướng dẫn này.)

Một đợt thay đổi bố cục, được gọi là cửa sổ phiên, là khi một hoặc nhiều lần thay đổi bố cục riêng lẻ diễn ra liên tiếp nhanh chóng với chưa đến 1 giây giữa mỗi lần chuyển và tối đa là 5 giây trong tổng thời lượng cửa sổ.

Gói lớn nhất là thời lượng phiên có điểm tích luỹ tối đa của tất cả các lần thay đổi bố cục trong cửa sổ đó.

Điểm CLS (Mức thay đổi bố cục tích luỹ) tốt là gì?

Để mang lại trải nghiệm tốt cho người dùng, các trang web nên cố gắng đạt điểm CLS từ 0,1 trở xuống. Để đảm bảo hầu hết người dùng của bạn đạt được mục tiêu này, ngưỡng phù hợp để đo lường là phân vị thứ 75 của lượt tải trang, được phân đoạn trên thiết bị di động và thiết bị máy tính.

Để tìm hiểu thêm về nghiên cứu và phương pháp áp dụng cho đề xuất này, vui lòng xem bài viết Xác định ngưỡng chỉ số Core Web Vitals.

Chi tiết thay đổi bố cục

Thay đổi bố cục được xác định bằng Layout Instability API. API này báo cáo các mục nhập layout-shift bất cứ khi nào một phần tử hiển thị trong khung nhìn thay đổi vị trí bắt đầu (ví dụ: vị trí trên cùng và bên trái trong chế độ ghi mặc định) giữa hai khung hình. Những phần tử như vậy được coi là phần tử không ổn định.

Xin lưu ý rằng việc thay đổi bố cục chỉ xảy ra khi các phần tử hiện có thay đổi vị trí bắt đầu. Nếu một phần tử mới được thêm vào DOM hoặc một phần tử hiện có thay đổi kích thước, thì việc này không được tính là thay đổi bố cục – miễn là thay đổi đó không làm cho các phần tử hiển thị khác thay đổi vị trí bắt đầu của chúng.

Điểm số về mức thay đổi bố cục

Để tính điểm số về mức thay đổi bố cục, trình duyệt xem xét kích thước khung nhìn và sự di chuyển của các phần tử không ổn định trong khung nhìn giữa hai khung hình được kết xuất. Điểm số về mức thay đổi bố cục là tích gồm hai số liệu đo lường của sự thay đổi đó: phân số tác động và phân số khoảng cách (cả hai được xác định bên dưới).

layout shift score = impact fraction * distance fraction

Tỷ lệ tác động

Tỷ lệ tác động đo lường mức độ ảnh hưởng của các phần tử không ổn định đến khu vực khung nhìn giữa hai khung.

Tỷ lệ ảnh hưởng của một khung nhất định là sự kết hợp giữa các khu vực nhìn thấy của tất cả các phần tử không ổn định của khung đó và khung trước đó, dưới dạng một phần trong tổng diện tích của khung nhìn.

Trong hình trước, có một phần tử chiếm một nửa khung nhìn trong một khung. Sau đó, trong khung tiếp theo, phần tử này dịch chuyển xuống 25% chiều cao của khung nhìn. Hình chữ nhật màu đỏ, nét đứt cho biết vùng hiển thị của phần tử trong cả hai khung hình ở cùng một khung hình, trong trường hợp này là 75% tổng khung nhìn, vì vậy tỷ lệ tác động của phần tử này là 0.75.

Phân số khoảng cách

Phần còn lại của phương trình điểm số thay đổi bố cục đo khoảng cách mà các phần tử không ổn định đã di chuyển so với khung nhìn. Phân số khoảng cách là khoảng cách lớn nhất theo chiều ngang hoặc chiều dọc mà bất kỳ phần tử không ổn định nào đã di chuyển trong khung chia cho kích thước lớn nhất của khung nhìn (chiều rộng hoặc chiều cao, tuỳ theo giá trị nào lớn hơn).

Trong ví dụ trước, kích thước lớn nhất của khung nhìn là chiều cao và phần tử không ổn định đã di chuyển 25% chiều cao khung nhìn, khiến phân số khoảng cách là 0, 25.

Vì vậy, trong ví dụ này, phân số tác động là 0.75 và phân số khoảng cách là 0.25, do đó, điểm thay đổi bố cục là 0.75 * 0.25 = 0.1875.

Ví dụ

Ví dụ tiếp theo minh hoạ việc thêm nội dung vào một phần tử hiện có ảnh hưởng như thế nào đến điểm số về mức thay đổi bố cục:

Trong ví dụ này, hộp màu xám thay đổi kích thước nhưng vị trí bắt đầu của nó không thay đổi vì vậy nó không phải là phần tử không ổn định.

Nút "Nhấp vào tôi!" trước đó không có trong DOM, do đó vị trí bắt đầu của nút cũng không thay đổi.

Tuy nhiên, vị trí bắt đầu của hộp màu xanh lục có thay đổi nhưng vì nó đã bị di chuyển một phần ra khỏi khung nhìn, nên vùng vô hình sẽ không được xem xét khi tính phân số tác động. Sự hợp nhất của các khu vực hiển thị của hộp màu xanh lục trong cả hai khung (được minh hoạ bằng hình chữ nhật màu đỏ, chấm) giống với khu vực của hộp màu xanh lục trong khung đầu tiên, chiếm 50% khung nhìn. Tỷ lệ tác động là 0.5.

Phân số khoảng cách được minh hoạ bằng mũi tên màu tím. Hộp màu xanh lục đã di chuyển xuống khoảng 14% khung nhìn, vì vậy, phần khoảng cách là 0.14.

Điểm số về mức thay đổi bố cục là 0.5 x 0.14 = 0.07.

Ví dụ sau đây cho thấy cách nhiều phần tử không ổn định ảnh hưởng đến điểm số về mức thay đổi bố cục của một trang:

Trong khung đầu tiên trong hình ảnh trước, có 4 kết quả của một yêu cầu API dành cho động vật, được sắp xếp theo thứ tự bảng chữ cái. Trong khung thứ hai, nhiều kết quả hơn sẽ được thêm vào danh sách được sắp xếp.

Mục đầu tiên trong danh sách ("Cat") không thay đổi vị trí bắt đầu giữa các khung, do đó mục này luôn ổn định. Tương tự, các mục mới được thêm vào danh sách trước đó không nằm trong DOM, vì vậy vị trí bắt đầu của các mục này cũng không thay đổi. Nhưng các mục có nhãn "Chó", "Ngựa" và "Ngựa vằn" đều dịch chuyển vị trí bắt đầu, làm cho chúng các thành phần không ổn định.

Một lần nữa, các hình chữ nhật màu đỏ, có nét đứt đại diện cho sự hợp nhất của ba thành phần không ổn định này khu vực trước và sau, trong trường hợp này là khoảng 60% diện tích của khung nhìn (tỷ lệ tác động của 0.60).

Mũi tên thể hiện khoảng cách mà các phần tử không ổn định đã di chuyển khỏi vị trí bắt đầu. "Ngựa vằn" được biểu thị bằng mũi tên màu xanh dương, đã di chuyển nhiều nhất, chiếm khoảng 30% chiều cao của khung nhìn. Điều đó tạo ra phân số khoảng cách trong ví dụ này là 0.3.

Điểm số về mức thay đổi bố cục là 0.60 x 0.3 = 0.18.

Thay đổi bố cục dự kiến so với ngoài dự kiến

Không phải tất cả thay đổi bố cục đều là xấu. Trên thực tế, nhiều ứng dụng web động thường xuyên thay đổi vị trí bắt đầu của các phần tử trên trang. Sự thay đổi bố cục chỉ kém hiệu quả nếu người dùng không mong đợi điều đó.

Thay đổi bố cục do người dùng thực hiện

Nhìn chung, việc thay đổi bố cục xảy ra để phản hồi các tương tác của người dùng (chẳng hạn như nhấp hoặc nhấn vào đường liên kết, nhấn nút hoặc nhập vào hộp tìm kiếm) thường không có vấn đề gì, miễn là sự thay đổi đó diễn ra đủ gần với hoạt động tương tác mà người dùng có thể thấy rõ mối quan hệ.

Ví dụ: nếu một hoạt động tương tác của người dùng kích hoạt một yêu cầu mạng có thể mất một chút thời gian để hoàn thành, thì tốt nhất là tạo ngay một số không gian và hiển thị chỉ báo tải để tránh sự thay đổi bố cục gây khó chịu khi yêu cầu hoàn tất. Nếu người dùng không nhận ra nội dung nào đó đang tải hoặc không biết khi nào tài nguyên sẽ sẵn sàng, họ có thể cố gắng nhấp vào một nội dung khác trong khi chờ — nội dung nào đó có thể di chuyển ra từ bên dưới họ.

Những thay đổi về bố cục xảy ra trong vòng 500 mili giây từ hoạt động đầu vào của người dùng sẽ được thiết lập cờ hadRecentInput để có thể bị loại trừ khỏi các phép tính.

Ảnh động và hiệu ứng chuyển tiếp

Ảnh động và hiệu ứng chuyển tiếp là những cách hiệu quả để cập nhật nội dung trên trang mà không gây bất ngờ cho người dùng, nếu được thực hiện tốt. Nội dung thay đổi đột ngột và bất ngờ trên trang hầu như luôn tạo ra trải nghiệm kém cho người dùng. Tuy nhiên, nội dung di chuyển dần dần và tự nhiên từ vị trí này sang vị trí tiếp theo thường có thể giúp người dùng hiểu rõ hơn về điều gì đang xảy ra và hướng dẫn họ thay đổi trạng thái.

Hãy nhớ tuân theo các tùy chọn cài đặt của trình duyệt prefers-reduced-motion, vì một số khách truy cập trang web có thể gặp phải các ảnh hưởng không tốt hoặc các vấn đề về sự chú ý từ ảnh động.

Thuộc tính CSS transform cho phép bạn tạo ảnh động cho các phần tử mà không cần kích hoạt thay đổi bố cục:

• Thay vì thay đổi các thuộc tính height và width, hãy dùng transform: scale().
• Để di chuyển các phần tử, bạn nên tránh thay đổi các thuộc tính top, right, bottom hoặc left mà hãy dùng transform: translate().

Cách đo lường CLS

Bạn có thể đo lường CLS tại phòng thí nghiệm hoặc tại hiện trường. Chỉ số này có trong những công cụ sau:

Công cụ tại hiện trường

• Trải nghiệm người dùng trên Chrome Báo cáo
• PageSpeed Insights
• Search Console (Các chỉ số quan trọng về trang web báo cáo)
• Thư viện JavaScript web-vitals

Công cụ cho phòng thí nghiệm

• Công cụ của Chrome cho nhà phát triển
• Lighthouse
• PageSpeed Insights
• WebPageTest

Đo lường sự thay đổi về bố cục trong JavaScript

Để đo lường sự thay đổi về bố cục trong JavaScript, bạn cần sử dụng Layout Instability API.

Ví dụ sau đây cho biết cách tạo PerformanceObserver để ghi 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 CLS (Mức thay đổi bố cục tích luỹ) trong JavaScript

Để đo lường CLS (Mức thay đổi bố cục tích luỹ) trong JavaScript, bạn cần nhóm các mục nhập layout-shift ngoài dự kiến này thành các phiên hoạt động và tính toán giá trị phiên tối đa. Bạn có thể tham khảo mã nguồn thư viện JavaScript web vitals. Mã nguồn này có chứa thông tin triển khai tham khảo về cách tính CLS (Mức thay đổi bố cục tích luỹ).

Trong hầu hết các trường hợp, giá trị CLS (Mức thay đổi bố cục tích luỹ) hiện tại tại thời điểm trang bị huỷ tải là giá trị CLS (Mức thay đổi bố cục tích luỹ) cuối cùng cho trang đó. Tuy nhiên, có một vài trường hợp ngoại lệ quan trọng như trình bày trong phần tiếp theo. Thư viện JavaScript web vitals tính đến các thành phần này nhiều nhất có thể trong giới hạn của API Web.

Sự khác biệt giữa chỉ số và API

• Nếu một trang được tải ở chế độ nền hoặc chạy ở chế độ nền trước khi trình duyệt vẽ bất kỳ nội dung nào, thì trang đó sẽ không được báo cáo bất kỳ giá trị CLS (Mức thay đổi bố cục tích luỹ).
• Nếu một trang được khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi, thì giá trị CLS (Mức thay đổi bố cục tích luỹ) cần được đặt lại về 0 vì người dùng sẽ thấy rằng đây là một lượt truy cập trang riêng biệt.
• API không báo cáo mục nhập layout-shift cho các ca làm việc xảy ra trong iframe nhưng chỉ số này vẫn hoạt động vì đây là một phần trong trải nghiệm người dùng trên trang. Điều này có thể cho thấy sự khác biệt giữa CrUX và RUM. Để đo lường CLS một cách chính xác, bạn nên cân nhắc các yếu tố này. Khung phụ có thể dùng API để báo cáo các mục nhập layout-shift lên khung mẹ để tổng hợp.

Ngoài các ngoại lệ này, CLS có một số độ phức tạp hơn do thực tế là nó đo lường toàn bộ thời gian tồn tại của một trang:

• Người dùng có thể mở một thẻ trong khoảng thời gian rất dài – ngày, tuần, tháng. Trên thực tế, người dùng có thể không bao giờ đóng thẻ.
• Trên hệ điều hành dành cho thiết bị di động, các trình duyệt thường không chạy lệnh gọi lại huỷ tải trang cho các thẻ trong nền, dẫn đến việc báo cáo lỗi "cuối cùng" trở nên khó khăn giá trị.

Để xử lý những trường hợp như vậy, bạn nên báo cáo CLS mỗi khi một trang ở chế độ nền, ngoài bất cứ lúc nào trang đó bị huỷ tải (sự kiện visibilitychange bao gồm cả hai trường hợp này). Sau đó, những hệ thống phân tích nhận được dữ liệu này sẽ cần tính toán giá trị CLS (Mức thay đổi bố cục tích luỹ) cuối cùng trong phần phụ trợ.

Thay vì tự ghi nhớ và ứng phó với tất cả các trường hợp này, nhà phát triển có thể dùng thư viện JavaScript web-vitals để đo lường CLS (Mức thay đổi bố cục tích luỹ) tính đến mọi trường hợp nêu trên, ngoại trừ trường hợp iframe:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

Cách cải thiện CLS (Mức thay đổi bố cục tích luỹ)

Để được hướng dẫn thêm về cách xác định những thay đổi về bố cục trong lĩnh vực này và sử dụng dữ liệu trong phòng thí nghiệm nhằm tối ưu hoá những thay đổi này, hãy xem hướng dẫn của chúng tôi về cách tối ưu hoá CLS.

Tài nguyên khác

• Hướng dẫn về giảm thiểu sự thay đổi bố cục trong Thẻ nhà xuất bản của Google
• Bài viết Tìm hiểu về mức độ thay đổi bố cục tích luỹ của Annie Sullivan và Steve Kos tại #PerfMatters (năm 2020)

Nhật ký thay đổi

Đôi khi, lỗi được phát hiện trong các API dùng để đo lường chỉ số và đôi khi trong định nghĩa của chính các chỉ số đó. Do đó, đôi khi bạn cần phải thực hiện thay đổi và những thay đổi này có thể xuất hiện dưới dạng sự cải thiện hoặc hồi quy trong báo cáo nội bộ và trang tổng quan.

Để giúp bạn quản lý việc này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩa của các chỉ số này sẽ xuất hiện trong Nhật ký thay đổi này.

Nếu muốn gửi ý kiến phản hồi về các chỉ số này, bạn có thể gửi ý kiến phản hồi trong nhóm Google phản hồi web-vitals-feedback.