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 Irish và tôi đã công bố các bản cập nhật cho Lighthouse – Lighthouse CI, công thức tính điểm hiệu suất mới và nhiều tính năng 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 của trải nghiệm người dùng là chìa khoá để định lượng tác động của trải nghiệm đó đến lợi nhuận của bạn, cũng như theo dõi các điểm 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. Nội dung mới nhất về chỉ số là hai chỉ số thực địaThời gian hiển thị nội dung lớn nhất (LCP)Mức thay đổi bố cục tích luỹ (CLS) – đang được ươm tạo trong Nhóm làm việc về hiệu suất web của W3C và một chỉ số mới trong phòng thí nghiệmTổ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 xuất hiện 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 gian 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. Mọi mili giây vượt quá thời lượng đó đều được tính vào 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ụ với 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 bổ sung cho nhau và mang lại 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.

Một video ghi lại chuyển động trên màn hình cho thấy 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, Nội dung đầu tiên hiển thị, Chỉ số tốc độ và Nội dung lớn nhất hiển thị 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 đầu tiên, Độ trễ đầu vào đầu tiên 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 Mức thay đổi bố cục tích luỹ 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.

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

Trong năm qua, chúng tôi đã phân tích hiệu suất trang web từ thực tế 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 phối tốc độ chậm, nhanh và trung bình đối với 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 sẽ 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ượt 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 hiển thị 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.

Web Almanac

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 cộng tác viên, bao gồm các nhà phát triển Chrome và cộng đồng web, đã tình nguyện làm việc trong dự án này. Dự án này phân tích 20 khía cạnh cốt lõi về web, giải quyết cách xây dựng, phân phối và trải nghiệm 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 độ: