Thu thập dữ liệu về các chỉ số Web Vitals của trang web là bước đầu tiên để cải thiện các chỉ số này. Một bản phân tích toàn diện sẽ thu thập dữ liệu hiệu suất từ cả môi trường thực tế và môi trường phòng thí nghiệm. Việc đo lường các chỉ số Web Vitals chỉ yêu cầu thay đổi mã tối thiểu và có thể được thực hiện bằng các công cụ miễn phí.
Đo lường Các chỉ số quan trọng về trang web bằng dữ liệu RUM
Dữ liệu Theo dõi người dùng thực (RUM), còn gọi là dữ liệu thực địa, ghi lại hiệu suất mà người dùng thực tế của trang web trải nghiệm. Dữ liệu RUM là dữ liệu mà Google sử dụng để xác định xem một trang web có đáp ứng các ngưỡng đề xuất của Chỉ số quan trọng chính của trang web hay không.
Bắt đầu
Nếu bạn chưa thiết lập RUM, các công cụ sau đây sẽ nhanh chóng cung cấp cho bạn dữ liệu về hiệu suất thực tế của trang web. Các công cụ này đều dựa trên cùng một tập dữ liệu cơ bản (Báo cáo trải nghiệm người dùng trên Chrome), nhưng có những trường hợp sử dụng hơi khác nhau:
- Công cụ của Chrome cho nhà phát triển tích hợp với tập dữ liệu CrUX trong chế độ xem chỉ số trực tiếp của bảng điều khiển Hiệu suất. Bằng cách so sánh trải nghiệm cục bộ với trải nghiệm của người dùng thực trên cùng một trang, bạn có thể đưa ra quyết định sáng suốt hơn về những khía cạnh cần tập trung gỡ lỗi. Nếu đang tìm một hành động để bắt đầu đo lường và cải thiện các chỉ số Web Vitals của trang web, bạn nên sử dụng bảng điều khiển Hiệu suất của Chrome DevTools.
- PageSpeed Insights (PSI) báo cáo về hiệu suất tổng hợp ở cấp trang và cấp nguồn gốc trong 28 ngày qua. Ngoài ra, công cụ này còn đưa ra các đề xuất về cách cải thiện hiệu suất. PSI có trên web và dưới dạng API.
- Search Console báo cáo dữ liệu hiệu suất theo từng trang. Điều này rất phù hợp để xác định các trang cụ thể cần cải thiện. Không giống như PageSpeed Insights, báo cáo của Search Console bao gồm cả dữ liệu hiệu suất trước đây. Bạn chỉ có thể sử dụng Search Console cho những trang web mà bạn sở hữu và đã xác minh quyền sở hữu.
- Trang tổng quan CrUX là một trang tổng quan được tạo sẵn, hiển thị dữ liệu CrUX theo nguồn gốc bạn chọn. Công cụ này được xây dựng dựa trên Data Studio và quá trình thiết lập sẽ mất khoảng một phút. So với PageSpeed Insights và Search Console, báo cáo trên trang tổng quan CrUX bao gồm nhiều phương diện hơn – ví dụ: dữ liệu có thể được phân tích theo thiết bị và loại kết nối.
Xin lưu ý rằng mặc dù các công cụ được liệt kê trước đó rất phù hợp để "bắt đầu" đo lường Các chỉ số quan trọng về trang web, nhưng chúng cũng có thể hữu ích trong các ngữ cảnh khác. Cụ thể, cả CrUX và PSI đều có sẵn dưới dạng API và có thể dùng để tạo trang tổng quan cũng như các báo cáo khác.
Thu thập dữ liệu RUM
Mặc dù các công cụ dựa trên CrUX là một điểm khởi đầu phù hợp để điều tra hiệu suất của các chỉ số Web Vitals, nhưng bạn nên bổ sung thêm RUM của riêng mình. Dữ liệu RUM mà bạn tự thu thập có thể cung cấp phản hồi chi tiết và nhanh chóng hơn về hiệu suất của trang web. Nhờ đó, bạn có thể dễ dàng xác định vấn đề và thử nghiệm các giải pháp khả thi.
Bạn có thể thu thập dữ liệu RUM của riêng mình bằng cách sử dụng một nhà cung cấp RUM chuyên dụng hoặc bằng cách thiết lập công cụ của riêng mình.
Nhà cung cấp dịch vụ rum chuyên trách chuyên thu thập và báo cáo dữ liệu RUM. Để sử dụng Chỉ số quan trọng chính của trang web với những dịch vụ này, hãy yêu cầu nhà cung cấp dịch vụ RUM bật tính năng theo dõi Chỉ số quan trọng chính của trang web cho trang web của bạn.
Nếu không có nhà cung cấp RUM, bạn có thể bổ sung chế độ thiết lập số liệu phân tích hiện có để thu thập và báo cáo về các chỉ số này bằng cách sử dụng thư viện JavaScript web-vitals. Phương pháp này sẽ được giải thích chi tiết hơn trong phần tiếp theo.
Thư viện JavaScript web-vitals
Nếu bạn đang triển khai chế độ thiết lập RUM của riêng mình cho Web Vitals, thì cách dễ nhất để thu thập các phép đo Web Vitals là sử dụng thư viện JavaScript web-vitals. web-vitals là một thư viện nhỏ, mô-đun (~2KB) cung cấp một API thuận tiện để thu thập và báo cáo từng chỉ số Web Vitals có thể đo lường tại hiện trường.
Các chỉ số tạo nên Chỉ số quan trọng về trang web không phải được các API hiệu suất tích hợp sẵn của trình duyệt hiển thị trực tiếp, mà được xây dựng dựa trên các API đó. Ví dụ: Điểm số tổng hợp về mức thay đổi bố cục (CLS) được triển khai bằng Layout Instability API. Khi sử dụng web-vitals, bạn không cần phải tự triển khai các chỉ số này; đồng thời, việc này cũng đảm bảo rằng dữ liệu bạn thu thập khớp với phương pháp và các phương pháp hay nhất cho từng chỉ số.
Để biết thêm thông tin về cách triển khai web-vitals, hãy tham khảo tài liệu và hướng dẫn về Các phương pháp hay nhất để đo lường Các chỉ số quan trọng về trang web trong thực địa.
Tổng hợp dữ liệu
Bạn cần phải báo cáo các số liệu đo lường do web-vitals thu thập. Nếu dữ liệu này được đo lường nhưng không báo cáo, bạn sẽ không bao giờ thấy dữ liệu đó. Tài liệu về web-vitals có các ví dụ minh hoạ cách gửi dữ liệu đến điểm cuối API chung, Google Analytics hoặc Trình quản lý thẻ của Google.
Nếu bạn đã có một công cụ báo cáo yêu thích, hãy cân nhắc sử dụng công cụ đó. Nếu không, bạn có thể sử dụng Google Analytics miễn phí cho mục đích này.
Khi cân nhắc nên sử dụng công cụ nào, bạn nên nghĩ đến những người cần có quyền truy cập vào dữ liệu. Các doanh nghiệp thường đạt được hiệu suất cao nhất khi toàn bộ công ty, thay vì một bộ phận, quan tâm đến việc cải thiện hiệu suất. Hãy xem bài viết Khắc phục tốc độ trang web trên nhiều chức năng để tìm hiểu cách thuyết phục các bộ phận khác nhau.
Diễn giải dữ liệu
Khi phân tích dữ liệu hiệu suất, điều quan trọng là cần chú ý đến phần còn lại của phân phối. Dữ liệu RUM thường cho thấy hiệu suất có sự khác biệt lớn – một số người dùng có trải nghiệm nhanh, số khác lại có trải nghiệm chậm. Tuy nhiên, việc sử dụng giá trị trung bình để tóm tắt dữ liệu có thể che giấu hành vi này.
Đối với Các chỉ số quan trọng về trang web, Google sử dụng tỷ lệ phần trăm trải nghiệm "tốt" thay vì các số liệu thống kê như điểm trung bình hoặc điểm trung bình để xác định xem một trang hoặc trang web có đáp ứng các ngưỡng đề xuất hay không. Cụ thể, để một trang web hoặc trang được coi là đáp ứng các ngưỡng của Chỉ số quan trọng chính về trang web, 75% số lượt truy cập trang phải đáp ứng ngưỡng "tốt" cho mỗi chỉ số.
Đo lường các chỉ số Web Vitals bằng dữ liệu trong phòng thí nghiệm
Dữ liệu trong phòng thí nghiệm (còn gọi là dữ liệu tổng hợp) được thu thập từ một môi trường được kiểm soát, thay vì người dùng thực tế. Không giống như dữ liệu RUM, dữ liệu phòng thí nghiệm có thể được thu thập từ các môi trường trước khi phát hành công khai để được tích hợp vào quy trình làm việc của nhà phát triển và các quy trình tích hợp liên tục. Ví dụ về các công cụ thu thập dữ liệu tổng hợp là Lighthouse và WebPageTest.
Những yếu tố nên cân nhắc
Sẽ luôn có sự khác biệt giữa dữ liệu RUM và dữ liệu phòng thí nghiệm, đặc biệt là khi điều kiện mạng, loại thiết bị hoặc vị trí của môi trường phòng thí nghiệm khác biệt đáng kể so với người dùng. Tuy nhiên, khi nói đến việc thu thập dữ liệu của phòng thí nghiệm về các chỉ số Web Vitals, bạn cần lưu ý một số điều cụ thể sau:
- Thời gian hiển thị nội dung lớn nhất (LCP) được đo trong môi trường phòng thí nghiệm có thể khác với thời gian hiển thị nội dung lớn nhất được đo trong thực tế bằng dữ liệu RUM do độ trễ trong việc tải trang (thông qua lệnh chuyển hướng, độ trễ khi kết nối với máy chủ hoặc dữ liệu chưa được lưu vào bộ nhớ đệm), nội dung khác nhau hiển thị cho người dùng khác nhau tuỳ thuộc vào màn hình hoặc do các lý do khác (bao gồm cả biểu ngữ cookie, tính năng cá nhân hoá).
- Mức thay đổi bố cục tích luỹ (CLS) được đo trong môi trường phòng thí nghiệm có thể thấp hơn mức CLS được quan sát trong dữ liệu RUM. Nhiều công cụ trong phòng thí nghiệm chỉ tải trang chứ không tương tác với trang đó. Do đó, chúng chỉ ghi lại những thay đổi về bố cục xảy ra trong lượt tải trang đầu tiên. Ngược lại, CLS do các công cụ RUM đo lường sẽ ghi lại các lần thay đổi bố cục không mong muốn xảy ra trong toàn bộ thời gian hoạt động của trang.
- Bạn không thể đo lường chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) trong môi trường thử nghiệm vì chỉ số này yêu cầu người dùng tương tác với trang. Do đó, Tổng thời gian chặn (TBT) là proxy phòng thí nghiệm được đề xuất cho INP. TBT đo lường "tổng thời gian từ thời điểm Hiển thị nội dung đầu tiên đến Thời điểm tương tác, trong đó trang bị chặn không phản hồi hoạt động đầu vào của người dùng". Mặc dù INP và TBT được tính toán theo cách khác nhau, nhưng cả hai đều phản ánh một luồng chính bị chặn trong quá trình khởi động. Khi luồng chính bị chặn, trình duyệt sẽ bị chậm trễ trong việc phản hồi các hoạt động tương tác của người dùng.
Công cụ
Bạn có thể sử dụng các công cụ sau để thu thập kết quả đo lường trong phòng thí nghiệm về các chỉ số Web Vitals:
- Công cụ của Chrome cho nhà phát triển đo lường và báo cáo Các chỉ số quan trọng về trang web cho một trang nhất định trong chế độ xem chỉ số trực tiếp của bảng điều khiển Hiệu suất. Chế độ xem này cung cấp cho nhà phát triển phản hồi về hiệu suất theo thời gian thực khi họ thực hiện các thay đổi về mã.
- Lighthouse Lighthouse báo cáo về LCP, CLS và TBT, đồng thời nêu bật những điểm có thể cải thiện hiệu suất. Lighthouse có trong Công cụ dành cho nhà phát triển của Chrome, dưới dạng một gói npm và cũng có thể được đưa vào quy trình tích hợp liên tục bằng cách sử dụng Lighthouse CI.
- WebPageTest đưa các chỉ số Web Vitals vào báo cáo tiêu chuẩn. WebPageTest rất hữu ích trong việc thu thập thông tin về các chỉ số Web Vitals trong điều kiện mạng và thiết bị cụ thể.