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

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, 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 jest bardzo dojrzały i jest gotowy do szerokiego udostępniania, dzięki czemu każdy może czerpać korzyści z zastosowanej w nim automatyzacji.

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.

Ułatwi Ci to AWP dzięki udostępnianiu silnika i gotowych integracji interfejsów API, które można programowo skonfigurować w celu automatyzacji powtarzających się zapytań, korzystając z różnych interfejsów API 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).

Przegląd architektury

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

  • silnik
  • złącza.
  • 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ą preferowanych platform do przeprowadzania audytów, takich jak PageSpeed Insights, WebPageTest lub interfejs Crux API. AWP daje możliwość elastycznego wyboru, gdzie ma zostać wczytana lista testów i w jakim miejscu mają być zapisywane wyniki.

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 audyty z częstotliwością dzienną, tygodniową lub miesięczną. Na przykład możesz codziennie przeprowadzać kontrole dotyczące 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 codziennie przeprowadzać audyty w ramach usługi w tle, możesz zamiast tego użyć 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 automatyzacji codziennych kontroli i zbierania wyników znajdziesz w repozytorium AWS na GitHubie.

Wizualizacja wyników kontroli 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 użytkownikach (RUM) lub danych z raportu na temat UX 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 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 priorytetem powinno być przeanalizowanie problemu, który leży po stronie Twoich stron.

Zrzut ekranu przedstawiający wyniki w Studiu danych dotyczące podstawowych wskaźników internetowych.

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 minimalizacji nakładu pracy związanego z konfiguracją ciągłego monitorowania, aby mierzyć podstawowe wskaźniki internetowe i inne dane dotyczące 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.