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 ngưỡng Các chỉ số quan trọng về trang web được đề xuất 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ó các 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 đề 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 giúp báo cáo này phù hợp để xác định những trang cụ thể cần cải thiện. Không giống như PageSpeed Insights, báo cáo Search Console bao gồm dữ liệu hiệu suất trong quá khứ. 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 tạo sẵn hiển thị dữ liệu CrUX cho một nguồn gốc mà 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 trang tổng quan CrUX có 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ể được 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à kiểm thử các giải pháp có thể áp dụng.
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 RUM chuyên trách chuyên thu thập và báo cáo dữ liệu RUM. Để sử dụng Core Web Vitals với các dịch vụ này, hãy hỏi nhà cung cấp RUM về cách bật tính năng theo dõi Core Web Vitals cho trang web của bạn.
Nếu không có nhà cung cấp RUM, bạn có thể mở rộng chế độ thiết lập 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 thức 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.
Không phải tất cả các chỉ số tạo nên Web Vitals đều được hiển thị trực tiếp qua các API hiệu suất tích hợp sẵn của trình duyệt, mà được xây dựng dựa trên các API đó. Ví dụ: Mức thay đổi bố cục tích luỹ (CLS) được triển khai bằng API không ổn định của bố cục. 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 Các phương pháp hay nhất để đo lường Chỉ số quan trọng của trang web trong thực tế.
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 được báo cáo, bạn sẽ không bao giờ thấy dữ liệu đó. Tài liệu về web-vitals
bao gồm 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ó 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. Doanh nghiệp thường đạt được hiệu suất cao nhất khi toàn bộ công ty, chứ không phải 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à bạn phải chú ý đến phần đuô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ố Web Vitals, 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ư trung vị hoặc trung bình để xác định xem một trang web hoặc trang có đáp ứng các ngưỡng được đề 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ố quan trọng về trang web bằng dữ liệu 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 trong phòng thí nghiệm có thể được thu thập từ các môi trường thử nghiệm trước khi phát hành công khai. Do đó, dữ liệu này có thể được đưa 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 thử nghiệm, đặc biệt là nếu điều kiện mạng, loại thiết bị hoặc vị trí của môi trườ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 trong 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, hoạt độ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 đó, các chỉ số này chỉ ghi lại các thay đổi bố cục xảy ra trong lần 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ố quan trọng về trang web trong điều kiện mạng và thiết bị cụ thể.