Kể từ hôm nay, một 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, chẳng hạn như Lighthouse, PageSpeed Insights và Báo cáo trải nghiệm người dùng trên Chrome.
Hôm nay, chúng tôi muốn chia sẻ cách chúng tôi đang 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 chính xác hơn trải nghiệm người dùng các trang tồn tại lâu dài (chẳng hạn như ứng dụng có chức năng cuộn vô hạn hoặc ứng dụng một trang). 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 muốn thấy ít thay đổi về bố cục hơn trên web. Đây là điểm mà chỉ số CLS (Mức thay đổi bố cục tích luỹ) phát huy hiệu quả trong việc đo lường độ ổn định về hình ảnh của một trang web. Công cụ này giúp khuyến khích các trang web đặt kích thước tốt 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 nội dung tăng đột biến cho người dùng.
Chỉ số này có tên là "tích lũy" vì điểm số của từng lượt chuyển riêng lẻ được cộng trong suốt thời gian hoạt động của một 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 trang hoạt động lâu dài như Ứng dụng trang đơn (SPA) hoặc ứng dụng cuộn vô hạn sẽ tích luỹ CLS (Mức thay đổi bố cục tích luỹ) theo thời gian một cách tự nhiên. Bằng cách giới hạn việc tổng hợp theo "cửa sổ" kém nhất ca làm việc, 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 thời lượng phiên tối đa với khoảng cách 1 giây, giới hạn là 5 giây, bản cập nhật này phản ánh rõ hơn trải nghiệm người dùng đối với các trang tồn tại lâu dài. Với thay đổi này, 70% các nguồn gốc không nên dự kiến sẽ thấy bất kỳ thay đổi nào về CLS (Mức thay đổi bố cục tích luỹ) ở phân vị thứ 75, và 30% nguồn gốc còn lại sẽ nhận thấy sự cải thiện.
Triển khai mức điều chỉnh cửa sổ cho CLS
Chúng ta đã đề cập về định nghĩa CLS (Mức thay đổi bố cục tích luỹ) cập nhật là thời lượng phiên hoạt động tối đa với khoảng chênh lệch 1 giây, tối đa là 5 giây. Điều đó có ý nghĩa gì đối với công cụ?
Bắt đầu 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à nội dung tóm tắt về việc triển khai hoạt động điều chỉnh theo khung thời gian CLS, cũng như những công cụ nào vẫn cho phép so sánh điểm chuẩn với phương thức triển khai ban đầu.
| Công cụ | Mức điều chỉnh cửa sổ CLS "đang hoạt động" | "Cũ" Phạm vi cung cấp của CLS (Mức thay đổi bố cục tích luỹ) |
|---|---|---|
| Bảng điều khiển Công cụ cho nhà phát triển của Lighthouse | Kênh Canary, ngày 2 tháng 6 năm 2021 | Không áp dụng |
| Giao diện dòng lệnh (CLI) của Lighthouse | Phiên bản 8, phát hành vào ngày 1 tháng 6 năm 2021 | Có sẵn dưới dạng totalSyntheticLayoutShift trong Lighthouse phiên bản 8 |
| Lighthouse CI | phiên bản 0.7.3, ngày 3 tháng 6 năm 2021 | Không áp dụng |
| Thông tin chi tiết về tốc độ trang (PSI) | Ngày 1 tháng 6 năm 2021 | NA |
| API PSI | Ngày 1 tháng 6 năm 2021 | Có trong lighthouseResult dưới tên totalCumulativeLayoutShift. Không có trong trường dữ liệu loadingExperience |
| Báo cáo trải nghiệm người dùng trên Chrome (CrUX) – BigQuery | 202105 tập dữ liệu, xuất bản ngày 8 tháng 6 năm 2021 | Được cung cấp dưới dạng experimental.uncapped_cumulative_layout_shift đến hết năm 20211 |
| Báo cáo trải nghiệm người dùng trên Chrome (CrUX) – API | Ngày 1 tháng 6 năm 2021 | Sau ngày 1 tháng 6 năm 2021, có sẵn dưới dạng
experimental_uncapped_cumulative_layout_shift
Ngày 14 tháng 12 năm 2021 |
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 áp dụng 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 và bạn không cần phải làm gì để tận dụng dữ liệu từ bản sửa lỗi.
"Cũ" CLS
Xin nhắc lại, phiên bản "cũ" CLS đ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 nên theo dõi định nghĩa cũ về CLS (Mức thay đổi bố cục tích luỹ) cùng với quá trình điều chỉnh theo khung thời gian, chúng tôi có tin vui muốn thông báo: chúng tôi đang tiết lộ "CLS cũ" trong Lighthouse và CrUX.
Trong Lighthouse phiên bản 8,
mã này có trong JSON dưới dạng
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Tên thiết bị của bạn sẽ là
experimental_uncapped_cumulative_layout_shift
trong CrUX API và dưới dạng
experimental.uncapped_cumulative_layout_shift trong BigQuery CrUX.
Sau ngày 1 tháng 6, các yêu cầu CrUX API sẽ trả về "CLS cũ" chỉ số:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Sau ngày 8 tháng 6, những dịch vụ sau đây BigQuery CrUX 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, bằng "CLS cũ" sẽ nghỉ hưu 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 trong Lighthouse, thì đó là một chỉ số hoàn toàn mới. Do đó, để đảm bảo nhà phát triển có thời gian thử nghiệm, đo điểm chuẩn, và tối ưu hoá theo cách đó, thì CLS lại bị ảnh hưởng ít hơn trong điểm hiệu suất.
Sau khi dành thời gian cho các nhà phát triển, điểm Lighthouse đã làm tăng trọng số của CLS từ 5% lên 15%, nhất quán với phương pháp đo lường Chỉ số quan trọng chính của trang web là chỉ số có trọng số lớn nhất trong điểm số Lighthouse.
Bạn có thể tìm thấy các trọng số mới cho các chỉ số trong Lighthouse phiên bản 8 trong công cụ 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 các khung phụ CLS (Mức thay đổi bố cục tích luỹ) trong cách tính toán chỉ số hiện đã có. Ngoài ra, để xác nhận, CLS trường do CrUX đo lường cũng xử lý hoạt động đóng cửa sổ và khung phụ tương tự như vậy.
Tuy nhiên, điểm khác biệt chính giữa CLS trong phòng thí nghiệm và tại hiện trường là cửa sổ quan sát của phòng thí nghiệm 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 ở thực địa, cửa sổ quan sát mở rộng ra 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 cửa sổ cũng làm 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 hoạt động triển khai CLS (Mức thay đổi bố cục tích luỹ) mới nhất, bạn cũng có thể ghi lại điều này cho dữ liệu trường thông qua RUM bằng cách sử dụ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 Chỉ số quan trọng của trang web, Chúng tôi cũng đã cập nhật thay đổi này.
Thông tin cập nhật khác
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 một số nội dung cập nhật liên quan đến các chỉ số sau đây đối với công cụ web:
- Chúng tôi đang cập nhật thành định nghĩa gần đây nhất về chỉ số Nội dung lớn nhất hiển thị. 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 kết hợp 3 thứ hạng của Nội dung đầu tiên cho Nội dung hiển thị đã đượ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 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. Chúng tôi khuyến khích bạn tham khảo 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á việc thay đổi bố cục. Như thường lệ, vui lòng liên hệ theo nhóm-phản hồi trên web-vitals để nhận phản hồi về các chỉ số và các diễn đàn phản hồi cụ thể về công cụ của chúng tôi cho Lighthouse và Báo cáo trải nghiệm người dùng trên Chrome cho các vấn đề về công cụ. Trân trọng,
Cảm ơn Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose và Paul Ireland đã đóng góp ý kiến phản hồi.
Hình ảnh chính của Barn Images / @barnimages trên Unsplash