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, chúng tôi đã triển khai một thay đổi đối với CLS 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

Ngày xuất bản: 2 tháng 6 năm 2021

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 Đ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 đối với các trang tồn tại lâu dài (chẳng hạn như các trang có tính năng cuộn vô hạn hoặc ứng dụng trang đơn). Những điểm 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.

Chúng ta đều mong muốn thấy ít thay đổi bố cục hơn trên web. Đây là nơi chỉ số CLS đã chứng minh được tính hữu ích trong việc đo lường độ ổn định về hình ảnh của một trang web. Điều này giúp khuyến khích các trang web đặt 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 cho người dùng những nội dung thú vị.

Chỉ số này được đặt tên là "tích luỹ" vì điểm số của từng lần thay đổi riêng lẻ được cộng dồn trong suốt thời gian hoạt động của trang. Mặc dù tất cả các thay đổi về bố cục trên web đều gây ra trải nghiệm người dùng kém, nhưng các trang tồn tại lâu như Ứng dụng trang đơn (SPA) hoặc ứng dụng cuộn vô hạn sẽ tự nhiên tích luỹ nhiều CLS hơn theo thời gian. Bằng cách giới hạn dữ liệu tổng hợp ở "khoảng thời gian" thay đổi tệ nhất, giờ đây, bạn có thể đo lường CLS 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 Phát triể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 với khoảng chênh lệch 1 giây, giới hạn là 5 giây, nội dung cập nhật này phản ánh chính xác hơn trải nghiệm người dùng đối với các trang tồn tại lâu dài. Khi thay đổi này được áp dụng, 70% gốc sẽ không thấy bất kỳ thay đổi nào về CLS ở phân vị thứ 75 và 30% gốc còn lại sẽ thấy sự cải thiện.

Ra mắt tính năng điều chỉnh khoảng thời gian cho CLS

Chúng ta đã thảo luận về định nghĩa CLS mới cập nhật là khoảng thời gian phiên tối đa với khoảng chênh lệch 1 giây, giới hạn là 5 giây. Điều đó có ý nghĩa gì đối với 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 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 tính năng điều chỉnh theo khoảng thời gian CLS, cũng như những công cụ vẫn có thể đo điểm chuẩn so với cách triển khai ban đầu.

Chúng tôi cũng sẽ sớm cập nhật Chrome DevTools để hỗ trợ tính năng điều chỉnh cửa sổ. Chúng tôi cũng đã cập nhật CLS cho Search Console và sẽ áp dụng thay đổi này 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 mức 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ũ của CLS cùng với việc điều chỉnh theo khung, nên chúng tôi có tin vui để chia sẻ: chúng tôi sẽ hiển thị "CLS cũ" trong Lighthouse và CrUX.

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

Bạn sẽ thấy giá trị này dưới dạng experimental_uncapped_cumulative_layout_shift trong API CrUX và 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, BigQuery CrUX sau đây sẽ so sánh CLS 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 sử dụng dữ liệu này trong tối đa 6 tháng, vì "CLS cũ" sẽ ngừng hoạt động kể từ ngày 14 tháng 12 năm 2021.

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

Khi được giới thiệu lần đầu trong Lighthouse, CLS 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 không được cân nhắc nhiều hơn trong điểm hiệu suất.

Giờ đây, sau một thời gian được các nhà phát triển sử dụng, điểm số Lighthouse đã tăng trọng số của CLS từ 5% lên 15%, nhất quán 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ố 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 trong máy tính tính điểm.

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

Tuy nhiên, điểm khác biệt chính giữa CLS trong phòng thí nghiệm và CLS trong thực tế là khoảng thời gian quan sát của CLS trong phòng thí nghiệm kết thúc ở trạng thái "đã tải đầy đủ" như được xác định trong điều kiện phòng thí nghiệm, trong khi trong thực tế, khoảng thời gian quan sát mở rộng đến toàn bộ thời gian hoạt động của trang, bao gồm cả hoạt động sau khi tải. Tuy nhiên, việc điều chỉnh theo khoảng thời gian đã giảm đáng kể sự khác biệt này.

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

Nếu muốn đo lường phương thức triển khai CLS mới nhất, bạn cũng có thể ghi lại phương thức này cho dữ liệu trường thông qua RUM bằng đoạn mã PerformanceObserver sau đây.

Hoặc bằng cách trực tiếp dựa vào thư viện JavaScript Web Vitals. Thư viện này cũng đã được cập nhật theo thay đổi này.

Thông tin cập nhật khác

Ngoài các bản cập nhật cho Cumulative Layout Shift, chúng tôi cũng đã cập nhật các công cụ web liên quan đến các chỉ số sau:

• Chúng tôi sẽ 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, ngưỡng phân loại ba nhóm cho First Contentful Paint đã đượ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: [3 giây-∞]

Kết luận

Chúng tôi dự kiến thay đổi này sẽ giúp hầu hết các trang web chuyển đổi suôn sẻ. Bạn nên tham khảo bài viết về Chỉ số quan trọng chính của 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á việc thay đổi bố cục. Như thường lệ, vui lòng liên hệ với chúng tôi trên nhóm web-vitals-feedback để phản hồi về các chỉ số và diễn đàn phản hồi dành riêng cho công cụ của chúng tôi về Lighthouse và Báo cáo trải nghiệm người dùng Chrome để trao đổi về các vấn đề liên quan đến công cụ. Trân trọng,

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

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