Phát triển điểm số tổng hợp về mức thay đổi bố cục trong công cụ web

Kể từ hôm nay, thay đổi đối với CLS đã được triển khai trên một số nền tảng công cụ web của Chrome, bao gồm Lighthouse, PageSpeed Insights và Báo cáo trải nghiệm người dùng của Chrome.

Addy Osmani

Elizabeth Sweeny

Hôm nay, chúng tôi muốn chia sẻ cách chúng tôi phát triển phương pháp đo lường chỉ số Điểm số tổng hợp về mức thay đổi bố cục (CLS) trên một số nền tảng công cụ web của Chrome. Đối với nhà phát triển, những thay đổi này sẽ phản ánh tốt hơn trải nghiệm người dùng trên các trang tồn tại trong thời gian dài (chẳng hạn như những trang có tính năng cuộn vô hạn hoặc ứng dụng trang đơn). Những nội dung cập nhật này đối với CLS sẽ được triển khai cho các công cụ như Lighthouse, PageSpeed Insights và Báo cáo trải nghiệm người dùng của Chrome.

Tất cả chúng ta đều mong muốn bố cục thay đổi ít hơn trên web. Đây chính là lúc chỉ số CLS đã trở nên hữu ích trong việc đo lường độ ổn định về hình ảnh của một trang web. Chế độ này khuyến khích các trang web thiết lập kích thước phù hợp hơn cho nội dung (chẳng hạn như hình ảnh hoặc quảng cáo) để có thể góp phần mang đến những lựa chọn đột phá về nội dung cho người dùng.

Chỉ số này có tên là "tích luỹ" vì điểm của mỗi lượt thay đổi được tính tổng trong suốt thời gian hoạt động của một trang. Mặc dù tất cả những thay đổi về bố cục trên web đều gây ra trải nghiệm kém cho người dùng, nhưng những trang hoạt động trong thời gian dài như Ứng dụng trang đơn (SPA) hoặc ứng dụng cuộn vô hạn sẽ tích luỹ nhiều CLS (Điểm số tổng hợp về mức thay đổi bố cục) theo thời gian. Bằng cách giới hạn phương pháp tổng hợp ở "khoảng thời gian thay đổi" kém nhất, CLS hiện tại có thể được đo lường một cách nhất quán hơn bất kể thời lượng phiên.

Như đã thông báo trong bài viết Cải tiến chỉ số CLS, chúng tôi sẽ điều chỉnh chỉ số CLS thành khoảng thời gian phiên tối đa có khoảng trống 1 giây, tối đa là 5 giây. Bản cập nhật này phản ánh chính xác hơn trải nghiệm người dùng trên các trang tồn tại lâu dài. Khi thay đổi này được áp dụng, 70% nguồn gốc sẽ không có thay đổi nào về CLS ở bách phân vị thứ 75 và 30% nguồn gốc còn lại sẽ có sự cải thiện.

Triển khai mức điều chỉnh cửa sổ theo CLS (Điểm số tổng hợp về mức thay đổi bố cục)

Chúng ta đã nói về định nghĩa CLS mới cập nhật là thời lượng phiên tối đa có khoảng chênh lệch 1 giây, giới hạn là 5 giây. Điều này có ý nghĩa gì với các công cụ?

Kể từ hôm nay, thay đổi này đối với CLS đã được triển khai trên một số nền tảng công cụ web của Chrome, bao gồm cả Lighthouse, PageSpeed Insights và Báo cáo trải nghiệm người dùng của Chrome. Dưới đây là thông tin tóm tắt về việc triển khai mức điều chỉnh theo cửa sổ CLS, cũng như những công cụ vẫn cho phép đo điểm chuẩn so với phương thức triển khai ban đầu.

Công cụ của Chrome cho nhà phát triển cũng sẽ sớm được cập nhật để hỗ trợ việc điều chỉnh cửa sổ. Nội dung cập nhật đối với CLS cũng đã được thực hiện cho Search Console và sẽ có hiệu lực kể từ ngày 1 tháng 6 năm 2021.

Đối với hầu hết các nhà phát triển, thay đổi này dự kiến sẽ diễn ra liền mạch mà không cần làm gì để tận dụng dữ liệu từ bản sửa lỗi.

CLS "cũ"

Xin lưu ý rằng CLS "cũ" đo lường sự thay đổi bố cục trong toàn bộ thời gian hoạt động của trang. Vì một số nhà phát triển có thể muốn theo dõi định nghĩa cũ về CLS cùng với việc điều chỉnh cửa sổ, chúng tôi xin thông báo một tin vui: chúng tôi đang hiển thị "CLS cũ" trong Lighthouse và CrUX.

Trong Lighthouse phiên bản 8, tính năng này có trong JSON dưới dạng audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.

Bạn có thể tìm thấy API này dưới dạng experimental_uncapped_cumulative_layout_shift trong API CrUX và dưới dạng experimental.uncapped_cumulative_layout_shift trong CrUX BigQuery.

