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

Một công cụ theo 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ụ theo mô-đun, cho phép tự động thu thập dữ liệu hiệu suất từ nhiều nguồn. Hiện có nhiều công cụ để đo lường hiệu suất trang web cho nhiều phạm vi (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 trên 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 bằng một 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ề Web Vitals có nghĩa là việc giám sát chặt chẽ và chủ động các trang web ngày càng trở nên quan trọng. Các kỹ sư tạo ra công cụ này đã thực hiện các báo cáo 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ọ. Ngày nay, AWP đã đạt đến mức độ hoàn thiện và sẵn sàng được chia sẻ rộng rãi để mọi người có thể hưởng lợi từ tính năng tự động hoá mà AWP mang lại.

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

AWP dùng để làm 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 đều hiển thị dữ liệu được đo tại một thời điểm cụ thể. Để giám sát trang web một cách đầy đủ và duy trì hiệu quả tốt của các trang chính, bạn nên liên tục đo lường Core Web Vitals theo thời gian và quan sát các xu hướng.

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

Ví dụ: với AWP, bạn có thể thiết lập một bài kiểm tra hằng ngày trên trang chủ để thu thập dữ liệu trường từ API CrUX và dữ liệu phòng thí nghiệm từ báo cáo Lighthouse của PageSpeed Insights. Dữ liệu này có thể được ghi và lưu trữ theo thời gian, ví dụ: trong Google Trang tính, sau đó được trực quan hoá trong trang tổng quan Data Studio. AWP tự động hoá phần công việc nặng nhọc của toàn bộ quy trình, khiến đây trở 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à trên thực địa theo thời gian. Hãy xem phần Trực quan hoá 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à một thư viện dựa trên mô-đun với 3 loại mô-đun:

động cơ
Mô-đun giắc cắm
Mô-đun gatherer

Công cụ này lấy danh sách các kiểm thử từ một trình kết nối (ví dụ: từ tệp CSV cục bộ), chạy các quy trình kiểm tra hiệu suất thông qua các trình thu thập được 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).

Sơ đồ cấu trúc của AWP.

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 sẵn:

Các trình thu thập được triển khai trướ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á các quy trình kiểm tra hiệu suất thông qua nền tảng kiểm tra mà bạn muốn, chẳng hạn như PageSpeed Insights, WebPageTest hoặc CrUX API. AWP mang đến sự linh hoạt khi chọn nơi tải danh sách kiểm thử và nơi ghi kết quả.

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

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 các hoạt động kiểm tra định kỳ hằng ngày, hằng tuần hoặc hằng tháng. Ví dụ: bạn có thể chạy các hoạt động kiểm tra hằng ngày cho danh sách các kiểm thử được xác định trong một JSON cục bộ như bên dưới:

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

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

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

Để chạy các hoạt động kiểm tra hằng ngày liên tục dưới dạng 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 tương tự như Unix để chạy AWP dưới dạng một dịch vụ chạy ngầm theo thời gian định trước 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 cách tự động hoá các hoạt động kiểm tra hằng ngày và thu thập kết quả trong kho lưu trữ AWP GitHub.

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

Cùng với việc liên tục đo lường Core Web Vitals, bạn cần có khả năng đánh giá các xu hướng và phát hiện những điểm giảm sút tiềm ẩn bằng các chỉ số người dùng thực (RUM) hoặc dữ liệu 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à một bản tổng hợp di động trong 28 ngày. Do đó, bạn nên sử dụng cả dữ liệu RUM của riêng mình cùng với CrUX để có thể phát hiện các lỗi hồi quy sớm hơn.

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 bên dưới cho thấy Core Web Vitals 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 Mức thay đổi bố cục tích luỹ tăng lên trong những tuần gần đây, tức là có sự hồi quy về độ ổn định bố cục đối với một số trang. Trong trường hợp này, bạn nên ưu tiên nỗ lực phân tích các vấn đề cơ bản của những trang này.

Ảnh chụp màn hình về kết quả Core Web Vitals trong Data Studio.

Để đơn giản hoá quy trình từ đầu đến cuối, từ thu thập dữ liệu đến trực quan hoá, bạn có thể chạy AWP bằng 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 bảng tính, bạn có thể tạo một trang tổng quan Data Studio tải dữ liệu trực tiếp từ bảng tính và vẽ các xu hướng vào biểu đồ chuỗi thời gian. Hãy xem Trình kết nối API Google Trang tính để biết các bước chi tiết về cách thiết lập AWP bằng trang tính làm nguồn dữ liệu để trực quan hoá 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 nỗ lực thiết lập một quy trình giám sát liên tục nhằm đo lường Core Web Vitals 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 các 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.

Tự động hoá quy trình kiểm tra bằng AutoWebPerf Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.