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ố mới về hiệu suất, nội dung cập nhật cho PageSpeed Insights và Báo cáo trải nghiệm người dùng Chrome (CrUX), v.v.

Elizabeth Sweeny
Elizabeth Sweeny

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

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

Đo lường các sắc thái của trải nghiệm người dùng là yếu tố then chốt để đo lường tác động của trải nghiệm đó đối với lợi nhuận cũng như theo dõi mức độ cải thiện và hồi quy. Theo thời gian, các chỉ số mới đã được phát triển để nắm bắt những sắc thái đó và bổ sung thông tin còn thiếu trong quá trình đo lường trải nghiệm người dùng. Nội dung bổ sung mới nhất cho câu chuyện về chỉ số là hai chỉ số trườngThời gian hiển thị nội dung lớn nhất (LCP)Điểm số tổng hợp về mức thay đổi bố cục (CLS) – đang được đưa vào Nhóm làm việc về hiệu suất web của W3C, và một chỉ số 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 Thời gian hiển thị nội dung lớn nhất, Thời gian hiển thị nội dung lớn nhất (FMP)Chỉ số tốc độ (SI) được dùng để thu thập trải nghiệm tải sau lần hiển thị đầu tiên. Tuy nhiên, các chỉ số này rất phức tạp và thường không xác định thời điểm nội dung chính của trang được tải. Nghiên cứu cho thấy rằng việc chỉ xem xét thời điểm kết xuất phần tử lớn nhất trên trang sẽ thể hiện chính xác 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 gian 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 nó chạy trên luồng chính trong hơn 50 mili giây. Bất kỳ mili giây nào trên được tính vào thời gian chặn của tác vụ đó.

Một sơ đồ thể hiện một tác vụ dài 150 mili giây, có thời gian chặn là 100 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 diễn ra giữa FCP và TTI.

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

Mặc dù Thời gian tương tác làm tốt việc xác định thời điểm luồng chính ngừng tải sau đó, nhưng tính nă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ổ trợ 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 về hình ảnh của một trang và xác định tần suất người dùng gặp phải những thay đổi ngoài dự kiến về bố cục. Việc di chuyển nội dung không mong muốn có thể rất khó chịu và 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 đề cho người dùng.

Bản ghi màn hình minh hoạ cách bố cục không ổn định có thể ảnh hưởng tiêu cực đế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 và cách đo lường.

Công thức tính điểm hiệu suất của Lighthouse mới sẽ sớm không còn chú trọng vào FMP và FCI và bổ sung 3 chỉ số mới (LCP, TBT và CLS) vì các chỉ số này nắm bắt chính xác hơn thời điểm một trang cảm thấy hữu ích.

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ố hiệu suất tải chính; Thời gian để tương tác, Độ trễ đầu vào đầu tiên, Thời gian trễ đầu vào đầu tiên tối đa và Tổng thời gian chặn là các chỉ số tương tác chính; và Điểm số tổng hợp về mức thay đổi bố cục là chỉ số khả năng dự đoán chính.

Hãy xem điểm hiệu suất của Lighthousetập hợp chỉ số web.dev mới để tìm hiểu thêm.

Ngưỡng dữ liệu thực địa (CrUX) được điều chỉnh trong PageSpeed Insights

Năm vừa qua, chúng tôi đã phân tích hiệu suất web từ trường này thông qua dữ liệu Trải nghiệm người dùng Chrome (CrUX). Nhờ 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 sự phân bố tốc độ chậm, nhanh và trung bình của FCP và FID.

Để có được kết quả đánh giá tổng thể cho 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 con số vàng cho trang web đó; các ngưỡng trước đây được sử dụng là phân vị thứ 90 đối với Thời gian hiển thị nội dung đầu tiên và phân vị thứ 95 cho Thời gian phản hồi lần tương tác đầ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 thứ 90 nằm trong phần chậm, khiến điểm số trường tổng thể của trang web bị chậm.

Chúng tôi đã điều chỉnh tính năng này để tổng thể phân phối tốt hơn trên các trang web và bảng phân tích mới là:

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 75% nằm trong phần trung bình, giúp điểm tổng thể của trang web ở mức trung bình.

Lệnh chuyển hướng URL chuẩn 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 các 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 đích để có cái nhìn toàn diện hơn về hiệu suất thực tế của mình.

Giao diện người dùng PSI cho thấy lệnh chuyển hướng URL và nút "ReAnalyze" (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 Hội nghị Nhà phát triển Chrome. Tính năng 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 đề tiềm ẩn liên quan đến trải nghiệm người dùng. Báo cáo Tốc độ tự động chỉ định các nhóm URL tương tự nhau vào 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 web

Dion Almaer giới thiệu Niên giám web tại CDS 2019.

Trong bài phát biểu khai mạc, chúng tôi đã thông báo về việc ra mắt Web Almanac, một dự án hằng năm phù hợp với số liệu thống kê và xu hướng về trạng thái 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 cho dự án này. Dự án này phân tích 20 khía cạnh cốt lõi liên quan đến việc liên quan đến môi trường web về cách xây dựng, phân phối và trải nghiệm các trang web. Bắt đầu khám phá Niên giám web để tìm hiểu thêm về trạng thái hiệu suất, JavaScript và mã của bên thứ ba trên web.

Tìm hiểu thêm

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