Tự động kiểm tra bằng AutoWebPerf

Một công cụ mô-đun mới cho phép tự động thu thập dữ liệu hiệu suất từ nhiều nguồn.

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

AutoWebPerf (AWP) là gì?

AutoWebPerf (AWP) là một công cụ mô-đun cho phép tự động thu thập dữ liệu hiệu suất từ nhiều nguồn. Hiện tại, có nhiều công cụ để đo lường hiệu suất của trang web cho các phạm vi khác nhau (phòng thí nghiệm và trường), chẳng hạn như Báo cáo trải nghiệm người dùng của Chrome, PageSpeed Insights hoặc WebPageTest. AWP cung cấp khả năng tích hợp với nhiều công cụ kiểm tra với cách thiết lập đơn giản để bạn có thể liên tục theo dõi hiệu suất của trang web ở một nơi.

Việc phát hành hướng dẫn về Các chỉ số quan trọng về trang web đồng nghĩa với việc việc theo dõi chặt chẽ và tích cực các trang web ngày càng trở nên quan trọng. Các kỹ sư tạo nên công cụ này đã kiểm tra hiệu suất trong nhiều năm và họ tạo ra AWP để tự động hoá một phần thủ công, định kỳ và tốn thời gian trong các hoạt động hằng ngày của họ. Hiện nay, AWP đã phát triển đến mức độ trưởng thành và đã sẵn sàng được chia sẻ rộng rãi để bất cứ ai cũng có thể hưởng lợi từ tính năng tự động hoá mà tính năng này mang lại.

Bạn có thể truy cập công cụ này trong kho lưu trữ công khai AutoWebPerf trên GitHub.

AWP là gì?

Mặc dù có nhiều công cụ và API để theo dõi hiệu suất của các trang web, nhưng hầu hết các công cụ và API đó đều hiển thị dữ liệu được đo lường tại một thời điểm cụ thể. Để theo dõi trang web một cách đầy đủ và duy trì hiệu suất tốt của các trang chính, bạn nên liên tục đo lường Chỉ số quan trọng chính của trang web theo thời gian và quan sát các xu hướng.

AWP giúp việc đó dễ dàng hơn bằng cách cung cấp một công cụ và công cụ tích hợp API tạo sẵn có thể được định cấu hình theo phương thức lập trình để tự động hoá các truy vấn định kỳ cho nhiều API theo dõi hiệu suất.

Ví dụ: với AWP, bạn có thể đặt quy trình kiểm tra hằng ngày trên trang chủ để thu thập dữ liệu thực địa từ API CrUX và dữ liệu thực tế từ báo cáo Lighthouse của PageSpeed Insights. Theo thời gian, dữ liệu này có thể được ghi và lưu trữ, chẳng hạn như trong Google Trang tính, sau đó hiển thị trực quan trong trang tổng quan của Data Studio. AWP tự động hoá phần công việc nặng nhọc trong toàn bộ quy trình, biến đây thành một giải pháp tuyệt vời để theo dõi các xu hướng trong phòng thí nghiệm và thực địa theo thời gian. Hãy xem phần Hình ảnh trực quan kết quả kiểm tra trong Data Studio bên dưới để biết thêm thông tin chi tiết).

Tổng quan về cấu trúc

AWP là thư viện dựa trên mô-đun có ba loại mô-đun khác nhau:

• công cụ
• mô-đun trình kết nối
• Mô-đun gatherer

Công cụ này sẽ lấy danh sách các bài kiểm thử qua trình kết nối (ví dụ: từ tệp CSV cục bộ), chạy quy trình kiểm tra hiệu suất thông qua các trình thu thập đã chọn (chẳng hạn như PageSpeed Insights) và ghi kết quả vào trình kết nối đầu ra (ví dụ: Google Trang tính).

AWP đi kèm với một số trình thu thập và trình kết nối được triển khai trước:

• Trình thu thập được triển khai trước:
  • API CrUX
  • CrUX BigQuery
  • API PageSpeed Insights
  • API WebPageTest
• Các trình kết nối được triển khai trước:
  • Google Trang tính
  • JSON
  • CSV

Tự động hoá quy trình kiểm tra bằng AWP