Sau ngày 1 tháng 6, các yêu cầu API CrUX sẽ trả về chỉ số "CLS cũ":

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

Sau ngày 8 tháng 6, CrUX BigQuery sau đây sẽ so sánh CLS phiên bản cũ và mới:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

Bạn có thể tiếp tục tồn tại dữ liệu này trong tối đa 6 tháng, với "CLS cũ" sẽ bị loại bỏ kể từ ngày 14 tháng 12 năm 2021.

Cập nhật trọng số CLS trong Lighthouse

Khi CLS được ra mắt lần đầu tiên trong Lighthouse, đây là một chỉ số hoàn toàn mới. Do đó, để đảm bảo các nhà phát triển có thời gian kiểm thử, đo điểm chuẩn và tối ưu hoá, CLS lại được cân nhắc ít hơn về điểm hiệu suất.

Hiện tại, sau khi được các nhà phát triển quản lý một thời gian, điểm của Lighthouse đã tăng trọng số của CLS từ 5% lên 15%, phù hợp với phương pháp đặt Các chỉ số quan trọng về trang web là chỉ số có trọng số cao nhất trong điểm số của Lighthouse.

Bạn có thể tìm thấy trọng số mới cập nhật của các chỉ số trong Lighthouse phiên bản 8 ở công cụ tính điểm.

Hoạt động triển khai CLS của Lighthouse 8.0 bao gồm cả việc kết xuất cửa sổ và đóng góp CLS từ các khung phụ. Trước phiên bản 8.0, CLS (Điểm số tổng hợp về mức thay đổi bố cục) trong Lighthouse không có CLS (Điểm số tổng hợp về mức thay đổi bố cục) của khung phụ vào việc tính toán chỉ số, nhưng giờ đây, CLS lại có thêm. Để xác nhận, CLS (Điểm số tổng hợp về mức thay đổi bố cục) tại hiện trường mà CrUX đo lường cũng sẽ xử lý việc lập cửa sổ và các khung hình phụ theo cách tương tự.

Tuy nhiên, điểm khác biệt chính giữa CLS phòng thí nghiệm và CLS hiện trường là thời lượng quan sát của CLS kết thúc ở trạng thái "tải đầy đủ" như được xác định trong điều kiện của phòng thí nghiệm, còn đối với hiện trường, cửa sổ quan sát kéo dài đến toàn bộ thời gian hoạt động của trang, bao gồm cả hoạt động sau khi tải. Điều đó có nghĩa là việc điều chỉnh cửa sổ sẽ giảm thiểu sự khác biệt này đáng kể.

Tự đo lường tại hiện trường

Nếu muốn đo lường hoạt động triển khai CLS mới nhất, bạn cũng có thể ghi lại dữ liệu này cho dữ liệu thực tế thông qua rum bằng cách sử dụng đoạn mã PerformanceObserver sau đây.

Bạn cũng có thể dựa trực tiếp vào thư viện JavaScript cho Các chỉ số quan trọng về trang web. Thư viện này cũng đã được cập nhật theo thay đổi này.

Nội dung cập nhật bổ sung

Ngoài các bản cập nhật cho Điểm số tổng hợp về mức thay đổi bố cục, chúng tôi cũng thực hiện các nội dung cập nhật sau đây liên quan đến các chỉ số đối với công cụ web của chúng tôi:

• Chúng tôi đang cập nhật lên định nghĩa mới nhất về chỉ số Thời gian hiển thị nội dung lớn nhất. CrUX API, PSI, PSI API, Search Console sẽ cập nhật vào ngày 1 tháng 6 năm 2021. CrUX BigQuery sẽ cập nhật vào ngày 8 tháng 6 năm 2021.
• Trong CrUX, các ngưỡng lập trình liên kết Nội dung đầu tiên đã được cập nhật thành: Tốt: [0-1,8 giây], Cần cải thiện: (1,8 giây – 3 giây), Kém: [3s-∞]

Kết luận

Chúng tôi hy vọng thay đổi này sẽ phản ánh quá trình chuyển đổi suôn sẻ cho hầu hết các trang web. Bạn nên xem bài viết Các chỉ số quan trọng về trang web và Tối ưu hoá CLS để biết các mẹo và thủ thuật về cách đo lường và tối ưu hoá bố cục thay đổi. Như thường lệ, vui lòng liên hệ qua nhóm phản hồi quan trọng trên web để nhận ý kiến phản hồi về các chỉ số và diễn đàn phản hồi cụ thể về công cụ của chúng tôi cho Lighthouse, cũng như Báo cáo trải nghiệm người dùng của Chrome về các vấn đề liên quan đến công cụ. Chúc mừng!

Cảm ơn Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose và Paul Ireland đã chia sẻ ý kiến phản hồi.

Hình ảnh chính của Barn Images / @barnimages trên Unsplash