Automatyzacja audytów za pomocą AutoWebPerf

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

AutoWebPerf (AWP) to narzędzie modułowe, które umożliwia automatyczne zbieranie danych o skuteczności z różnych źródeł. Obecnie dostępnych jest wiele narzędzi do pomiaru wydajności witryny w różnych zakresach (w laboratorium i w polu), takich jak Raport na temat użytkowania Chrome, PageSpeed Insights czy WebPageTest. AWP umożliwia integrację z różnymi narzędziami do przeprowadzania audytu. Wystarczy prosta konfiguracja, aby można było stale monitorować skuteczność witryny w jednym miejscu.

Opublikowanie wskazówek dotyczących podstawowych wskaźników internetowych 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. Utworzyli AWP, aby zautomatyzować powtarzające się i czasochłonne czynności wykonywane ręcznie w ramach codziennych działań. Obecnie AWP osiągnęło dojrzałość i jest gotowe do udostępnienia szerokiej publiczności, aby każdy mógł skorzystać z automatyzacji, którą zapewnia.

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

Do czego służy AWP?

Chociaż do monitorowania skuteczności stron internetowych dostępnych jest kilka narzędzi i interfejsów API, 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 mechanizm i wstępnie skonfigurowane integracje interfejsów API, które można skonfigurować programowo w celu zautomatyzowania powtarzających się zapytań do różnych interfejsów API do monitorowania wydajności.

Na przykład za pomocą AWP możesz ustawić test dzienny na stronie głównej, aby rejestrować dane z pola z interfejsu CrUX API oraz dane z laboratorium z raportu Lighthouse z PageSpeed Insights. Te dane mogą być zapisywane i przechowywane na przestrzeni czasu, np. w Arkuszach Google, a potem wizualizowane w panelu Studia danych. AWP automatyzuje część procesu wymagającą największego wysiłku, dzięki czemu jest świetnym rozwiązaniem do śledzenia trendów w laboratorium i w warunkach rzeczywistych na przestrzeni czasu. Więcej informacji znajdziesz w artykule Wizualizacja wyników audytu w Studiu danych (w języku angielskim).

Przegląd architektury

AWP to biblioteka oparta na modułach, która zawiera 3 rodzaje modułów:

  • silnik
  • złącza.
  • gatherer

Silnik pobiera listę testów z połączenia (np. z lokalnego pliku CSV), przeprowadza audyty wydajności za pomocą wybranych zbieraczy (np. PageSpeed Insights), a potem zapisuje wyniki w połączeniu wyjściowym (np. w Arkuszach Google).

Schemat architektury AWP

AWP zawiera kilka wstępnie zaimplementowanych zbieraczy i sprzęgających:

Automatyzacja kontroli za pomocą AWP

AWP automatyzuje audyty wydajności za pomocą preferowanych platform do przeprowadzania audytów, takich jak PageSpeed Insights, WebPageTest lub interfejs Crux API. AWP umożliwia wybranie miejsca wczytania listy testów i zapisania wyników.

Za pomocą tego polecenia możesz na przykład uruchomić audyt dla listy testów przechowywanej w Arkuszach Google i zapisać wyniki w pliku CSV:

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

Audyty cykliczne

Możesz przeprowadzać okresowe kontrole codziennie, co tydzień lub co miesiąc. Na przykład możesz codziennie przeprowadzać kontrole dla listy testów zdefiniowanych w lokalnym pliku JSON, np. w ten sposób:

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

Poniższe polecenie odczytuje listę testów audytu z lokalnego pliku JSON, uruchomi audyt na komputerze lokalnym, a potem wyśle wyniki do lokalnego pliku CSV:

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

Aby przeprowadzać kontrole codziennie jako usługę działającą w tle, użyj tego polecenia:

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

Możesz też skonfigurować crontab w środowisku typu 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 kontroli i zbieranie wyników znajdziesz w repozytorium AWP na GitHubie.

Wizualizacja wyników audytu w Studiu danych

Oprócz ciągłego pomiaru podstawowych wskaźników internetowych ważne jest, aby móc oceniać trendy i wykrywać potencjalne regresje za pomocą danych o rzeczywistych 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 agregacja danych z 28 dni, dlatego zalecamy, aby oprócz niego używać też własnych danych RUM, aby szybciej wykrywać regresje.

Studio danych to bezpłatne narzędzie do wizualizacji, w które możesz łatwo wczytywać dane o wydajności i rysować trendy w postaci wykresów. Na przykład wykresy seryjne poniżej przedstawiają podstawowe wskaźniki internetowe na podstawie danych z raportu na temat UX Chrome. Jeden z wykresów pokazuje, że w ostatnich tygodniach następował wzrost skumulowanego przesunięcia układu, co oznacza pogorszenie stabilności układu niektórych stron. W takim przypadku powinieneś skoncentrować się na analizie problemów, które są przyczyną tych błędów.

Zrzut ekranu z wynikami podstawowych wskaźników internetowych w Studiu danych

Aby uprościć proces od zbierania danych do wizualizacji, 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 danych dziennych w arkuszu kalkulacyjnym możesz utworzyć w Data Studio panel, który wczytuje dane bezpośrednio z arkusza kalkulacyjnego i rysuje trendy na wykresie ciągu czasowego. Szczegółowe instrukcje konfigurowania interfejsu Google Spreadsheets API Connector, który umożliwia wizualizację danych w Data Studio, znajdziesz w artykule Źródło danych „Google Sheets” w Data Studio.

Co dalej?

AWP to prosty i zintegrowany sposób na zminimalizowanie wysiłku związanego z konfiguracją ciągłego procesu monitorowania, który służy do pomiaru podstawowych wskaźników internetowych i innych wskaźników wydajności. Obecnie AWP obsługuje najczęstsze przypadki użycia i w przyszłości będziemy dodawać kolejne funkcje, aby uwzględniać kolejne przypadki użycia.

Więcej informacji znajdziesz w repozytorium AutoWebPerf.