Tìm hiểu thông tin mới nhất trong PageSpeed Insights để giúp bạn đo lường và tối ưu hóa chất lượng trang và trang web hiệu quả hơn.
Trong những năm qua, PageSpeed Insights (PSI) đã phát triển thành một nguồn tổng hợp cho cả dữ liệu trường và dữ liệu trong phòng thí nghiệm. Công cụ này tích hợp thông tin của Báo cáo trải nghiệm người dùng của Chrome (CrUX) và hệ thống chẩn đoán Lighthouse, để cung cấp thông tin chi tiết giúp cải thiện hiệu suất của trang web.
Hôm nay, chúng tôi rất vui được thông báo về phiên bản cập nhật của PSI! Mặc dù đây là phần tử quan trọng trong bộ công cụ tăng tốc của chúng tôi, nhưng cơ sở mã PSI đã ra mắt được 10 năm, chứa nhiều mã cũ và đã được thiết kế lại. Chúng tôi đã tận dụng cơ hội này để giải quyết các vấn đề liên quan đến giao diện trong PSI. Đôi khi, người dùng gặp khó khăn khi di chuyển trong báo cáo. Mục tiêu chính của chúng tôi là:
- Giúp giao diện người dùng trở nên trực quan hơn bằng cách phân biệt rõ ràng giữa dữ liệu bắt nguồn từ môi trường tổng hợp và dữ liệu thu thập được từ người dùng trong trường.
- Thông báo rõ ràng cách tính chỉ số đánh giá Các chỉ số quan trọng về trang web trong giao diện người dùng.
- Hiện đại hoá giao diện của PSI bằng cách sử dụng Material Design.
Bài đăng này giới thiệu các tính năng mới trong PSI (sẽ được phát hành vào cuối năm nay).
Có gì mới?
Thiết kế lại giao diện người dùng PSI nhằm cải thiện cách trình bày dữ liệu báo cáo, đồng thời làm rõ và chi tiết hơn cho dữ liệu có trong báo cáo. Giao diện người dùng mới được hướng đến trực quan hơn và giúp nhà phát triển nhanh chóng khám phá thông tin chi tiết về hiệu suất tại phòng thí nghiệm và thực địa cho các trang của họ. Những thay đổi cơ bản đối với giao diện người dùng bao gồm:
Tách biệt dữ liệu thực địa và phòng thí nghiệm
Chúng tôi đã thay đổi giao diện người dùng để tách biệt dữ liệu thực địa với dữ liệu phòng thí nghiệm. Nhãn cho "Dữ liệu trường" và "Dữ liệu phòng thí nghiệm" đã được thay thế bằng văn bản cho biết ý nghĩa và lợi ích của dữ liệu đó. Chúng tôi cũng đã đưa phần Dữ liệu thực tế lên đầu. Điểm hiệu suất truyền thống dựa trên phòng thí nghiệm (hiện đang hiển thị ở trên cùng) đã được chuyển xuống phần dữ liệu của phòng thí nghiệm để tránh sự không rõ ràng về nguồn gốc của điểm số.
Đánh giá Các chỉ số quan trọng về trang web
Kết quả đánh giá Các chỉ số quan trọng về trang web, trước đây xuất hiện dưới dạng một từ duy nhất là "đã đạt" hoặc "không đạt" trong Dữ liệu thực địa, giờ đây trở thành một tiểu mục riêng với một biểu tượng riêng biệt.
Xin lưu ý rằng quá trình đánh giá Các chỉ số quan trọng về trang web không có gì thay đổi. Các chỉ số quan trọng về trang web như FID, LCP và CLS có thể được tổng hợp ở cấp trang hoặc cấp nguồn gốc. Đối với những trường hợp tổng hợp có đủ dữ liệu trong cả 3 chỉ số, hoạt động tổng hợp đó sẽ vượt qua kết quả đánh giá Các chỉ số quan trọng về trang web nếu bách phân vị thứ 75 của cả 3 chỉ số đều ở mức Tốt. Nếu không, quá trình tổng hợp sẽ không vượt qua được bài đánh giá. Nếu quá trình tổng hợp không có đủ dữ liệu FID, thì quá trình đánh giá sẽ vượt qua bài đánh giá nếu cả 75 phân vị của LCP và CLS đều ở mức Tốt. Nếu LCP hoặc CLS không có đủ dữ liệu, thì hệ thống sẽ không thể đánh giá phương pháp tổng hợp ở cấp trang hoặc cấp nguồn gốc.
Nhãn về hiệu suất trên thiết bị di động và máy tính
Chúng tôi đã thay đổi trình đơn điều hướng ở trên cùng và thêm các đường liên kết cho thiết bị di động và máy tính ở giữa trang báo cáo. Giờ đây, các đường liên kết sẽ dễ dàng nhìn thấy và cho biết rõ ràng nền tảng hiển thị dữ liệu. Cách này cũng giúp thanh điều hướng gọn gàng hơn.
Tóm tắt nguồn gốc
Bản tóm tắt về nguồn gốc cung cấp điểm CrUX tổng hợp cho tất cả các trang từ nguồn gốc đó, hiện xuất hiện khi bạn nhấp vào một hộp đánh dấu. Chúng tôi đã di chuyển phần báo cáo này sang thẻ mới "Nguồn gốc" trong mục Dữ liệu trường.
Thông tin hữu ích khác
Báo cáo hiện bao gồm một phần thông tin mới ở cuối mỗi trường và thẻ phòng thí nghiệm để chia sẻ các thông tin chi tiết sau đây về dữ liệu được lấy mẫu:
- Khoảng thời gian thu thập dữ liệu
- Thời lượng truy cập
- Thiết bị
- Kết nối mạng
- Kích thước mẫu
- Phiên bản Chrome
Thông tin này sẽ giúp tăng cường sự khác biệt giữa dữ liệu phòng thí nghiệm và dữ liệu thực địa, đồng thời giúp những người dùng trước đây chưa chắc chắn về sự khác biệt giữa hai nguồn dữ liệu (phòng thí nghiệm và trường).
Mở rộng chế độ xem
Chúng tôi có tính năng "Mở rộng chế độ xem" mới. Tính năng này bổ sung chức năng xem chi tiết vào mục dữ liệu trường và cho phép bạn xem thông tin chi tiết về các chỉ số Các chỉ số quan trọng về trang web.
Hình ảnh trang
Chúng tôi đã xoá hình ảnh của trang được tải, hình ảnh này xuất hiện ngay bên cạnh dữ liệu thực tế. Hình ảnh và hình thu nhỏ của trang hiển thị trình tự tải đều sẽ có trong phần dữ liệu của phòng thí nghiệm.
Để xem tài liệu mới nhất về sản phẩm, hãy truy cập vào https://developers.google.com/speed/docs/insights/.
Thông tin cập nhật đối với web.dev/measure
Để giảm sự không nhất quán giữa các công cụ trong bộ công cụ hiệu suất, chúng tôi cũng đang cập nhật web.dev/measure để sử dụng trực tiếp API PageSpeed Insights.
Trước đây, nhà phát triển chạy báo cáo thông qua cả công cụ PSI và /measure và xem các số Lighthouse khác nhau. Một trong những lý do chính dẫn đến sự khác biệt là /measure bắt nguồn từ tất cả chương trình kiểm thử từ Hoa Kỳ (do trước đó chương trình này có một phần phụ trợ trên đám mây ở Hoa Kỳ).
Với việc /measure gọi cùng một API trực tiếp như giao diện người dùng PSI, nhà phát triển sẽ có được trải nghiệm nhất quán hơn khi sử dụng PSI và /measure. Chúng tôi cũng đã điều chỉnh /đo lường dựa trên cách người dùng sử dụng công cụ này. Điều này có nghĩa là tính năng đăng nhập đối với /measure sẽ ngừng hoạt động, nhưng chức năng được dùng nhiều nhất (xem nhiều danh mục) vẫn sẽ dùng được.
PSI hôm nay
Hãy nhìn lại một chút và xem báo cáo PageSpeed Insights hiện tại mang lại những lợi ích gì. Báo cáo PSI bao gồm dữ liệu hiệu suất cho cả thiết bị di động và máy tính trong từng thẻ riêng lẻ, đồng thời đề xuất cách bạn có thể cải thiện trang. Các thành phần chính của báo cáo trong mỗi trường hợp đều tương tự nhau và bao gồm các thành phần sau:
Điểm hiệu suất: Điểm hiệu suất xuất hiện ở đầu báo cáo PSI và tóm tắt hiệu suất tổng thể của trang. Điểm này được xác định bằng cách chạy Lighthouse để thu thập và phân tích dữ liệu của phòng thí nghiệm về trang. Điểm từ 90 trở lên được coi là tốt, 50-90 cần cải thiện và dưới 50 là kém.
Dữ liệu trường: Dữ liệu thực địa, lấy nguồn từ tập dữ liệu Báo cáo CrUX, cung cấp thông tin chi tiết về trải nghiệm người dùng thực tế. Dữ liệu này bao gồm các chỉ số như Thời gian hiển thị nội dung đầu tiên (FCP) và đo lường Các chỉ số quan trọng về trang web (Thời gian phản hồi lần đầu tiên (FID), Thời gian hiển thị nội dung lớn nhất (LCP) và Thay đổi bố cục tích luỹ (CLS). Cùng với các giá trị chỉ số, bạn cũng có thể xem tình trạng phân bổ các trang có giá trị của một chỉ số cụ thể là Tốt, Cần cải thiện hoặc Kém, được biểu thị lần lượt bằng các thanh màu xanh lục, màu hổ phách và màu đỏ. Sự phân phối và điểm số được hiển thị dựa trên lượt tải trang cho người dùng trong tập dữ liệu CrUX. Điểm số được tính trong 28 ngày qua và không áp dụng cho những trang mới không có đủ dữ liệu người dùng thực.
Tóm tắt về nguồn gốc: Người dùng có thể nhấp vào hộp đánh dấu Hiển thị bản tóm tắt về nguồn gốc để xem điểm tổng hợp của các chỉ số của tất cả các trang được phân phát từ cùng một nguồn gốc trong 28 ngày qua.
Dữ liệu phòng thí nghiệm: Điểm hiệu suất của phòng thí nghiệm (được tính bằng Lighthouse) giúp gỡ lỗi các vấn đề về hiệu suất vì điểm số này được thu thập trong một môi trường được kiểm soát. Báo cáo này cho thấy hiệu suất bằng cách sử dụng các chỉ số như Thời gian hiển thị nội dung đầu tiên, Thời gian hiển thị nội dung lớn nhất, Chỉ mục tốc độ, Thay đổi bố cục tích luỹ, Thời gian tương tác và Tổng thời gian chặn. Mỗi chỉ số được tính điểm và được gắn nhãn bằng một biểu tượng cho biết Tốt, Cần cải thiện hoặc Kém. Phần này đưa ra chỉ báo phù hợp về nút thắt cổ chai về hiệu suất trước khi phát hành và có thể giúp chẩn đoán vấn đề, nhưng có thể không nắm bắt được các vấn đề thực tế.
Kiểm tra: Phần này liệt kê tất cả các quy trình kiểm tra do Lighthouse chạy và liệt kê các lượt kiểm tra đã vượt qua cùng với các cơ hội cải thiện và thông tin chẩn đoán bổ sung.
Những thách thức với thiết kế PSI hiện tại
Như đã thấy trong ảnh chụp màn hình ở trên, các điểm dữ liệu khác nhau từ dữ liệu phòng thí nghiệm và dữ liệu thực địa không được tách biệt rõ ràng, đồng thời các nhà phát triển mới sử dụng PSI có thể không dễ dàng hiểu được ngữ cảnh của dữ liệu và việc cần làm tiếp theo. Sự nhầm lẫn này đã dẫn đến nhiều bài đăng trên blog "Cách thực hiện" về giải mã báo cáo PSI.
Với thiết kế mới này, chúng tôi hy vọng sẽ giúp nhà phát triển diễn giải báo cáo dễ dàng hơn để họ có thể nhanh chóng từ việc tạo báo cáo PSI sang hành động dựa trên thông tin chi tiết có trong báo cáo đó.
Tìm hiểu thêm
Để biết thêm thông tin chi tiết về nội dung cập nhật liên quan đến công cụ cải thiện hiệu suất, hãy xem bài phát biểu khai mạc về Hội nghị Nhà phát triển Chrome 2021. Chúng tôi sẽ thông báo cho bạn về ngày phát hành PSI và các thay đổi đối với web.dev/measure.
Xin cảm ơn Milica Mihajlija, Philip Walton, Brendan Kenny và Ewa Gasperowicz đã chia sẻ ý kiến phản hồi về bài viết này