Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một chỉ số Chỉ số quan trọng chính của trang web ổn định. Đây là một chỉ số quan trọng, tập trung vào người dùng để đo lường độ ổn định của hình ảnh vì nó giúp định lượng tần suất người dùng trải nghiệm những thay đổi ngoài dự kiến về bố cục. CLS thấp giúp đảm bảo trang web thú vị.
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 đế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, đ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 dẫn đến chuyển động 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 dự phòng, hoặc quảng cáo hoặc tiện ích của bên thứ ba tự động đổ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à cách người dùng trải nghiệm trang web đó khiến vấn đề 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 thức 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 của người dùng thực.
CLS là gì?
CLS là chỉ số đo lường số lượng đ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 thời gian hoạt động 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. Xem bài viết Điểm số thay đổi bố cục để biết thông tin chi tiết về cách đo lường những thay đổi 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 với chưa đến 1 giây giữa mỗi lần thay đổi, trong khoảng thời gian tối đa là 5 giây.
Gói lớn nhất là cửa sổ phiên có điểm số 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 tốt là gì?
Để cung cấp trải nghiệm tốt cho người dùng, trang web phải có điểm CLS từ 0,1 trở xuống. Để đảm bảo đạt được mục tiêu này cho hầu hết người dùng, bạn nên đo lường phân vị thứ 75 của lượt tải trang, được phân chia trên thiết bị di động và máy tính.
Để 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ằng API không ổn định của bố cục. API này sẽ 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. Các phần tử có thay đổi vị trí bắt đầu được coi là phần tử không ổn định.
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ử đó chỉ được tính là một lần thay đổi bố cục nếu sự thay đổi đó 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 thay đổi bố cục, trình duyệt sẽ xem xét kích thước khung nhìn và chuyển động của các thành phần 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 của 2 số đo của chuyển động đó: phân số tác động và phân số khoảng cách.
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 hình.
Tỷ lệ tác động của một khung hình nhất định là tổng 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 của tổng diện tích của khung nhìn.
Hình ảnh này cho thấy một phần tử chiếm một nửa khung nhìn trong một khung hình. Trong khung hình tiếp theo, phần tử này giảm 25% chiều cao khung nhìn. Hình chữ nhật có nét đứt màu đỏ cho biết vùng hiển thị của phần tử trên cả hai khung, trong trường hợp này là 75% tổng khung nhìn, do đó phần tác động của phần tử là 0.75.
Phân số khoảng cách
Phần khác 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 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 kích thước nào lớn hơn).
Trong ví dụ này, 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, điều này tạo thành phần khoảng cách 0.25.
Một phần tác động của 0.75 và một phần khoảng cách là 0.25 tạo ra đ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, vì vậy, đây không phải là một phần tử không ổn định.
Nút "Nhấp vào tôi!" trước đây không có trong DOM nên vị trí bắt đầu của nút này cũng không thay đổi.
Vị trí bắt đầu của hộp màu xanh lục có thay đổi, nhưng đã được di chuyển một phần ra khỏi khung nhìn và khu vực vô hình không được xem xét khi tính tỷ lệ tác động. Tổng các vùng hiển thị của hộp màu xanh lục trong cả hai khung (hình chữ nhật có nét đứt màu đỏ) sẽ giống với 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 xanh dương. Hộp màu xanh lục đã dịch 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 cho thấy nhiều phần tử không ổn định ảnh hưởng như thế nào đến điểm thay đổi bố cục của một trang:
Mục đầu tiên trong danh sách ("Cat") không thay đổi vị trí bắt đầu giữa các khung hình, vì vậy, mục này ổn định. 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 các mục này 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 phần tử không ổn định.
Xin nhắc lại, hình chữ nhật có nét đứt màu đỏ biểu thị diện tích của 3 thành phần không ổn định trước và sau khi di chuyển, trong trường hợp này là khoảng 60% diện tích khung nhìn (tỷ lệ tác độ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í bắt đầu. 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. Điều đó tạo nên 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ó hại 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, sự 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 một đường liên kết, nhấn nút hoặc nhập vào hộp tìm kiếm) thường ổn, 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 lúc để hoàn tất, 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 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 thời điểm 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ờ và phần tử khác đó có thể di chuyển ra khỏi bên dưới khi phần tử đầu tiên tải xong.
Những thay đổi về 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 để bạn có thể loại trừ những thay đổi này 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à không mong muốn trên trang hầu như luôn tạo ra 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í khác thường có thể giúp người dùng hiểu rõ hơn về những gì đang diễn ra và hướng dẫn 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ì ảnh động có thể gây ra vấn đề về sức khoẻ hoặc sự chú ý cho một số khách truy cập trang web.
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:
- Hãy dùng
transform: scale()thay vì thay đổi các thuộc tínhheightvàwidth. - Để di chuyển các phần tử, hãy sử dụng
transform: translate()thay vì thay đổi các thuộc tínhtop,right,bottomhoặcleft.
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 địa và có sẵn trong các 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, hãy sử dụng Layout Instability API (API Bất ổ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, hãy nhóm các mục layout-shift ngoài dự kiến mà bạn đã đăng nhập vào phiên và tính toán giá trị phiên tối đa. Để triển khai tham khảo, hãy tham khảo mã nguồn thư viện JavaScript web vitals.
Trong hầu hết các trường hợp, giá trị CLS 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 được liệt kê 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 hiển thị 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ì bạn phải đặt lại giá trị CLS về 0 vì người dùng thấy đây là một lượt truy cập trang khác biệt.
- API không báo cáo các mục nhập
layout-shiftcho các thay đổi xảy ra trong iframe, nhưng chỉ số này lại có 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 đúng cách, bạn phải thêm các iframe. Các khung phụ có thể sử dụng API để báo cáo các mục nhậplayout-shiftcho khung mẹ nhằm tổng hợp.
Ngoài những ngoại lệ này, CLS lại còn phức tạp hơn vì nó đo lường toàn bộ thời gian hoạt động của một trang:
- Người dùng có thể mở một thẻ trong một thời gian rất dài – nhiều ngày, nhiều tuần, thậm chí là 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 dành cho 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 thẻ trong 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, ngoài bất cứ khi nào trang đó được huỷ tải, hệ thống của bạn nên báo cáo CLS bất cứ khi nào một trang chạy ở chế độ nền. 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, 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 được đề cập ở đây, 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 trong 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à Steve Kobes 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 phần định nghĩa của chính các chỉ số. Do đó, đôi khi bạn phải thực hiện các thay đổi và những thay đổi này có thể hiển thị dưới dạng mức độ cải thiện hoặc mứ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ý việc này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩa về các chỉ số này sẽ xuất hiện trong Nhật ký thay đổi này.
Nếu bạn muốn gửi ý kiến phản hồi về các chỉ số này, hãy gửi ý kiến phản hồi trong nhóm Google có ý kiến phản hồi trên web.