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ł.

Co to jest AutoWebPerf (AWP)?

AutoWebPerf (AWP) to narzędzie modułowe, które umożliwia automatyczne zbieranie danych o wydajności z wielu źródeł. Obecnie dostępnych jest wiele narzędzi do pomiaru wydajności witryny w różnych zakresach (laboratorium i pole), np. Raport na temat użytkowania Chrome, PageSpeed Insights czy WebPageTest. AWP umożliwia integrację z różnymi narzędziami do przeprowadzania audytu, a jego konfiguracja jest bardzo prosta, dzięki czemu możesz 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 grupie użytkowników, 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 można zapisywać i przechowywać na przestrzeni czasu, np. w Arkuszach Google, a potem wizualizować je 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).

Omówienie architektury

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

  • silnik
  • moduły oprogramowania sprzęgającego
  • gatherer

Wyszukiwarka pobiera listę testów z oprogramowania sprzęgającego (na przykład z lokalnego pliku CSV), przeprowadza audyty wydajności w wybranych modułach zbierających (np. PageSpeed Insights) i zapisuje wyniki w łączniku danych wyjściowych (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ą wybranych przez Ciebie platform kontrolnych, takich jak PageSpeed Insights, WebPageTest czy CrUX API. AWP umożliwia wybranie miejsca wczytania listy testów i zapisania wyników.

Możesz na przykład przeprowadzić kontrolę listy testów przechowywanych w Arkuszu Google, a następnie zapisać wyniki w pliku CSV przy użyciu tego polecenia:

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

Powtarzające się kontrole

Możesz przeprowadzać cykliczne kontrole codziennie, co tydzień lub co miesiąc. Możesz na przykład codziennie sprawdzać listę testów zdefiniowanych w lokalnym pliku JSON, jak poniżej:

{
  "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 kontroli w Studiu danych

Oprócz ciągłego pomiaru podstawowych wskaźników internetowych ważna jest możliwość oceny trendów i wykrycia potencjalnych regresji na podstawie rzeczywistych danych o użytkownikach (RUM) lub danych z raportu na temat użytkowania Chrome (CrUX) zebranych przez AWP. Pamiętaj, że raport na temat użytkowania Chrome (CrUX) to agregacja danych z 28 dni, dlatego zalecamy, aby oprócz CrUX używać też własnych danych RUM, dzięki którym szybciej zauważysz 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 w ostatnich tygodniach rosnącą wartość skumulowanego przesunięcia układu, co oznacza pogorszenie się 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. Aby dowiedzieć się, jak skonfigurować tworzenie raportów w Google Sheets jako źródła danych do wizualizacji w Data Studio, zapoznaj się z artykułem Google Sheets API Connector.

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ędzie udostępniać kolejne funkcje, które będą odpowiadać na inne przypadki użycia.

Więcej informacji znajdziesz w repozytorium AutoWebPerf.