Pierwsze kroki z mierzeniem wskaźników internetowych

Katie Hempenius
Katie Hempenius

Gromadzenie danych na temat wskaźników internetowych witryny to pierwszy krok do ich poprawy. Dokładna analiza pozwoli uzyskać dane o wydajności zarówno ze środowiska rzeczywistego, jak i laboratoriów. Pomiar wskaźników internetowych wymaga minimalnych zmian w kodzie i można to zrobić za pomocą bezpłatnych narzędzi.

Pomiar wskaźników internetowych na podstawie danych RUM

Dane Real User Monitoring (RUM), nazywane też danymi terenowymi, rejestrują działanie wykonywane przez rzeczywistych użytkowników witryny. Google wykorzystuje dane RUM do określenia, czy witryna osiąga zalecane wartości progowe podstawowych wskaźników internetowych.

Wprowadzenie

Jeśli nie masz skonfigurowanej RUM, za pomocą poniższych narzędzi szybko uzyskasz dane o rzeczywistej wydajności Twojej witryny. Narzędzia te opierają się na tym samym bazowym zbiorze danych (Raporcie na temat użytkowania Chrome), ale mają nieco inne przypadki użycia:

  • PageSpeed Insights (PSI): narzędzie PageSpeed Insights podaje łączną skuteczność na poziomie strony i źródła w ciągu ostatnich 28 dni. Znajdziesz w nim też sugestie, jak poprawić skuteczność. Jeśli szukasz konkretnego działania, które pozwoli Ci rozpocząć pomiary i ulepszanie wskaźników internetowych witryny, zalecamy jej skontrolowanie za pomocą PSI. PSI jest dostępny w internecie oraz jako API.
  • Search Console: Search Console wyświetla dane o skuteczności z podziałem na strony. Dzięki temu znakomicie nadaje się do wykrywania konkretnych stron wymagających ulepszenia. W przeciwieństwie do PageSpeed Insights raporty w Search Console zawierają historyczne dane o skuteczności. Search Console działa tylko w witrynach, które należą do Ciebie i których własność została przez Ciebie potwierdzona.
  • Panel CrUX: panel CrUX to gotowy panel, który wyświetla dane tego raportu z wybranego przez Ciebie źródła. Działa na bazie Studia danych, a konfiguracja trwa około minuty. W porównaniu z PageSpeed Insights i Search Console raportowanie w panelu CrUX obejmuje więcej wymiarów – na przykład dane można podzielić według urządzenia i typu połączenia.

Wymienione wyżej narzędzia dobrze nadają się do pomiaru wskaźników internetowych, ale mogą się też przydać w innych kontekstach. Zarówno raporty CrUX, jak i PSI są dostępne jako interfejs API i można ich używać do tworzenia paneli oraz innych raportów.

Gromadzenie danych RUM

Choć narzędzia oparte na CrUX są dobrym punktem wyjścia do badania wydajności wskaźników internetowych, zdecydowanie zalecamy uzupełnienie ich danymi o własnym RUM. Gromadzone samodzielnie dane RUM umożliwiają uzyskanie bardziej szczegółowych i natychmiastowych informacji o wydajności Twojej witryny. Ułatwia to wykrywanie problemów i testowanie możliwych rozwiązań.

Możesz zbierać własne dane RUM, korzystając z usług dedykowanego dostawcy RUM lub konfigurując własne narzędzia.

Specjalni dostawcy RUM specjalizują się w zbieraniu i raportowaniu danych RUM. Aby używać w tych usługach podstawowych wskaźników internetowych, poproś dostawcę RUM o włączenie monitorowania podstawowych wskaźników internetowych w witrynie.

Jeśli nie masz dostawcy RUM, możesz rozszerzyć obecną konfigurację analityki, aby zbierać i raportować te dane za pomocą biblioteki JavaScript web-vitals. Ta metoda została szczegółowo wyjaśniona poniżej.

Biblioteka JavaScript Web-vitals

Jeśli wdrażasz własną konfigurację RUM pod kątem wskaźników internetowych, najprostszym sposobem gromadzenia ich danych jest użycie biblioteki JavaScript web-vitals. web-vitals to mała, modułowa biblioteka (ok. 1 KB), która zapewnia wygodny interfejs API do zbierania i raportowania wszystkich wymiernych w polu danych wskaźników internetowych.

Dane składające się na wskaźniki internetowe nie są bezpośrednio udostępniane przez wbudowane interfejsy API przeglądarki, lecz tworzone na ich podstawie. Na przykład skumulowane przesunięcie układu (CLS) można wdrożyć za pomocą interfejsu Layout Instability API. Korzystając z web-vitals, nie musisz martwić się o samodzielne wdrażanie tych danych. Ponadto masz pewność, że zbierane dane są zgodne z metodologią i sprawdzonymi metodami dotyczącymi każdego rodzaju danych.

Więcej informacji o wdrażaniu wskaźnika web-vitals znajdziesz w dokumentacji i przewodniku ze sprawdzonymi metodami pomiaru wskaźników internetowych w terenie.

Agregacja danych

Raportowanie pomiarów zebranych przez usługę web-vitals jest bardzo ważne. Jeśli dane są mierzone, ale nie raportowane, nigdy ich nie zobaczysz. Dokumentacja web-vitals zawiera przykłady wysyłania danych do ogólnego punktu końcowego interfejsu API, Google Analytics lub Menedżera tagów Google.

