Giờ đây, tiện ích Chỉ số quan trọng chính của trang web cho bạn thấy nhiều thông tin gỡ lỗi hơn để giúp bạn xác định nguyên nhân gốc gây ra vấn đề Chỉ số quan trọng chính của trang web.
Ngày xuất bản: Ngày 4 tháng 5 năm 2023
Tiện ích Web Vitals giúp bạn dễ dàng truy cập vào thông tin chẩn đoán về Chỉ số quan trọng chính của trang web để giúp nhà phát triển đo lường và giải quyết các vấn đề về Chỉ số quan trọng chính của trang web. Công cụ này bổ sung cho các công cụ khác do nhóm Chrome cung cấp để hỗ trợ nhà phát triển cải thiện trải nghiệm trên trang web của họ.
Chúng tôi đã cập nhật tiện ích này để cung cấp thêm thông tin gỡ lỗi cho nhà phát triển, giúp họ dễ dàng hiểu và giải quyết các vấn đề về hiệu suất.
Hiển thị thông tin gỡ lỗi trong bảng điều khiển
Tiện ích Web Vitals đã có tuỳ chọn gỡ lỗi "Ghi nhật ký bảng điều khiển" được một thời gian. Bạn có thể bật tính năng này trong màn hình Tuỳ chọn:
Trước lần nâng cấp gần đây nhất, tính năng này đã ghi lại đầu ra từ web-vitals library (nằm trong phần mở rộng) trong một đối tượng JSON:
Sau đó, bạn có thể mở rộng đối tượng này để xem toàn bộ thông tin chi tiết và di chuột qua các phần tử như hình ảnh LCP để làm nổi bật các phần tử đó trong bảng điều khiển chính:
Điều này rất hữu ích, nhưng định dạng đầu ra không đặc biệt thân thiện với người dùng và chúng tôi nghĩ rằng chúng tôi có thể cung cấp trải nghiệm tốt hơn cho nhà phát triển. Vì vậy, chúng tôi đã cải tiến tiện ích này để hiển thị thông tin quan trọng nhất, đồng thời vẫn cung cấp toàn bộ đối tượng cho những người muốn biết thêm thông tin chi tiết.
Thông tin gỡ lỗi mới cho từng chỉ số
Với bản phát hành mới, chúng tôi đã thêm thông tin gỡ lỗi mới ở định dạng dễ đọc hơn để giúp bạn tìm và giải quyết vấn đề. Chúng tôi cung cấp thông tin khác nhau cho từng chỉ số vì mỗi chỉ số lại khác nhau.
Thông tin gỡ lỗi LCP
Đối với Thời gian hiển thị nội dung lớn nhất (LCP), chúng tôi cho thấy cả phần tử và bảng chi tiết về 4 giai đoạn trong hướng dẫn Tối ưu hoá LCP:
Thời gian LCP (2.876 mili giây – hoặc khoảng 2,9 giây) được làm nổi bật bằng màu hổ phách vì thuộc danh mục "Cần cải thiện".
Trong ví dụ này, chúng ta thấy Resource load time là thời gian lâu nhất, vì vậy, để cải thiện thời gian LCP, bạn nên tìm cách tối ưu hoá thời gian đó – có thể bằng cách tránh lưu trữ các tệp đó trên một miền riêng biệt hoặc bằng cách sử dụng hình ảnh nhỏ hơn hoặc các định dạng hiệu quả hơn. Trong trường hợp này, tốc độ bị chậm lại một cách giả tạo để minh hoạ kết quả — web.dev là một trang web nhanh 😀
Bạn cũng có thể di chuột qua thành phần này để làm nổi bật hình ảnh:
Bạn cũng có thể nhấp chuột phải vào phần tử để hiển thị phần tử đó trong bảng điều khiển phần tử.
Ở đây, phần tử LCP là một hình ảnh và khi di chuột qua phần tử đó trong bảng điều khiển ở bên phải, phần tử đó cũng được làm nổi bật trên trang web ở bên trái.
Thông tin gỡ lỗi CLS
Các thay đổi góp phần vào Mức thay đổi bố cục tích luỹ (CLS) hiện cũng được liệt kê và bạn có thể di chuột qua để làm nổi bật phần tử có liên quan:
Ảnh chụp màn hình ở trên cho thấy 2 lần dịch chuyển, lần đầu tiên bao gồm 2 phần tử (khi hình ảnh biểu ngữ được tải và nội dung bên dưới được dịch chuyển xuống), và lần thứ hai bao gồm 4 phần tử (khi quảng cáo động được tải và hầu hết trang được dịch chuyển xuống dưới).
Phần tử h2 đang được di chuột qua trong ảnh chụp màn hình này trong bảng điều khiển ở bên phải và bạn có thể thấy phần tử này được làm nổi bật trên trang web ở bên trái.
Thông tin gỡ lỗi FID
Đối với Thời gian phản hồi lần tương tác đầu tiên (FID), chúng tôi sẽ hiển thị phần tử bị ảnh hưởng (một lần nữa, bạn có thể di chuột qua để làm nổi bật phần tử đó trên trang) và loại tương tác, cùng với đối tượng JSON đầy đủ như bình thường:
Thông tin gỡ lỗi INP
Đối với chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP), chúng tôi đã thêm hai nhật ký mới:
- INP – lượt tương tác dài nhất
- Số lượt tương tác – tất cả lượt tương tác
Chỉ số INP
Trước tiên, chúng tôi làm nổi bật chỉ số INP khi chỉ số này thay đổi:
Tương tự như LCP, phần mở rộng này chia nhỏ thời gian INP để hiển thị 3 giai đoạn:
- Độ trễ khi nhập
- Thời gian xử lý
- Độ trễ khi trình bày
Điều này giúp bạn xác định xem sự kiện có bị chậm do bị các sự kiện khác giữ lại (độ trễ đầu vào) hay không, vì chính trình xử lý sự kiện bị chậm do mã của bạn (thời lượng xử lý), nếu độ trễ kết xuất sau xử lý là lý do (độ trễ hiển thị) hoặc sự kết hợp của hai hoặc nhiều yếu tố này.
Lượt tương tác
INP có thể bị chậm do các lượt tương tác trước đó chặn luồng chính, từ đó gây ra độ trễ đầu vào cao. Vì lý do này, chúng tôi liệt kê tất cả các lượt tương tác theo định dạng tương tự như trong việc ghi nhật ký INP:
Tính năng này cho phép bạn "theo dõi trực tiếp" một trang web bằng cách tương tác với trang web đó và xem trong bảng điều khiển những lượt tương tác, những tổ hợp có khả năng gây ra vấn đề về INP.
Điều này cũng cho phép bạn xác định nhiều tương tác chậm, thay vì chỉ tương tác INP lớn nhất để giúp bạn tránh cảm giác đuổi theo cái đuôi khi cải thiện khả năng phản hồi.
Lọc nhật ký bảng điều khiển
Mặc dù hữu ích, nhưng tất cả thông tin bổ sung này có thể gây mất tập trung nếu bạn đang phát triển những nội dung khác không liên quan đến Các chỉ số quan trọng về trang web hoặc chỉ quan tâm đến một Chỉ số quan trọng về trang web cụ thể tại thời điểm đó.
Bạn có thể sử dụng các tuỳ chọn lọc trong Bảng điều khiển của DevTools để lọc ra một số hoặc tất cả thông báo:
- Để xoá tất cả thông báo của tiện ích, bạn có thể tắt thông báo này trong các tuỳ chọn hoặc sử dụng bộ lọc
-Extension. - Để chỉ xem LCP, bạn có thể sử dụng bộ lọc
Web Vitals Extension LCP. - Để chỉ xem INP và lượt tương tác, bạn có thể dùng bộ lọc
Web Vitals Extension -LCP -CLS -FID.
Chúng tôi đang cố gắng giảm số lượng tuỳ chọn cho tiện ích này, nhưng hãy cho chúng tôi biết bằng cách báo cáo vấn đề trên GitHub nếu tính năng lọc của DevTools không đủ và bạn muốn có các tuỳ chọn tại đây.
Kết luận
Chúng tôi hy vọng bạn thấy các tuỳ chọn gỡ lỗi mới trong phiên bản mới nhất của tiện ích này hữu ích và giúp bạn dễ dàng xác định và giải quyết các vấn đề về Các chỉ số quan trọng về trang web, từ đó cải thiện trải nghiệm người dùng trên trang web của bạn.
Hãy nhớ rằng trải nghiệm của bạn trên máy tính của nhà phát triển có thể không đại diện cho trải nghiệm mà người dùng thực tế đang trải qua. Hãy xem bài đăng trước đây của chúng tôi trên blog về cách bạn có thể xem dữ liệu trường CrUX cho trang web của mình trong tiện ích này để biết trải nghiệm được điều chỉnh cho phù hợp với người dùng như thế nào.
Chúng tôi rất mong nhận được ý kiến phản hồi về những điểm cải tiến này, cũng như mọi đề xuất khác trên công cụ theo dõi lỗi GitHub.