Pierwszym krokiem do poprawy podstawowych wskaźników internetowych jest zebranie danych o nich. Dobrze zaokrąglona analiza zbiera dane o skuteczności zarówno ze środowiska rzeczywistego, jak i laboratorium. Pomiar wskaźników Web Vitals wymaga minimalnych zmian w kodzie i może być przeprowadzany za pomocą bezpłatnych narzędzi.
Pomiar podstawowych wskaźników internetowych za pomocą danych RUM
Dane monitorowania rzeczywistych użytkowników (RUM), zwane też danymi z pól, rejestrują wydajność, z jaką mają do czynienia rzeczywiści użytkownicy witryny. Dane RUM służą Google do określania, czy witryna spełnia zalecane wartości progowe podstawowych wskaźników internetowych.
Pierwsze kroki
Jeśli nie masz skonfigurowanego RUM, te narzędzia szybko dostarczą Ci dane o rzeczywistej wydajności witryny. Wszystkie te narzędzia korzystają z tego samego zbioru danych (Raport na temat użytkowania Chrome), ale mają nieco inne zastosowania:
- Narzędzia deweloperskie w Chrome są zintegrowane z danymi z zbioru danych CrUX w panelu Wydajność. Porównując lokalną wersję strony z wersją dla prawdziwych użytkowników, możesz podjąć bardziej świadomą decyzję o tym, na czym skupić się podczas debugowania. Jeśli szukasz pojedynczego działania, które pomoże Ci mierzyć i poprawiać wskaźniki internetowe Twojej witryny, zalecamy skorzystanie z panelu Wydajność Narzędzi deweloperskich w Chrome.
- Narzędzia PageSpeed Insights (PSI) zawierają informacje o łącznej skuteczności na poziomie strony i źródła w ciągu ostatnich 28 dni. Dodatkowo zawiera sugestie dotyczące poprawy wydajności. Usługa PSI jest dostępna w przeglądarce oraz jako interfejs API.
- Search Console podaje dane o wydajności poszczególnych stron. Dzięki temu doskonale nadaje się do identyfikowania konkretnych stron, które wymagają ulepszenia. W odróżnieniu od narzędzia PageSpeed Insights raportowanie w Search Console obejmuje dane o skuteczności w poprzednich okresach. Search Console można używać tylko w przypadku witryn, które są Twoją własnością i których własność została zweryfikowana.
- Panel raportu Chrome to gotowy panel, który wyświetla dane raportu na temat użytkowania Chrome z wybranego przez Ciebie źródła. Jest ono oparte na Studiu danych, a proces konfiguracji trwa około minuty. W porównaniu z usługami PageSpeed Insights i Search Console panel raportowania w raporcie na temat użytkowania Chrome zawiera więcej wymiarów. Dane można na przykład podzielić według typu urządzenia i połączenia.
Warto zauważyć, że chociaż wymienione wcześniej narzędzia są odpowiednie do „rozpoczynania” pomiarów wskaźników internetowych, mogą być też przydatne w innych kontekstach. Zarówno CrUX, jak i PSI są dostępne jako interfejsy API i można ich używać do tworzenia paneli i innych raportów.
Zbieranie danych RUM
Chociaż narzędzia oparte na danych z Chrome UX Report są dobrym punktem wyjścia do badania skuteczności wskaźników internetowych, zdecydowanie zalecamy uzupełnienie ich własnymi danymi RUM. Dane RUM, które zbierasz samodzielnie, mogą dostarczyć bardziej szczegółowych i natychmiastowych informacji o skuteczności witryny. Ułatwia to rozpoznawanie 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.
Specjalizują się oni w zbieraniu i raportowaniu danych RUM. Aby korzystać z podstawowych wskaźników internetowych w tych usługach, poproś dostawcę usługi RUM o włączenie monitorowania podstawowych wskaźników internetowych na swojej stronie.
Jeśli nie masz dostawcy RUM, możesz rozszerzyć istniejącą konfigurację analityki, aby zbierać i raportować te dane za pomocą biblioteki JavaScript web-vitals. Więcej informacji o tej metodzie znajdziesz poniżej.
Biblioteka JavaScript web-vitals
Jeśli wdrażasz własne ustawienie RUM dla Podstawowych wskaźników internetowych, najprostszym sposobem zbierania pomiarów Podstawowych wskaźników internetowych jest użycie biblioteki JavaScript web-vitals. web-vitals to mała, modułowa biblioteka (ok. 2 KB), która zapewnia wygodny interfejs API do zbierania i raportowania wszystkich mierzalnych dla pól danych dotyczących wskaźników internetowych.
Nie wszystkie dane, które składają się na wskaźniki internetowe, są bezpośrednio dostępne za pomocą wbudowanych interfejsów API przeglądarki do pomiaru wydajności, ale są one tworzone na ich podstawie. Na przykład skumulowane przesunięcie układu (CLS) jest implementowane za pomocą interfejsu Layout Instability API. Dzięki web-vitals nie musisz się martwić o własną implementację tych danych. Zapewnia ona też, że gromadzone przez Ciebie dane będą zgodne z metodologią i sprawdzonymi metodami dotyczącymi poszczególnych danych.
Więcej informacji o implementowaniu web-vitals znajdziesz w dokumentacji i w przewodniku ze sprawdzonymi metodami pomiaru wskaźników internetowych w praktyce.
Agregacja danych
Konieczne jest raportowanie pomiarów zebranych przez web-vitals. Jeśli te dane są zmierzone, ale nie są raportowane, nigdy ich nie zobaczysz. Dokumentacja web-vitals zawiera przykłady wysyłania danych do ogólnego punktu końcowego API, Google Analytics lub Menedżera tagów Google.
Jeśli masz już ulubione narzędzie do raportowania, użyj go. Jeśli nie, możesz używać bezpłatnego Google Analytics.
Wybierając narzędzie, zastanów się, kto będzie mieć dostęp do danych. Firmy zwykle osiągają największe sukcesy, gdy w zwiększenie skuteczności jest zainteresowana cała firma, a nie tylko jeden dział. Aby dowiedzieć się, jak uzyskać poparcie różnych działów, zapoznaj się z artykułem Poprawianie szybkości witryny w ujęciu przekrojowym.
Interpretacja danych
Przy analizowaniu danych o skuteczności należy zwracać uwagę na strony dystrybucji. Dane RUM często wskazują, że wydajność jest bardzo zróżnicowana – niektórzy użytkownicy mają szybkie wrażenia, inni wolne. Jednak użycie mediany do podsumowania danych może zamaskować to zachowanie.
W przypadku wskaźników Web Vitals Google określa, czy witryna lub strona spełnia zalecane progi, na podstawie odsetka „dobrych” wrażeń, a nie statystyk takich jak mediana czy średnia. Aby witryna lub strona mogła zostać uznana za spełniającą progi podstawowe wskaźniki internetowe, 75% wizytacji stron musi spełniać próg „dobra jakość” dla każdego wskaźnika.
Pomiar podstawowych wskaźników internetowych za pomocą danych z testów laboratoryjnych
Dane laboratoryjne (nazywane też danymi syntetycznymi) są zbierane z kontrolowanego środowiska, a nie z rzeczywistych użytkowników. W przeciwieństwie do danych RUM dane z laboratorium można zbierać w środowiskach przedprodukcyjnych, a dlatego można je włączać do przepływów pracy programistów i procesów ciągłej integracji. Przykładami narzędzi, które zbierają dane syntetyczne, są Lighthouse i WebPageTest.
Uwagi
Zawsze będą występować rozbieżności między danymi RUM a danymi z laboratorium, zwłaszcza jeśli warunki sieciowe, typ urządzenia lub lokalizacja środowiska laboratoryjnego różnią się znacznie od tych u użytkowników. Jeśli jednak chodzi o zbieranie danych laboratoryjnych dotyczących wskaźników internetowych, warto pamiętać o kilku szczególnych kwestiach:
- Największe wyrenderowanie treści (LCP) zmierzone w warunkach laboratoryjnych może się różnić od wartości zmierzonych w warunkach rzeczywistych za pomocą danych RUM z powodu opóźnień w wczytywaniu strony (z powodu przekierowań, opóźnień w łączeniu z serwerem lub niezapisanych w pamięci podręcznej danych), różnych treści wyświetlanych różnym użytkownikom w zależności od ekranu lub z innych powodów (np. banery z informacjami o plikach cookie czy personalizacja).
- Skumulowane przesunięcie układu (CLS) mierzone w środowiskach laboratoryjnych może być sztucznie niższe niż CLS zaobserwowane w danych RUM. Wiele narzędzi laboratoryjnych tylko wczytuje stronę – nie wchodzi z nią w interakcję. W efekcie rejestrują tylko przesunięcia układu, które występują podczas początkowego wczytywania strony. Natomiast CLS zmierzony przez narzędzia RUM rejestruje nieoczekiwane przesunięcia układu, które zachodzą w całym okresie działania strony.
- Czas od interakcji do kolejnego wyrenderowania (INP) nie może być mierzony w środowiskach laboratoryjnych, ponieważ wymaga interakcji użytkownika ze stroną. W związku z tym wskaźnik Total Blocking Time (TBT) jest zalecanym proxy laboratoryjnym dla INP. TBT mierzy „łączny czas między pierwszym wyrenderowaniem treści a czasem do pełnej interaktywności, w którym strona jest zablokowana na tyle długo, że nie może reagować na dane wejściowe użytkownika”. Chociaż INP i TBT są obliczane w różny sposób, oba odzwierciedlają zablokowany wątek główny podczas procesu inicjowania. Gdy wątek główny jest zablokowany, przeglądarka opóźnia reakcję na interakcje użytkownika.
Narzędzia
Za pomocą tych narzędzi można zbierać laboratoryjne wskaźniki internetowe:
- Narzędzia deweloperskie w Chrome mierzy i raportują podstawowe wskaźniki internetowe danej strony w widoku danych o czasie rzeczywistym w panelu Wydajność. Ten widok zapewnia programistom informacje zwrotne o wydajności w czasie rzeczywistym podczas wprowadzania zmian w kodzie.
- Lighthouse dostarcza raporty o wskaźnikach LCP, CLS i TBT, a także wskazuje możliwe ulepszenia wydajności. Lighthouse jest dostępny w Narzędziach deweloperskich w Chrome jako pakiet npm. Można go też włączyć do przepływów pracy ciągłej integracji za pomocą Lighthouse CI.
- WebPageTest obejmuje podstawowe wskaźniki internetowe w ramach standardowego raportowania. WebPageTest jest przydatny do zbierania informacji o wskaźnikach Web Vitals w określonych warunkach dotyczących urządzenia i sieci.