Sự phát triển của công cụ tốc độ: những điểm nổi bật trong Hội nghị Nhà phát triển Chrome năm 2019

Các chỉ số hiệu suất mới, nội dung cập nhật cho PageSpeed Insights và Báo cáo trải nghiệm người dùng trên Chrome (CrUX), v.v.

Elizabeth Sweeny
Elizabeth Sweeny

Tại Hội nghị Nhà phát triển Chrome, Paul Ireland và tôi đã công bố nội dung cập nhật đối với Lighthouse – Lighthouse CI, công thức điểm hiệu suất mới và nhiều nội dung khác. Cùng với những tin tức quan trọng về Lighthouse, chúng tôi đã giới thiệu các công cụ hiệu suất mới mẻ, bao gồm các chỉ số hiệu suất mới, nội dung cập nhật cho PageSpeed Insights và Báo cáo trải nghiệm người dùng trên Chrome (CrUX), cũng như thông tin chi tiết từ bản phân tích của Web Almanac về hệ sinh thái web.

Các chỉ số hiệu suất mới

Việc đo lường các sắc thái trong trải nghiệm của người dùng là chìa khoá để định lượng tác động của trải nghiệm đó đối với kết quả kinh doanh, cũng như theo dõi sự cải thiện và hồi quy. Theo thời gian, các chỉ số mới đã phát triển để nắm bắt những sắc thái đó và lấp đầy khoảng trống trong việc đo lường trải nghiệm người dùng. Bổ sung mới nhất cho câu chuyện về chỉ số là hai chỉ số trườngNội dung lớn nhất hiển thị (LCP)Tích luỹ Mức thay đổi bố cục (CLS) – đang được đưa vào Nhóm công việc về hiệu suất web của W3C và một chỉ số trong phòng thí nghiệm mới – Tổng thời gian chặn (TBT).

Thời gian hiển thị nội dung lớn nhất (LCP)

Thời gian hiển thị nội dung lớn nhất (LCP) báo cáo thời điểm phần tử nội dung lớn nhất hiển thị trong khung nhìn.

Trước khi có chỉ số Thời gian hiển thị nội dung lớn nhất, Thời gian hiển thị nội dung có ý nghĩa đầu tiên (FMP)Chỉ số tốc độ (SI) được dùng để ghi lại trải nghiệm tải sau lần sơn đầu tiên, nhưng các chỉ số này rất phức tạp và thường không xác định được thời điểm nội dung chính của trang đã tải. Nghiên cứu đã chỉ ra rằng chỉ cần xem xét thời điểm phần tử lớn nhất trên trang được hiển thị sẽ giúp thể hiện tốt hơn thời điểm nội dung chính của trang được tải.

Chỉ số mới về Thời gian hiển thị nội dung lớn nhất sẽ sớm có trong báo cáo Lighthouse. Trong thời gian chờ đợi, bạn có thể đo lường LCP trong JavaScript.

Tổng thời gian chặn (TBT)

Chỉ số Tổng thời gian chặn (TBT) đo lường tổng thời gian từ thời điểm Hiển thị nội dung đầu tiên (FCP) đến Thời điểm tương tác (TTI), trong đó luồng chính bị chặn đủ lâu để ngăn khả năng phản hồi hoạt động đầu vào.

Một tác vụ được coi là dài nếu tác vụ đó chạy trên luồng chính trong hơn 50 mili giây. Bất kỳ mili giây nào vượt quá khoảng thời gian đó được tính cho thời gian chặn của tác vụ đó.

Sơ đồ thể hiện một tác vụ có thời gian chặn là 100 mili giây và thời lượng 150 mili giây.

Tổng thời gian chặn của một trang là tổng thời gian chặn của tất cả các tác vụ dài xảy ra giữa FCP và TTI.

Sơ đồ thể hiện 5 tác vụ có tổng thời gian chặn là 60 mili giây trong số 270 mili giây thời gian luồng chính.

Mặc dù Thời gian phản hồi tương tác giúp xác định thời điểm luồng chính trở lại bình thường sau khi tải, nhưng Tổng thời gian chặn nhằm định lượng mức độ căng thẳng của luồng chính trong suốt quá trình tải. Bằng cách này, TTI và TBT sẽ bổ sung cho nhau và cung cấp sự cân bằng.

Điểm số tổng hợp về mức thay đổi bố cục (CLS)

Điểm số tổng hợp về mức thay đổi bố cục (CLS) đo lường độ ổn định của hình ảnh trên một trang và định lượng tần suất người dùng gặp phải sự thay đổi bố cục không mong muốn. Việc nội dung di chuyển không mong muốn có thể gây khó chịu cho người dùng. Chỉ số mới này giúp bạn giải quyết vấn đề đó bằng cách đo lường tần suất xảy ra vấn đề này cho người dùng.

Bản ghi màn hình minh hoạ việc bố cục không ổn định có thể ảnh hưởng tiêu cực như thế nào đến người dùng.

Hãy xem hướng dẫn chi tiết về Điểm số tổng hợp về mức thay đổi bố cục để tìm hiểu cách tính toán và đo lường chỉ số này.

Công thức tính điểm hiệu suất mới của Lighthouse sẽ sớm giảm bớt tầm quan trọng của FMP và FCI và đưa vào 3 chỉ số mới là LCP, TBT và CLS vì các chỉ số này phản ánh tốt hơn thời điểm một trang có thể sử dụng được.

