Automatyzacja audytów za pomocą AutoWebPerf

Nowe narzędzie modułowe, które umożliwia automatyczne zbieranie danych o skuteczności z wielu źródeł.

Gilberto Cocchi
Gilberto Cocchi
Jonathan Chen
Jonathan Chen

Co to jest AutoWebPerf (AWP)?

AutoWebPerf (AWP) to modułowe narzędzie, które umożliwia automatyczne zbieranie danych o skuteczności z wielu źródeł. Obecnie dostępnych jest wiele narzędzi do pomiaru wydajności witryny w różnych zakresach (laboratoryjnym i terenowym), takich jak Raport na temat użytkowania Chrome, PageSpeed Insights czy WebPageTest. AWP oferuje integrację z różnymi narzędziami do audytu, a prosta konfiguracja umożliwia ciągłe monitorowanie wydajności witryny w jednym miejscu.

Wprowadzenie wskazówek dotyczących Web Vitals oznacza, że dokładne i aktywne monitorowanie stron internetowych staje się coraz ważniejsze. Inżynierowie, którzy stworzyli to narzędzie, od lat przeprowadzają audyty wydajności. AWP powstało, aby zautomatyzować ręczną, powtarzalną i czasochłonną część ich codziennych czynności. Obecnie AWP osiągnął poziom dojrzałości, który pozwala na jego szerokie udostępnienie, aby każdy mógł korzystać z automatyzacji, jaką zapewnia.

Narzędzie jest dostępne w publicznym repozytorium AutoWebPerf na GitHubie.

Do czego służy AWP?

Do monitorowania wydajności stron internetowych dostępnych jest kilka narzędzi i interfejsów API, ale większość z nich udostępnia dane zmierzone w określonym czasie. Aby odpowiednio monitorować witrynę i utrzymywać dobrą wydajność kluczowych stron, zalecamy ciągłe pomiary podstawowych wskaźników internetowych na przestrzeni czasu i obserwowanie trendów.

AWP ułatwia to zadanie, udostępniając silnik i gotowe integracje interfejsu API, które można skonfigurować programowo, aby zautomatyzować powtarzające się zapytania do różnych interfejsów API monitorowania wydajności.

Za pomocą AWP możesz na przykład skonfigurować codzienne testowanie strony głównej, aby rejestrować dane z pól z interfejsu CrUX API i dane z laboratorium z raportu Lighthouse z PageSpeed Insights. Dane te można zapisywać i przechowywać z upływem czasu, np. w Arkuszach Google, a następnie wizualizować w panelu Studia danych. AWP automatyzuje najbardziej pracochłonną część całego procesu, dzięki czemu jest doskonałym rozwiązaniem do śledzenia trendów laboratoryjnych i terenowych w czasie. Więcej informacji znajdziesz w sekcji Wizualizowanie wyników audytu w Studio danych poniżej.

Omówienie architektury

AWP to biblioteka modułowa z 3 różnymi typami modułów:

  • silnik,
  • moduły złącza
  • moduły gatherer,

Silnik pobiera listę testów z oprogramowania sprzęgającego (np. z lokalnego pliku CSV), przeprowadza audyty wydajności za pomocą wybranych narzędzi do zbierania danych (np. PageSpeed Insights) i zapisuje wyniki w oprogramowaniu sprzęgającym wyjściowym (np. Arkuszach Google).

Schemat architektury AWP.

AWP zawiera wiele wstępnie zaimplementowanych zbieraczy i łączników:

Automatyzacja audytów za pomocą AWP

AWP automatyzuje audyty wydajności za pomocą wybranych platform audytowych, takich jak PageSpeed Insights, WebPageTest lub CrUX API. AWP umożliwia wybór miejsca wczytywania listy testów i miejsca zapisywania wyników.

Możesz na przykład przeprowadzić audyty listy testów przechowywanej w Arkuszach Google i zapisać wyniki w pliku CSV za pomocą tego polecenia:

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

Cykliczne audyty

Możesz przeprowadzać cykliczne audyty codziennie, co tydzień lub co miesiąc. Możesz na przykład przeprowadzać codzienne audyty listy testów zdefiniowanych w lokalnym pliku JSON, takim jak ten poniżej:

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

Poniższe polecenie odczytuje listę testów kontrolnych z lokalnego pliku JSON, przeprowadza kontrole na komputerze lokalnym, a następnie zapisuje wyniki w lokalnym pliku CSV:

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

Aby uruchamiać audyty codziennie jako usługę w tle, możesz użyć tego polecenia:

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

Możesz też skonfigurować crontab w środowisku podobnym do systemu Unix, aby uruchamiać AWP jako codzienne zadanie cron:

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

Więcej sposobów na automatyzację codziennych audytów i zbierania wyników znajdziesz w repozytorium GitHub AWP.

Wizualizacja wyników audytu w Studiu danych

Oprócz ciągłego pomiaru Core Web Vitals ważne jest, aby móc oceniać trendy i wykrywać potencjalne regresje za pomocą danych o użytkownikach (RUM) lub danych z raportu na temat użytkowania Chrome (CrUX) zbieranych przez AWP. Pamiętaj, że Raport na temat użytkowania Chrome (CrUX) to 28-dniowa ruchoma agregacja, dlatego zalecamy korzystanie z własnych danych RUM wraz z CrUX, aby szybciej wykrywać regresje.

Studio danych to bezpłatne narzędzie do wizualizacji, do którego możesz łatwo wczytywać dane o skuteczności i przedstawiać trendy w postaci wykresów. Na przykład wykresy szeregów czasowych poniżej pokazują Core Web Vitals na podstawie danych z Raportu na temat użytkowania Chrome. Jeden z wykresów pokazuje wzrost skumulowanego przesunięcia układu w ostatnich tygodniach, co oznacza regresję stabilności układu na niektórych stronach. W takiej sytuacji warto skupić się na analizie podstawowych problemów tych stron.

Zrzut ekranu z wynikami Core Web Vitals w Studiu danych.

Aby uprościć cały proces od zbierania danych po wizualizację, możesz uruchomić AWP z listą adresów URL, aby automatycznie eksportować wyniki do Arkuszy Google za pomocą tego polecenia:

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

Po zebraniu w arkuszu kalkulacyjnym codziennych danych możesz utworzyć panel Studio danych, który wczytuje dane bezpośrednio z arkusza i wyświetla trendy na wykresie ciągu czasowego. Szczegółowe instrukcje konfigurowania AWP z arkuszami kalkulacyjnymi jako źródłem danych do wizualizacji w Studio danych znajdziesz w artykule Łącznik interfejsu Google Spreadsheets API.

Co dalej?

AWP to prosty i zintegrowany sposób na zminimalizowanie wysiłku związanego z konfigurowaniem potoku ciągłego monitorowania, który umożliwia pomiar Core Web Vitals i innych wskaźników wydajności. Obecnie AWP obejmuje najczęstsze przypadki użycia, a w przyszłości będziemy dodawać kolejne funkcje, aby uwzględniać inne przypadki użycia.

Więcej informacji znajdziesz w repozytorium AutoWebPerf.