AWP tự động hoá quy trình kiểm tra hiệu suất thông qua các nền tảng kiểm tra mà bạn ưu tiên như PageSpeed Insights, WebPageTest hoặc API CrUX. AWP cho phép bạn linh hoạt chọn nơi tải danh sách kiểm thử và nơi ghi kết quả vào.

Ví dụ: bạn có thể chạy kiểm tra cho danh sách các bài kiểm thử được lưu trữ trong Google Trang tính và ghi kết quả vào tệp CSV bằng lệnh dưới đây:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Kiểm tra định kỳ

Bạn có thể chạy kiểm tra định kỳ với tần suất hằng ngày, hằng tuần hoặc hằng tháng. Ví dụ: bạn có thể chạy các lượt kiểm tra hằng ngày cho danh sách các hoạt động kiểm thử được xác định trong một JSON cục bộ như dưới đây:

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

Lệnh bên dưới sẽ đọc danh sách các bài kiểm tra kiểm tra từ tệp JSON cục bộ, chạy các bài kiểm tra trên máy cục bộ, sau đó xuất kết quả sang tệp CSV cục bộ:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Để liên tục chạy quy trình kiểm tra mỗi ngày dưới dạng một dịch vụ nền, bạn có thể sử dụng lệnh bên dưới:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

Ngoài ra, bạn có thể thiết lập crontab trong một môi trường giống Unix để chạy AWP dưới dạng công việc định kỳ hằng ngày:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Bạn có thể tìm thêm nhiều cách để tự động hoá quy trình kiểm tra hằng ngày và thu thập kết quả trong kho lưu trữ GitHub về AWS.

Trực quan hoá kết quả kiểm tra trong Data Studio

Bên cạnh việc liên tục đo lường Các chỉ số quan trọng về trang web, bạn phải có khả năng đánh giá các xu hướng và phát hiện các trường hợp hồi quy tiềm ẩn bằng các chỉ số người dùng thực (rum) hoặc dữ liệu trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX) do AWP thu thập. Xin lưu ý rằng Báo cáo trải nghiệm người dùng trên Chrome (CrUX) là dữ liệu tổng hợp di chuyển trong 28 ngày. Do đó, bạn cũng nên sử dụng dữ liệu rum của riêng mình cùng với CrUX để có thể sớm phát hiện sự hồi quy.

Data Studio là một công cụ trực quan hoá miễn phí mà bạn có thể dễ dàng tải các chỉ số hiệu suất vào và vẽ xu hướng dưới dạng biểu đồ. Ví dụ: các biểu đồ chuỗi thời gian dưới đây cho thấy Các chỉ số quan trọng về trang web dựa trên dữ liệu trong Báo cáo trải nghiệm người dùng trên Chrome. Một trong các biểu đồ cho thấy Điểm số tổng hợp về mức thay đổi bố cục trong những tuần gần đây, tức là mức hồi quy về độ ổn định của bố cục đối với một số trang nhất định. Trong trường hợp này, bạn nên ưu tiên phân tích vấn đề cơ bản của các trang này.

Để đơn giản hoá toàn bộ quy trình từ bước thu thập dữ liệu đến trực quan hoá, bạn có thể chạy AWP với danh sách URL để tự động xuất kết quả sang Google Trang tính bằng lệnh sau:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Sau khi thu thập các chỉ số hằng ngày trong một bảng tính, bạn có thể tạo một trang tổng quan Data Studio để tải dữ liệu ngay từ bảng tính và trình bày các xu hướng vào biểu đồ chuỗi thời gian. Hãy xem Trình kết nối API Bảng tính Google để biết các bước chi tiết về cách thiết lập AWP với bảng tính làm nguồn dữ liệu để hiển thị trên Data Studio.

Tiếp theo là gì?

AWP cung cấp một cách đơn giản và tích hợp để giảm thiểu công sức thiết lập quy trình giám sát liên tục nhằm đo lường Các chỉ số quan trọng về trang web và các chỉ số hiệu suất khác. Hiện tại, AWP bao gồm các trường hợp sử dụng phổ biến nhất và sẽ tiếp tục cung cấp thêm tính năng để giải quyết các trường hợp sử dụng khác trong tương lai.

Tìm hiểu thêm trong kho lưu trữ AutoWebPerf.