Jeśli masz już ulubione narzędzie do raportowania, warto je rozważyć. W przeciwnym razie usługa Google Analytics jest bezpłatna i można jej w tym celu używać.

Wybierając narzędzie, warto zastanowić się, kto będzie miał dostęp do danych. Zwykle największe sukcesy osiągają, gdy cała firma, a nie tylko jeden dział, jest zainteresowana poprawą wyników. Aby dowiedzieć się, jak uzyskać poparcie różnych działów, przeczytaj artykuł Rozwiązywanie problemów z szybkością witryny w różnych funkcjach.

Interpretacja danych

Analizując dane o skuteczności, zwróć uwagę na strony rozkładu. Dane RUM często wskazują, że wydajność jest bardzo zróżnicowana – niektórzy użytkownicy działają szybko, a inni powolne. Użycie mediany do podsumowania danych może jednak łatwo zamaskować to zachowanie.

W odniesieniu do wskaźników internetowych Google określa, czy witryna lub strona osiąga zalecane progi, na podstawie odsetka „dobrych” wrażeń, a nie statystyk takich jak mediany lub średnie. Aby witryna lub strona została uznana za spełniającą podstawowe wskaźniki internetowe, 75% wizyt na stronie powinno osiągnąć próg „dobrej” w przypadku każdego rodzaju danych.

Pomiar wskaźników internetowych na podstawie danych laboratoryjnych

Dane modułu, nazywane też danymi syntetycznymi, są zbierane ze środowiska kontrolowanego, a nie rzeczywistych użytkowników. W przeciwieństwie do danych RUM dane laboratoryjne mogą być zbierane ze środowisk przedprodukcyjnych i dlatego włączane do przepływów pracy programistów i procesów ciągłej integracji. Przykłady narzędzi zbierających dane syntetyczne to Lighthouse i WebPageTest.

co należy wziąć pod uwagę

Dane RUM i dane laboratoryjne zawsze będą się pojawiać, zwłaszcza jeśli warunki sieciowe, typ urządzenia lub lokalizacja środowiska laboratoryjnego znacznie odbiegają od warunków dotyczących użytkowników. Jeśli jednak chodzi o zbieranie danych laboratoryjnych na podstawie wskaźników internetowych, należy pamiętać o kilku konkretnych kwestiach:

  • Skumulowane przesunięcie układu (CLS): skumulowane przesunięcie układu mierzone w warunkach laboratoryjnych może być sztucznie niższe niż CLS zaobserwowany w danych RUM. CLS to suma wszystkich wyników poszczególnych przesunięcia układu dla wszystkich nieoczekiwanych przesunięć układu, które nastąpiły w całym okresie działania strony. Jednak czas życia strony zwykle bardzo się różni w zależności od tego, czy wczytuje się ona przez prawdziwego użytkownika, czy przez narzędzie do pomiaru skuteczności syntetycznego. Wiele modułów modułów tylko wczytuje stronę – nie wchodzi z nią w interakcję. Dlatego przechwytują one tylko przesunięcia układu, które mają miejsce podczas początkowego wczytywania strony. Z kolei wartość CLS zmierzona przez narzędzia RUM uwzględnia nieoczekiwane przesunięcia układu, które mają miejsce w całym okresie działania strony.
  • Opóźnienie przy pierwszym działaniu (FID): nie można zmierzyć opóźnienia po pierwszym działaniu w środowiskach laboratoryjnych, ponieważ wymaga to interakcji użytkownika ze stroną. W związku z tym zalecanym rozwiązaniem dla FID jest całkowity czas blokowania (TBT). TBT mierzy „łączny czas upływający między pierwszym wyrenderowaniem treści a czasem do pełnej interaktywności, w którym strona nie może reagować na dane wejściowe użytkownika”. Mimo że wartości FID i TBT są obliczane inaczej, są to odzwierciedlenie zablokowanego wątku głównego podczas procesu wczytywania. Gdy wątek główny jest zablokowany, przeglądarka z opóźnieniem odpowiada na interakcje użytkownika. FID to opóźnienie (jeśli występuje), które następuje przy pierwszej próbie interakcji użytkownika ze stroną.

Narzędzia

Możesz używać tych narzędzi do zbierania laboratoryjnych wskaźników internetowych:

  • Rozszerzenie do Chrome Web Vitals: rozszerzenie do Chrome Wskaźniki internetowe służy do pomiaru i raportowania podstawowych wskaźników internetowych (LCP, FID i CLS) danej strony. To narzędzie ma zapewniać programistom opinie o wynikach w czasie rzeczywistym podczas wprowadzania zmian w kodzie.
  • Lighthouse: udostępnia raporty o LCP, CLS i TB, a także podaje możliwe ulepszenia w zakresie wydajności. Narzędzie Lighthouse jest dostępne w Narzędziach deweloperskich w Chrome jako rozszerzenie do Chrome lub pakiet npm. Lighthouse można też włączyć do przepływów pracy w trybie ciągłej integracji za pomocą Lighthouse CI.
  • WebPageTest: narzędzie WebPageTest uwzględnia wskaźniki internetowe w ramach standardowych raportów. WebPageTest przydaje się do zbierania informacji o wskaźnikach internetowych w konkretnych warunkach urządzenia i sieci.