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.
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 trang web cho nhiều phạm vi (phòng thí nghiệm và thực địa), 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 tích hợp với nhiều công cụ kiểm tra bằng cách thiết lập đơn giản để bạn có thể liên tục theo dõi hiệu suất trang web ở cùng một nơi.
Việc phát hành hướng dẫn về Chỉ số quan trọng của trang web có nghĩa là việc theo dõi chặt chẽ và chủ động các trang web ngày càng trở nên quan trọng. Các kỹ sư đứng sau công cụ này đã thực hiện 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. Hiện tại, AWP đã đạt đến một mức độ hoàn thiện và sẵn sàng được chia sẻ rộng rãi để bất kỳ ai cũng có thể hưởng lợi từ tính năng tự động hoá mà công cụ này 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 là gì?
Mặc dù có một số công cụ và API để theo dõi hiệu suất của 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 đầy đủ một trang web và duy trì hiệu suất tốt cho các trang chính, bạn nên liên tục đo lường Các chỉ số quan trọng về trang web theo thời gian và quan sát xu hướng.
AWP giúp bạn thực hiện việc này dễ dàng hơn bằng cách cung cấp một công cụ và các công cụ tích hợp API tạo sẵn. Bạn có thể định cấu hình theo phương thức 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 quy trình kiểm thử 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ử 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, chẳng hạn như 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, biến nó 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à hiện trường theo thời gian. Hãy xem phần Kết quả kiểm tra bằng hình ảnh 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 khác nhau:
- công cụ
- mô-đun đầu nối
- Mô-đun gatherer
Công cụ này lấy danh sách các bài kiểm thử qua một 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 đượ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).
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:
- Bộ kết nối được triển khai trước:
- Google Trang tính
- JSON
- CSV
Tự động 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, chẳng hạ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í dụ: bạn có thể chạy quy trình 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 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 quy trình kiểm tra định kỳ theo 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 quy trình 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ư dưới đây:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Lệnh bên dưới đọc danh sách các bài kiểm thử kiểm tra từ tệp JSON cục bộ, chạy 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
Để chạy quy trình kiểm tra hằng ngày dưới dạng dịch vụ nền liên tục, bạn có thể sử dụng lệnh dưới đây:
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ô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ấy nhiều cách khác để tự động hoá quy trình kiểm tra và thu thập kết quả hằng ngày trong kho lưu trữ GitHub của AWP.
Hình ảnh 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ố Core Web Vitals, điều quan trọng là bạn phải có thể đánh giá các xu hướng và phát hiện các hồi quy 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à dữ liệu tổng hợp di chuyển trong 28 ngày. Do đó, bạn nên sử dụng dữ liệu RUM của riêng mình cùng với CrUX để có thể phát hiện sớm hơn các trường hợp 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ố về hiệu suất vào và vẽ các 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 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 của 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à độ ổn định của bố cục bị giảm đố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 các vấn đề cơ bản của những trang này.
Để đơ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 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 trực tiếp từ bảng tính và lập biểu đồ xu hướng thành 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 với 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 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.