Giờ đây, các công cụ dành cho nhà phát triển mà bạn yêu thích có thể đo lường Các chỉ số quan trọng về trang web.
Sáng kiến Các chỉ số quan trọng về trang web mà chúng tôi công bố gần đây cung cấp hướng dẫn thống nhất về các tín hiệu chất lượng cần thiết cho mọi trang web nhằm mang lại trải nghiệm chất lượng cao cho người dùng trên web. Chúng tôi vui mừng thông báo rằng tất cả các công cụ phổ biến của Google dành cho nhà phát triển web hiện đều hỗ trợ việc đo lường Các chỉ số quan trọng về trang web, giúp bạn chẩn đoán và khắc phục các vấn đề về trải nghiệm người dùng dễ dàng hơn. Trong đó có Lighthouse, PageSpeed Insights, Công cụ của Chrome cho nhà phát triển, Search Console, công cụ đo lường của web.dev, phần mở rộng Các chỉ số quan trọng về trang web của Chrome và một API mới (!) Báo cáo trải nghiệm người dùng của Chrome.
Hiện tại, Google Tìm kiếm hiện đã bao gồm Các chỉ số quan trọng về trang web làm nền tảng để đánh giá trải nghiệm trên trang, nên điều quan trọng là những chỉ số này phải có sẵn và hữu ích nhất có thể.
Để bắt đầu hành trình tối ưu hoá trải nghiệm người dùng bằng Các chỉ số quan trọng về trang web, hãy thử quy trình công việc sau đây:
- Hãy dùng báo cáo Các chỉ số quan trọng về trang web mới của Search Console để xác định các nhóm trang cần chú ý (dựa trên dữ liệu thực tế tại trang).
- Sau khi bạn đã xác định các trang cần cải tiến, hãy sử dụng PageSpeed Insights (dựa trên Lighthouse và Báo cáo trải nghiệm người dùng của Chrome) để chẩn đoán các vấn đề về phòng thí nghiệm và hiện trường trên trang. Bạn có thể truy cập vào PageSpeed Insights (PSI) qua Search Console hoặc nhập trực tiếp URL trên PSI.
- Bạn đã sẵn sàng tối ưu hoá trang web của mình trong phòng thí nghiệm này? Sử dụng Lighthouse và Công cụ của Chrome cho nhà phát triển để đo lường Các chỉ số quan trọng về trang web và nhận hướng dẫn hữu ích về chính xác những vấn đề cần khắc phục. Tiện ích Các chỉ số quan trọng về trang web của Chrome có thể giúp bạn xem các chỉ số trên máy tính theo thời gian thực.
- Bạn cần một trang tổng quan tuỳ chỉnh về Các chỉ số quan trọng về trang web? Bạn có thể sử dụng Trang tổng quan CrUX mới cập nhật hoặc API Báo cáo trải nghiệm người dùng của Chrome mới cho dữ liệu thực địa hoặc API PageSpeed Insights cho dữ liệu phòng thí nghiệm.
- Bạn đang tìm hướng dẫn? web.dev/measure có thể đo lường trang của bạn và hiển thị cho bạn một bộ hướng dẫn cũng như lớp học lập trình được ưu tiên để tối ưu hoá bằng cách sử dụng dữ liệu PSI.
- Cuối cùng, hãy sử dụng Lighthouse CI cho các yêu cầu lấy dữ liệu để đảm bảo không có sự hồi quy trong Các chỉ số quan trọng về trang web trước khi bạn triển khai thay đổi cho phiên bản chính thức.
Trong phần giới thiệu đó, hãy cùng tìm hiểu kỹ hơn về nội dung cập nhật cụ thể cho từng công cụ!
Ngọn hải đăng
Lighthouse là một công cụ kiểm tra trang web tự động giúp nhà phát triển chẩn đoán các vấn đề và xác định cơ hội cải thiện trải nghiệm người dùng trên trang web của họ. Điểm số này đo lường một số phương diện đánh giá chất lượng trải nghiệm người dùng trong môi trường phòng thí nghiệm, bao gồm cả hiệu suất và khả năng tiếp cận. Phiên bản mới nhất của Lighthouse (6.0, phát hành giữa tháng 5 năm 2020) bao gồm các nội dung kiểm tra bổ sung, chỉ số mới và điểm hiệu suất mới được soạn.
Lighthouse 6.0 giới thiệu 3 chỉ số mới cho báo cáo. Hai trong số các chỉ số mới này – Thời gian hiển thị nội dung lớn nhất (LCP) và Điểm số tổng hợp về mức thay đổi bố cục (CLS) – là việc triển khai Các chỉ số quan trọng về trang web trong phòng thí nghiệm và cung cấp thông tin chẩn đoán quan trọng để tối ưu hoá trải nghiệm người dùng. Do tầm quan trọng của chúng trong việc đánh giá trải nghiệm người dùng, các chỉ số mới không chỉ được đo lường và đưa vào báo cáo, mà còn được xem xét khi tính điểm hiệu suất.
Chỉ số mới thứ ba trong Lighthouse – Tổng thời gian chặn (TBT) – tương quan tốt với chỉ số trường Thời gian phản hồi lần tương tác đầu tiên (FID), một chỉ số Các chỉ số quan trọng về trang web khác. Làm theo các đề xuất được cung cấp trong báo cáo Lighthouse và tối ưu hóa dựa trên điểm số của bạn sẽ giúp bạn cung cấp trải nghiệm tốt nhất có thể cho người dùng của mình.
Tất cả sản phẩm mà Lighthouse cung cấp đều được cập nhật để phản ánh phiên bản mới nhất, bao gồm cả Lighthouse CI, cho phép bạn dễ dàng đo lường Các chỉ số quan trọng về trang web theo yêu cầu kéo trước khi hợp nhất và triển khai.
Để tìm hiểu thêm về các bản cập nhật mới nhất của Lighthouse, hãy xem bài đăng trên blog Có gì mới trong Lighthouse 6.0.
PageSpeed Insights
PageSpeed Insights (PSI) báo cáo về phòng thí nghiệm và hiệu suất thực tế của một trang trên cả thiết bị di động và máy tính. Công cụ này cung cấp thông tin tổng quan về cách người dùng thực tế trải nghiệm trang (dựa trên Báo cáo trải nghiệm người dùng trên Chrome) và một tập hợp các đề xuất hữu ích về cách chủ sở hữu trang web có thể cải thiện trải nghiệm trên trang (do Lighthouse cung cấp).
PageSpeed Insights và API PageSpeed Insights cũng đã được nâng cấp để sử dụng Lighthouse 6.0, đồng thời hỗ trợ đo lường Các chỉ số quan trọng về trang web trong cả phòng thí nghiệm và phần thực tế của báo cáo! Các chỉ số quan trọng về trang web được chú thích bằng một dải ruy-băng màu xanh dương như minh hoạ dưới đây.
Mặc dù Search Console cung cấp cho chủ sở hữu trang web thông tin tổng quan hữu ích về các nhóm trang cần chú ý, nhưng PSI giúp xác định các cơ hội trên mỗi trang để cải thiện trải nghiệm trên trang. Trong PSI, bạn có thể thấy rõ trang của mình có đáp ứng các ngưỡng để mang lại trải nghiệm tốt trên tất cả Các chỉ số quan trọng về trang web ở đầu báo cáo hay không, tức là đạt kết quả đánh giá Chỉ số quan trọng chính của trang web hay không vượt qua kết quả đánh giá Các chỉ số quan trọng về trang web.
CrUX
Báo cáo trải nghiệm người dùng trên Chrome (CrUX) là một tập dữ liệu công khai bao gồm dữ liệu về trải nghiệm người dùng thực trên hàng triệu trang web. Công cụ này đo lường phiên bản trường của tất cả Các chỉ số quan trọng về trang web. Không giống như dữ liệu trong phòng thí nghiệm, dữ liệu CrUX là dữ liệu của những người dùng đã chọn tham gia trong trường. Nhờ sử dụng dữ liệu này, các nhà phát triển có thể nắm được sự phân phối trải nghiệm người dùng thực tế trên trang web của chính họ hoặc thậm chí là trang web của đối thủ cạnh tranh. Ngay cả khi trang web của bạn không có dữ liệu rum, CrUX vẫn có thể giúp bạn đánh giá Các chỉ số quan trọng về trang web một cách nhanh chóng và dễ dàng. Tập dữ liệu CrUX trên BigQuery bao gồm dữ liệu chi tiết về hiệu suất cho tất cả Các chỉ số quan trọng về trang web và có trong bản tổng quan nhanh hằng tháng ở cấp độ gốc.
Cách duy nhất để thực sự biết được trang web của bạn hoạt động như thế nào cho người dùng là thực sự đo lường hiệu suất của trang web tại chỗ khi những người dùng đó đang tải và tương tác với trang web. Loại hoạt động đo lường này thường được gọi là Giám sát người dùng thực – gọi tắt là rum. Ngay cả khi trang web của bạn không có dữ liệu rum, CrUX vẫn có thể giúp bạn đánh giá Các chỉ số quan trọng về trang web một cách nhanh chóng và dễ dàng.
Giới thiệu API CrUX
Hôm nay, chúng tôi rất vui được thông báo về API CrUX, một cách nhanh chóng và miễn phí để dễ dàng tích hợp quy trình phát triển của bạn với quy trình đo lường chất lượng nguồn gốc và cấp URL cho các chỉ số trường sau đây:
- Thời gian hiển thị nội dung lớn nhất
- Điểm số tổng hợp về mức thay đổi bố cục
- Độ trễ đầu vào đầu tiên
- Nội dung đầu tiên hiển thị
Nhà phát triển có thể truy vấn nguồn gốc hoặc URL và phân đoạn kết quả theo nhiều kiểu dáng. API này cập nhật hằng ngày và tóm tắt dữ liệu của 28 ngày trước đó (không giống như tập dữ liệu BigQuery được tổng hợp hằng tháng). API này cũng có cùng hạn mức API công khai tương tự mà chúng tôi đặt trên API khác của mình là PageSpeed Insights API (25.000 yêu cầu mỗi ngày).
Dưới đây là bản minh hoạ cách sử dụng API CrUX để trình bày trực quan các chỉ số Các chỉ số quan trọng về trang web với các bản phân phối theo trạng thái tốt, cần cải thiện và kém:
Trong các bản phát hành sau này, chúng tôi dự định mở rộng API để cho phép truy cập vào các phương diện và chỉ số khác trong tập dữ liệu CrUX.
Trang tổng quan CrUX được cải tiến
Trang tổng quan CrUX mới được thiết kế lại cho phép bạn dễ dàng theo dõi hiệu suất của một nguồn gốc theo thời gian. Giờ đây, bạn có thể sử dụng trang này để theo dõi tình trạng phân phối tất cả các chỉ số Các chỉ số quan trọng về trang web. Để bắt đầu sử dụng trang tổng quan, hãy xem hướng dẫn của chúng tôi trên web.dev.
Chúng tôi đã ra mắt trang đích mới cho Các chỉ số quan trọng về trang web để giúp bạn dễ dàng xem nhanh hiệu suất của trang web. Chúng tôi hoan nghênh ý kiến phản hồi của bạn về tất cả các công cụ CrUX. Để chia sẻ ý kiến và câu hỏi của bạn, hãy liên hệ với chúng tôi qua tài khoản Twitter @ChromeUXReport hoặc Google Group.
Bảng điều khiển Hiệu suất Công cụ của Chrome cho nhà phát triển
Gỡ lỗi các sự kiện Thay đổi bố cục trong phần Trải nghiệm
Bảng Hiệu suất của Công cụ của Chrome cho nhà phát triển có một mục Trải nghiệm mới có thể giúp bạn phát hiện những thay đổi bố cục ngoài dự kiến. Tính năng này rất hữu ích trong việc tìm và khắc phục các vấn đề không ổn định về hình ảnh trên trang góp phần vào Điểm số tổng hợp về mức thay đổi bố cục.
Chọn một mức thay đổi bố cục để xem thông tin chi tiết về nó trong thẻ Tóm tắt. Để hình ảnh hoá vị trí diễn ra sự thay đổi, hãy di chuột qua các trường Đã chuyển từ và Đã chuyển tới.
Gỡ lỗi trạng thái sẵn sàng tương tác bằng Tổng thời gian chặn ở chân trang
Chỉ số Tổng thời gian chặn (TBT) có thể được đo bằng các công cụ trong phòng thí nghiệm và là một proxy tuyệt vời cho Độ trễ đầu vào đầu tiên. TBT đo lường tổng thời gian từ lúc 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 của hoạt động đầu vào. Hoạt động tối ưu hoá hiệu suất giúp cải thiện TBT trong phòng thí nghiệm sẽ cải thiện FID tại hiện trường.
Giờ đây, TBT hiển thị ở chân trang của bảng Hiệu suất của Công cụ của Chrome cho nhà phát triển khi bạn đo lường hiệu suất trang:
- Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Hiệu suất.
- Nhấp vào Ghi.
- Tải lại trang theo cách thủ công.
- Chờ trang tải rồi dừng ghi.
Để biết thêm thông tin, hãy xem bài viết Tính năng mới trong Công cụ cho nhà phát triển (Chrome 84).
Search Console
Báo cáo Các chỉ số quan trọng về trang web mới trong Search Console giúp bạn xác định các nhóm trang cần chú ý trên trang web của mình, dựa trên dữ liệu thực (thực tế) lấy từ CrUX. Hiệu suất URL được nhóm theo trạng thái, loại chỉ số và nhóm URL (nhóm các trang web tương tự nhau).
Báo cáo này dựa trên 3 chỉ số Các chỉ số quan trọng về trang web: LCP, FID và CLS. Nếu không có đủ lượng dữ liệu báo cáo tối thiểu cho những chỉ số này thì URL sẽ bị loại khỏi báo cáo. Hãy dùng thử báo cáo mới để có thông tin toàn diện về hiệu suất cho nguồn gốc của bạn.
Sau khi xác định được một loại trang có vấn đề liên quan đến Các chỉ số quan trọng về trang web, bạn có thể dùng PageSpeed Insights để tìm hiểu các đề xuất tối ưu hoá cụ thể cho các trang đại diện.
web.dev
https://pagespeed.web.dev/ cho phép bạn đo lường hiệu suất của trang theo thời gian, cung cấp danh sách các hướng dẫn và lớp học lập trình được ưu tiên về cách cải thiện. Quá trình đo lường này sử dụng PageSpeed Insights. Công cụ đo lường này hiện cũng hỗ trợ các chỉ số Các chỉ số quan trọng về trang web, như thể hiện dưới đây:
Tiện ích Các chỉ số quan trọng về trang web
Tiện ích Các chỉ số quan trọng về trang web đo lường ba chỉ số Các chỉ số quan trọng về trang web theo thời gian thực cho Google Chrome (máy tính). Công cụ này rất hữu ích trong việc phát hiện sớm các vấn đề trong quy trình phát triển và đóng vai trò là công cụ chẩn đoán để đánh giá hiệu suất của Các chỉ số quan trọng về trang web khi bạn duyệt web.
Tiện ích này hiện có sẵn để cài đặt từ Cửa hàng Chrome trực tuyến! Chúng tôi hy vọng bạn thấy nội dung này hữu ích. Chúng tôi hoan nghênh mọi đóng góp để cải thiện dự án này cũng như ý kiến phản hồi trên kho lưu trữ GitHub của dự án.
Thông tin nổi bật nhanh
Tổng kết Việc bạn có thể làm tiếp theo:
- Sử dụng Lighthouse trong Công cụ cho nhà phát triển để tối ưu hoá trải nghiệm người dùng và đảm bảo bạn đang tự thiết lập để thành công với Các chỉ số quan trọng về trang web trong trường.
- Dùng PageSpeed Insights để so sánh hiệu suất của các chỉ số quan trọng về trang web trong phòng thí nghiệm của bạn với các lĩnh vực khác.
- Hãy dùng thử API Báo cáo trải nghiệm người dùng của Chrome phiên bản mới để dễ dàng xem hiệu suất của nguồn và URL của bạn so với Các chỉ số quan trọng về trang web trong 28 ngày qua.
- Sử dụng phần Trải nghiệm và chân trang trong bảng Hiệu suất của Công cụ cho nhà phát triển để tìm hiểu kỹ và gỡ lỗi dựa trên Các chỉ số quan trọng về trang web cụ thể.
- Hãy sử dụng báo cáo Các chỉ số quan trọng về trang web của Search Console để tóm tắt về hiệu suất của các nguồn gốc của bạn trong lĩnh vực này.
- Sử dụng tiện ích Các chỉ số quan trọng về trang web để theo dõi hiệu suất của một trang so với Các chỉ số quan trọng về trang web theo thời gian thực.
Chúng tôi sẽ trình bày thêm về công cụ Các chỉ số quan trọng về trang web tại sự kiện web.dev Live vào tháng 6. Đăng ký để nhận thông tin cập nhật về sự kiện!
~ của Elizabeth và Addy, Người hỗ trợ WebPerf