Trong Lighthouse phiên bản 6, Thời gian hiển thị nội dung đầu tiên, Chỉ số tốc độ và Thời gian hiển thị nội dung lớn nhất là các chỉ số chính về hiệu suất tải; Thời gian tương tác, Độ trễ đầu vào lần đầu, Độ trễ đầu vào lần đầu tối đa có thể và Tổng thời gian chặn là các chỉ số chính về khả năng tương tác; còn Điểm số tổng hợp về mức thay đổi bố cục là chỉ số chính về khả năng dự đoán.

Hãy xem phần Điểm hiệu suất của Lighthousebộ sưu tập chỉ số web.dev mới để tìm hiểu thêm.

Ngưỡng dữ liệu trường (CrUX) được điều chỉnh trong PageSpeed Insights

Trong năm qua, chúng tôi đã phân tích hiệu suất web trên thực địa thông qua dữ liệu Trải nghiệm người dùng trên Chrome (CrUX). Với thông tin chi tiết từ dữ liệu đó, chúng tôi đã đánh giá lại các ngưỡng mà chúng tôi sử dụng để gắn nhãn một trang web là "chậm", "trung bình" hoặc "nhanh" về hiệu suất thực tế.

Hai biểu đồ thanh cho thấy mức phân bổ tốc độ chậm, nhanh và trung bình cho FCP và FID.

Để đánh giá tổng thể một trang web, PageSpeed Insights (PSI) sử dụng một tỷ lệ phần trăm nhất định của tổng mức phân phối dữ liệu trường làm số vàng cho trang web đó; các ngưỡng trước đây được sử dụng là tỷ lệ phần trăm thứ 90 cho Lần vẽ nội dung đầu tiên và tỷ lệ phần trăm thứ 95 cho Độ trễ đầu vào đầu tiên (FID).

Ví dụ: nếu một trang web có mức phân phối FCP là 50% nhanh, 30% trung bình, 20% chậm, thì FCP ở phân vị thứ 90 nằm trong phần chậm, khiến điểm số tổng thể của trường này cho trang web là chậm.

Chúng tôi đã điều chỉnh để có mức phân phối tổng thể hiệu quả hơn trên các trang web và bảng chi tiết mới như sau:

Chỉ số Phân vị tổng thể Nhanh (mili giây) Trung bình (mili giây) Chậm (mili giây)
FCP (hiển thị nội dung đầu tiên) Phân vị thứ 75 1000 1000-3000 3000+
FID (Thời gian phản hồi lần tương tác đầu tiên) Phân vị thứ 95 100 100-300 300+

Ví dụ: giờ đây, nếu một trang web có mức phân phối FCP là 50% nhanh, 30% trung bình, 20% chậm, thì FCP ở phân vị thứ 75 nằm trong phần trung bình, khiến điểm số tổng thể của trường cho trang web đó ở mức trung bình.

Lệnh chuyển hướng URL chính tắc trong PageSpeed Insights

Để giúp bạn đo lường trải nghiệm của người dùng một cách chính xác nhất có thể, nhóm PageSpeed Insights đã thêm lời nhắc phân tích lại vào PSI. Đối với những trang web được chuyển hướng đến một URL mới, bạn sẽ được nhắc chạy lại báo cáo trên URL trang đích để có thông tin đầy đủ hơn về hiệu suất thực tế.

Giao diện người dùng PSI cho thấy lệnh chuyển hướng URL và nút "Phân tích lại"

CrUX trong báo cáo Tốc độ mới của Search Console

Search Console đã ra mắt báo cáo Tốc độ mới một tuần trước khi diễn ra Hội nghị nhà phát triển Chrome. Báo cáo này sử dụng dữ liệu từ Báo cáo trải nghiệm người dùng trên Chrome để giúp chủ sở hữu trang web phát hiện các vấn đề có thể xảy ra về trải nghiệm người dùng. Báo cáo Tốc độ tự động phân loại những URL tương tự nhau thành các nhóm "Nhanh", "Trung bình" và "Chậm", đồng thời giúp ưu tiên cải thiện hiệu suất cho các vấn đề cụ thể.

Báo cáo Tốc độ trong Search Console.

Niên giám trang web

Dion Almaer trình bày về Web Almanac tại CDS 2019.

Trong bài phát biểu khai mạc, chúng tôi đã công bố việc ra mắt Almanac web (Almanac web), một dự án hằng năm so khớp số liệu thống kê và xu hướng về trạng thái của web với chuyên môn của cộng đồng web. 85 người đóng góp, bao gồm các nhà phát triển Chrome và cộng đồng web, đã tình nguyện tham gia dự án này. Dự án này phân tích 20 khía cạnh cốt lõi về web liên quan đến cách xây dựng, phân phối và trải nghiệm các trang web. Hãy bắt đầu khám phá Web Almanac để tìm hiểu thêm về trạng thái của hiệu suất, JavaScript và mã bên thứ ba trên web.

Tìm hiểu thêm

Để biết thêm thông tin chi tiết về các bản cập nhật công cụ hiệu suất từ Hội nghị nhà phát triển Chrome, hãy xem bài nói chuyện về sự phát triển của công cụ Tốc độ: