Pierwszym krokiem do poprawy podstawowych wskaźników internetowych jest zebranie danych o nich. Pełna analiza obejmuje dane o skuteczności z prawdziwego środowiska 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 której korzystają faktyczni użytkownicy witryny. Google używa danych RUM, aby określić, 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 chcesz zacząć mierzyć i ulepszać podstawowe wskaźniki internetowe swojej witryny, zalecamy skorzystanie z panelu „Skuteczność” w Narzędziach 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 zwiększania skuteczności. Interfejs PSI jest dostępny w sieci i w postaci interfejsu 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 przeciwieństwie do narzędzia PageSpeed Insights raportowanie w Search Console obejmuje dane historyczne dotyczące skuteczności. 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 danych CrUX to wstępnie utworzony panel, który wyświetla dane CrUX dla wybranego źródła. Jest ona zbudowana na podstawie Studia danych, a proces konfiguracji zajmuje około minuty. W porównaniu z PageSpeed Insights i Search Console raportowanie w panelu CrUX zawiera więcej wymiarów – np. dane można podzielić według urządzenia i typu połączenia.
Warto pamiętać, ż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 raportu na temat użytkowania Chrome są dobrym punktem wyjścia do badania skuteczności wskaźników internetowych, zdecydowanie zalecamy uzupełnienie ich o własny raport RUM. Dane RUM, które zbierasz samodzielnie, mogą dostarczyć bardziej szczegółowych i natychmiastowych informacji o skuteczności witryny. Ułatwia to identyfikowanie 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ć dotychczasową konfigurację usług analitycznych, aby gromadzić te dane i tworzyć na ich podstawie raporty, korzystając z 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 jest użycie biblioteki JavaScript web-vitals
. web-vitals
to mała, modułowa biblioteka (o rozmiarze około 2 KB), która udostępnia wygodne interfejsy API do zbierania i raportowania wszystkich danych Web Vitals, które można mierzyć na poziomie pola.
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 wdrożenie tych danych. Zapewnia on 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 na potrzeby testów.
Agregacja danych
Konieczne jest raportowanie pomiarów zebranych przez web-vitals
. Jeśli te dane są mierzone, ale nie są raportowane, nigdy ich nie zobaczysz. Dokumentacja web-vitals
zawiera przykłady pokazujące, jak wysyłać dane 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, użyj go. Jeśli nie, możesz używać bezpłatnego Google Analytics.
Wybierając narzędzie, zastanów się, kto powinien 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
Podczas analizowania danych o skuteczności warto zwrócić uwagę na ogon rozkładu. 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. Konkretnie, aby witryna lub strona mogła zostać uznana za spełniającą progi podstawowe wskaźniki internetowe, 75% wizytacji strony musi spełniać próg „dobrej jakości” dla każdego wskaźnika.
Pomiar podstawowych wskaźników internetowych za pomocą danych z testów laboratoryjnych
Dane z testów, zwane też danymi syntetycznymi, są zbierane w kontrolowanym środowisku, a nie od rzeczywistych użytkowników. W przeciwieństwie do danych RUM dane z laboratorium można zbierać w środowiskach przedprodukcyjnych, dzięki czemu 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 chodzi jednak o zbieranie danych z testów dotyczących wskaźników Web Vitals, należy wziąć pod uwagę kilka kwestii:
- Największe wyrenderowanie treści (LCP) mierzone w warunkach laboratoryjnych może się różnić od wyników uzyskanych 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 informacją o plikach cookie czy personalizacja).
- Skumulowane przesunięcie układu (CLS) mierzone w środowiskach laboratoryjnych może być sztucznie niższe niż CLS obserwowany 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 mierzony przez narzędzia RUM rejestruje nieoczekiwane przesunięcia układu, które występują 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ą. Dlatego Total Blocking Time (TBT) jest zalecanym wskaźnikiem 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
Do zbierania pomiarów Web Vitals w laboratorium możesz używać tych narzędzi:
- Narzędzia deweloperskie w Chrome mierzą i raportują podstawowe wskaźniki internetowe danej strony w panelu Wydajność. Ten widok zapewnia programistom informacje zwrotne o wydajności w czasie rzeczywistym podczas wprowadzania zmian w kodzie.
- Lighthouse raportuje wartości 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.