Việc thay đổi bố cục ngoài dự kiến 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 người dùng mất vị trí trong khi đọc nếu văn bản di chuyển đột ngột cho đến 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, điều này có thể gây thiệt hại nghiêm trọng.
Sự dịch chuyển không mong muốn của nội dung trang thường xảy ra khi tài nguyên tải không đồng bộ hoặc các phần tử DOM được tự động thêm vào trang trước nội dung hiện có. Nguyên nhân gây ra sự thay đổi về 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 bản dự phòng ban đầu, hoặc quảng cáo/tiện ích của bên thứ ba tự đổi kích thước một cách linh động.
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à cách người dùng trải nghiệm trang web đó khiến vấn đề này trở nên tệ hơn. Ví dụ:
- Nội dung được cá nhân hoá hoặc nội dung của bên thứ ba thường có cách hoạt động khác nhau trong quá trình phát triển và trong quá trình sản xuất.
- Hình ảnh thử nghiệm thường đã có trong bộ nhớ đệm của trình duyệt của nhà phát triển, nhưng người dùng cuối sẽ mất nhiều thời gian hơn để tải.
- Các lệnh gọi API chạy cục bộ thường nhanh đến mức độ 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ố Điểm số tổng hợp về mức thay đổi bố cục (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 tình trạng này đối với người dùng thực.
CLS là gì?
CLS là chỉ số đo lường chuỗi điểm số về mức thay đổi bố cục nhiều nhất đối với mọi lần 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í của nó từ một khung được kết xuất sang khung hình tiếp theo. (Thông tin chi tiết về cách tính điểm thay đổi bố cục riêng lẻ sẽ được đề cập ở phần sau của hướng dẫn này.)
Một đợt thay đổi bố cục, hay còn gọi là thời lượng phiên, là khi một hoặc nhiều lần thay đổi bố cục riêng lẻ xảy ra liên tiếp nhanh chóng, chưa đến 1 giây giữa mỗi lần thay đổi và tối đa là 5 giây trong tổng thời lượng của cửa sổ.
Gói lớn nhất là cửa sổ phiên có điểm tích luỹ tối đa của tất cả các thay đổi bố cục trong khoảng thời gian đó.
Điểm CLS tốt là gì?
Để cung cấp trải nghiệm tốt cho người dùng, các trang web nên cố gắng đạt được điểm CLS từ 0,1 trở xuống. Để đảm bảo bạn đạt được mục tiêu này cho hầu hết người dùng của mình, một ngưỡng tốt để đ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à máy tính để bàn.
Để tìm hiểu thêm về nghiên cứu và phương pháp đằng sau đề xuất này, hãy xem bài viết Xác định ngưỡng chỉ số Các chỉ số quan trọng về trang web.
Chi tiết về thay đổi bố cục
Việc thay đổi bố cục được xác định bởi Layout Instability API (API Không ổn định bố cục) báo cáo các mục 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.
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 của chúng. 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ì phần tử đó không được tính là thay đổi bố cục — miễn là thay đổi đó không khiến 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ố thay đổi bố cục, trình duyệt xem xét kích thước khung nhìn và chuyển động của các phần tử không ổn định trong khung nhìn giữa hai khung hình đã kết xuất. Điểm số về mức thay đổi bố cục là tích của 2 số đo của chuyển động đó: phân số tác động và phân số khoảng cách (cả hai đều đượ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 độ tác động của các phần tử không ổn định đến khu vực khung nhìn giữa hai khung hình.
Tỷ lệ tác động của một khung hình cho trước là tổ hợp 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 ảnh trước, có một phần tử chiếm một nửa khung nhìn trong một khung hình. Sau đó, trong khung tiếp theo, phần tử dịch chuyển xuống 25% chiều cao của khung nhìn. Hình chữ nhật màu đỏ có nét đứt thể hiện phần diện tích hiển thị của thành phần kết hợp trong cả hai khung, trong trường hợp này là 75% tổng khung nhìn, do đó tỷ lệ tác động của thành phần 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 lường 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 đoạn 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 hình, 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 đã dịch chuyển 25% chiều cao khung nhìn, tương ứng với phần khoảng cách bằng 0, 25.
Vì vậy, trong ví dụ này, tỷ lệ tác động là 0.75 và tỷ lệ 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ố 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 hộp không thay đổi, do đó, đây không phải là phần tử không ổn định.
Trước đây, nút "Nhấp vào tôi!" không có trong DOM nên vị trí bắt đầu của nút này 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 do đã được di chuyển một phần ra khỏi khung nhìn, nên khu vực vô hình không được xem xét khi tính tỷ lệ tác động. Sự kết hợp giữa các khu vực có thể nhìn thấy của hộp màu xanh lục trong cả hai khung (minh hoạ bằng hình chữ nhật màu đỏ, chấm) giống như diện tích của hộp màu xanh lục trong khung hình đầu tiên — 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 đã dịch chuyển xuống khoảng 14% khung nhìn nên phân số 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 yếu tố không ổn định ảnh hưởng đến điểm số thay đổi bố cục của một trang:
Trong khung đầu tiên của 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, các kết quả khác sẽ được thêm vào danh sách đã sắp xếp.
Mục đầu tiên trong danh sách ("Mèo") không thay đổi vị trí bắt đầu giữa các khung, nên mục này ổn định. Tương tự, các mục mới được thêm vào danh sách trước đây không nằm trong DOM, vì vậy vị trí bắt đầu của chúng cũng không thay đổi. Tuy nhiên, các mục có nhãn "Chó", "Ngựa" và "Ngựa" đều dịch chuyển vị trí bắt đầu, khiến chúng trở thành các yếu tố không ổn định.
Một lần nữa, các hình chữ nhật màu đỏ, chấm bi thể hiện sự kết hợp của ba phần tử không ổn định' trước và sau khu vực, trong trường hợp này là khoảng 60% diện tích khung nhìn (tỷ lệ ảnh hưởng của 0.60).
Các mũi tên biểu thị khoảng cách mà các phần tử không ổn định đã di chuyển so với vị trí xuất phát. Phần tử "Zebra", được biểu thị bằng mũi tên màu xanh dương, đã di chuyển nhiều nhất, khoảng 30% chiều cao của khung nhìn. Đó là 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 về 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. Việc thay đổi bố cục chỉ có ảnh hưởng xấu nếu người dùng không mong đợi điều đó.
Thay đổi bố cục do người dùng khởi tạo
Nhìn chung, việc thay đổi bố cục diễn ra để phản hồi 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ì không có vấn đề gì, miễn là sự thay đổi đó diễn ra đủ gần với tương tác mà mối quan hệ rõ ràng với người dùng.
Ví dụ: nếu một lượt tương tác của người dùng kích hoạt yêu cầu mạng có thể mất một chút thời gian để hoàn thành, tốt nhất bạn nên tạo một số không gian ngay lập tức và hiển thị chỉ báo tải để tránh việc 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ể thử nhấp vào nội dung khác trong khi chờ—một nội dung nào đó có thể di chuyển ra khỏi họ.
Những thay đổi bố cục diễn ra trong vòng 500 mili giây kể từ khi người dùng nhập sẽ có cờ hadRecentInput được đặt để những thay đổi này có thể bị loại trừ khỏi các phép tính.
Ảnh động và hiệu ứng chuyển tiếp
Khi thực hiện tốt, ảnh động và hiệu ứng chuyển tiếp là cách hay để cập nhật nội dung trên trang mà không gây bất ngờ cho người dùng. Nội dung thay đổi đột ngột và đột ngột trên trang hầu như luôn tạo trải nghiệm người dùng kém. 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ề những gì đang diễn ra và dẫn dắt họ giữa các thay đổi về trạng thái.
Hãy nhớ tuân thủ các chế độ 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 hiệu ứng kém hoặc vấn đề gây chú ý khi dùng ả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 việc thay đổi bố cục:
- Thay vì thay đổi thuộc tính
heightvàwidth, hãy sử dụngtransform: scale(). - Để di chuyển các phần tử, hãy tránh thay đổi các thuộc tính
top,right,bottomhoặcleft, mà thay vào đó hãy sử dụngtransform: translate().
Cách đo lường CLS
CLS có thể được đo lường trong phòng thí nghiệm hoặc tại thực tế và chỉ số này được cung cấp trong những công cụ sau đây:
Công cụ thực địa
- Báo cáo trải nghiệm người dùng trên Chrome
- PageSpeed Insights
- Search Console (báo cáo Các chỉ số quan trọng về trang web)
- Thư viện JavaScript
web-vitals
Công cụ cho phòng thí nghiệm
Đo lường sự thay đổi bố cục trong JavaScript
Để đo lường sự thay đổi về bố cục trong JavaScript, bạn nên sử dụng Layout Instability API (API không ổn định của bố cục).
Ví dụ sau đây cho biết cách tạo PerformanceObserver để ghi nhật ký các mục 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 trong JavaScript
Để đo lường CLS trong JavaScript, bạn cần nhóm các mục layout-shift ngoài dự kiến này thành các phiên 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 có chứa cách triển khai để tham khảo về cách tính CLS.
Trong hầu hết các trường hợp, giá trị CLS hiện tại tại thời điểm huỷ tải trang là giá trị CLS cuối cùng cho trang đó, nhưng có một vài trường hợp ngoại lệ quan trọng như được trình bày trong phần tiếp theo. Thư viện JavaScript web vitals giải quyết những điều này nhiều nhất có thể, trong giới hạn của các 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 đó không nên báo cáo giá trị CLS.
- 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 được đặt lại về 0 vì người dùng thấy đây là một lượt truy cập riêng biệt vào trang.
- API không báo cáo các mục nhập
layout-shiftcho những thay đổi xảy ra trong iframe nhưng chỉ số sẽ thực hiện vì chúng 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 chỉ số đó. Khung phụ có thể sử dụng API để báo cáo các mục nhậplayout-shiftcủa chúng cho khung mẹ để tổng hợp.
Ngoài những ngoại lệ này, CLS lại làm tăng thêm độ phức tạp do 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 một thời gian rất lâu — nhiều ngày, vài tuần, vài 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 của thiết bị di động, trình duyệt thường không chạy lệnh gọi lại huỷ tải trang cho các thẻ nền, khiến cho việc báo cáo giá trị "cuối cùng" trở nên khó khăn.
Để xử lý những trường hợp như vậy, bạn phải báo cáo CLS bất cứ khi nào một trang chạy ở chế độ nền – ngoài thời điểm trang đó bị huỷ tải (sự kiện visibilitychange bao gồm cả hai trường hợp này). Sau đó, các 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 cuối cùng trên phần phụ trợ.
Thay vì tự ghi nhớ và xử lý tất cả các trường hợp này, các nhà phát triển có thể sử dụng thư viện JavaScript web-vitals để đo lường CLS. Chỉ số này có 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
Để được hướng dẫn thêm về cách xác định sự thay đổi về bố cục tại hiện trường và cách sử dụng dữ liệu trong phòng thí nghiệm để tối ưu hoá, 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 của Thẻ nhà xuất bản của Google về cách giảm thiểu sự thay đổi bố cục
- Tìm hiểu Điểm số tổng hợp về mức thay đổi bố cục của Annie Sullivan và Steve7s tại #PerfMatters (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 phải thực hiện thay đổi và những thay đổi này có thể hiển thị 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 của bạn.
Để giúp bạn quản lý vấn đề này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩa các chỉ số này sẽ xuất hiện trong Nhật ký thay đổi này.
Nếu có ý 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 quan trọng về phản hồi trên web.