Korzystaj z narzędzi Google, aby skutecznie kontrolować, ulepszać i monitorować swoją witrynę.
Podstawowe wskaźniki internetowe to zestaw danych oceniających wrażenia użytkownika na podstawie takich kryteriów jak szybkość wczytywania, czas reakcji na dane wejściowe użytkownika i stabilność układu.
W tym przewodniku omówimy proces ulepszania podstawowych wskaźników internetowych w witrynie, ale jego początek zależy od tego, czy zbierasz własne dane z terenu. Ich miejsce zakończenia może zależeć od tego, które z narzędzi Google pomoże Ci w diagnozowaniu i rozwiązywaniu problemów z wrażeniami użytkownika.
Podstawowe wskaźniki internetowe najlepiej mierzyć w terenie
Podstawowe wskaźniki internetowe umożliwiają pomiar tego, jak użytkownicy korzystają z Twojej witryny. Są to dane koncentrujące się na użytkownikach. Narzędzia oparte na laboratoriach, takie jak Lighthouse, to narzędzia diagnostyczne, które pozwalają zwrócić uwagę na potencjalne problemy z wydajnością i poznać sprawdzone metody. Narzędzia oparte na laboratoriach działają pod pewnymi, wstępnie zdefiniowanymi warunkami i mogą nie odzwierciedlać rzeczywistych pomiarów Podstawowych wskaźników internetowych w przypadku użytkowników.
Na przykład Lighthouse to narzędzie laboratoryjne, które przeprowadza testy z symulowanym ograniczaniem w symulowanym środowisku komputerów lub urządzeń mobilnych. Symulacje wolniejszych połączeń w sieci i urządzeniach są pomocne przy diagnozowaniu problemów z wydajnością, ale to tylko jeden wycinek różnorodnych warunków sieciowych i możliwości urządzeń, więc mogą nie odzwierciedlać tego, czego doświadczają użytkownicy Twoich witryn.
Narzędzia oparte na laboratoriach, takie jak Lighthouse, zwykle również ładują się „na zimno”. jako zupełnie nowego użytkownika. Jest to często najwolniejsze wczytywanie, ale w rzeczywistości niektóre zasoby użytkowników mogą być przechowywane w pamięci podręcznej, jeśli już odwiedzili witrynę lub gdy przeglądają stronę. Nowi użytkownicy i korzystające z niej narzędzia również mogą inaczej obsługiwać witrynę, wyświetlając banery z użyciem plików cookie lub inne treści.
Krótko mówiąc, choć narzędzia oparte na laboratoriach mogą wskazywać potencjalne problemy z wydajnością oraz ułatwiać debugowanie i iterację, mogą nie odzwierciedlać liczby użytkowników, którzy rzeczywiście odwiedzają Twoją witrynę. Używaj danych terenowych do pomiaru rzeczywistej wydajności, a narzędzi laboratoryjnych, takich jak Lighthouse, wykorzystuj je do diagnozowania sposobów jej poprawy. Zobacz też sekcję Kiedy używać Lighthouse.
Google mierzy podstawowe wskaźniki internetowe za pomocą raportu na temat użytkowania Chrome. To publiczny zbiór danych zebrany od prawdziwych użytkowników Chrome. To podstawa wielu narzędzi Google i innych firm, które raportują podstawowe wskaźniki internetowe witryny.
Raport na temat użytkowania Chrome ma jednak swoje ograniczenia. Często informuje, kiedy wystąpił problem, ale często ma za mało danych, by określić, dlaczego.
Jeśli to możliwe, zbieraj dane z własnych pól
Najlepszym zbiorem danych w tym zakresie do zwiększania wydajności witryny jest ten utworzony przez Ciebie. Zaczyna się od zbierania danych o użytkownikach witryny. Sposób, w jaki to zrobisz, zależy od rozmiaru organizacji i tego, czy chcesz płacić za rozwiązanie innej firmy czy za pomocą rozwiązania własnego.
Płatne rozwiązania niemal na pewno mierzą podstawowe wskaźniki internetowe (i inne dane dotyczące wydajności) i zwykle udostępniają różne narzędzia do analizy uzyskanych danych. Ta metoda może być preferowana w dużych organizacjach z dużymi zasobami.
Możesz jednak nie należeć do dużej organizacji albo nawet takiej, która może sobie pozwolić na zakup rozwiązania innej firmy. W takich przypadkach biblioteka web-vitals Google pomoże Ci zebrać wszystkie wskaźniki internetowe. Jednak to Ty ponosisz odpowiedzialność za sposób raportowania, przechowywania i analizowania tych danych.
Jeśli korzystasz już z Google Analytics, ale nie gromadzisz jeszcze własnych danych z poszczególnych pól, możesz skorzystać z biblioteki web-vitals, aby wysyłać do Google Analytics zebrane w polu wskaźniki internetowe i używać eksportów BigQuery z GA4 do generowania raportów o tych danych.
Omówienie narzędzi Google
Niezależnie od tego, czy gromadzisz własne dane z terenu, możesz skorzystać z kilku narzędzi Google, które mogą Ci się przydać do analizowania podstawowych wskaźników internetowych. Przed rozpoczęciem przepływu pracy ogólny przegląd każdego narzędzia pomoże Ci określić, które z nich będą dla Ciebie najlepsze, a które nie.
Raport na temat użytkowania Chrome (CrUX)
Jak już wspomnieliśmy, raport CrUX to publiczny zbiór danych z terenu zebranych od segmentu prawdziwych użytkowników Google Chrome z milionów witryn. Obejmuje podstawowe wskaźniki internetowe i inne dane dotyczące witryn z wystarczającym ruchem.
Raport CrUX jest dostępny jako miesięczny zbiór danych BigQuery na poziomie punktu początkowego lub jako codzienny interfejs API na poziomie adresu URL lub źródła, pod warunkiem że adres URL lub źródło ma wystarczającą liczbę próbek w zbiorze danych CrUX. Dane BigQuery są też widoczne w panelu na temat użytkowania Chrome, co umożliwia witrynom przeglądanie historycznych trendów w ich witrynach.
Kiedy korzystać z raportu na temat użytkowania Chrome
Nawet jeśli zbierasz własne dane terenowe, raport na temat użytkowania Chrome jest przydatny. Chociaż raport CrUX stanowi podzbiór użytkowników Chrome, warto też porównać dane pól w witrynie, aby sprawdzić, jak wypadają na tle danych z tego raportu. Każdy z nich ma swoje wady i zalety, co może powodować różnice. Jeśli nie zbierasz żadnych danych z poszczególnych pól o swojej witrynie, raport na temat użytkowania Chrome jest szczególnie przydatny do ogólnego przeglądu – pod warunkiem, że znajduje się ona w zbiorze danych.
Możesz korzystać z raportu na temat użytkowania Chrome bezpośrednio lub za pomocą innego narzędzia (np. tych wymienionych poniżej). Korzystanie z danych w zbiorze CrUX bezpośrednio (za pomocą BigQuery lub interfejsu API) jest przydatne, gdy chcesz wyświetlić dane, których nie ma w innych narzędziach. Na przykład dane na poziomie kraju często nie są dostępne w innych narzędziach. Możesz też wyświetlać w CrUX dodatkowe dane, których często nie ma w innych narzędziach.
Kiedy nie należy używać raportu CrUX
CrUX reprezentuje tylko użytkowników Chrome, a nawet wtedy tylko podzbiór użytkowników Chrome. Pełne rozwiązanie RUM może obejmować więcej funkcji w Chrome i innych przeglądarkach, w których obsługują wskaźniki Web Vitals.
Witryny, które nie uzyskują wystarczającej ilości ruchu, nie są uwzględniane w zbiorze danych CrUX. W takim przypadku musisz zgromadzić własne dane z różnych pól, aby poznać wydajność witryny w terenie, ponieważ raport na temat użytkowania Chrome nie jest dostępny. Możesz też polegać na danych laboratoryjnych, ale z pewnymi ograniczeniami, które opisaliśmy wcześniej, mogą nie być reprezentatywne.
Dane dostarczane przez raport na temat użytkowania Chrome to średnia krocząca z poprzednich 28 dni, dlatego nie jest to idealne narzędzie do programowania, ponieważ odzwierciedlenie ulepszeń w zbiorze danych raportu na temat użytkowania Chrome zajmuje sporo czasu.
Jako publiczny zbiór danych CrUX ogranicza się do ilości informacji, które może udostępnić, oraz możliwości wysyłania do nich zapytań. Przechwytywanie własnych danych RUM pozwala zebrać więcej szczegółów (np. elementu LCP) i bardziej dzielić dane na segmenty w celu wykrywania problemów. Czy zalogowani użytkownicy mają lepsze czy gorsze wskaźniki internetowe niż u niezalogowanych użytkowników? Czy użytkownicy z wolnym LCP mają konkretny element LCP? Które interakcje powodują wysokie wartości FID i INP?
PageSpeed Insights (PSI)
PSI to narzędzie, które na potrzeby danej strony zgłasza dane pól z raportu CrUX oraz z modułu Lighthouse z Lighthouse. Więcej informacji znajdziesz w poszczególnych sekcjach.
Kiedy używać PSI
Narzędzie PSI świetnie nadaje się do oceny wydajności raportu na temat użytkowania Chrome na poziomie strony lub źródła w przypadku użytkowników korzystających z urządzeń mobilnych i komputerów. To dobry wybór na początkowy przegląd podstawowych wskaźników internetowych w przypadku strony lub witryny. Pozwala też przeglądać dane dotyczące podstawowych wskaźników internetowych w przypadku innych witryn, np. konkurencji.
PSI udostępnia też dane z Lighthouse, które zawierają przydatne zalecenia dotyczące poprawy podstawowych wskaźników internetowych, jeśli się pokrywają. Jeśli te dane się nie zgadzają, rekomendacje z Lighthouse mogą być mniej trafne.
Narzędzie Lighthouse jest uruchamiane z serwera, więc może stworzyć bardziej stabilną wartość bazową niż uruchomienie Lighthouse z Narzędzi deweloperskich.
Kiedy nie należy używać PSI
Wskaźnik PSI jest dostępny tylko w przypadku publicznych adresów URL. Nie można jej używać na stronach deweloperskich, które nie są dostępne publicznie.
Dane raportu na temat użytkowania Chrome są dostępne tylko wtedy, gdy witryny spełniają określone kryteria kwalifikacji, w tym określone progi popularności. Narzędzie PSI jest mniej przydatne, gdy dane raportu na temat użytkowania Chrome są niedostępne w przypadku strony lub źródła, ponieważ mogą w nich wyświetlać tylko dane z modułu Lighthouse.
Podobnie, jeśli masz tylko dane raportu CrUX na poziomie źródła, a nie konkretny testowany adres URL, ogranicza to też użyteczność skorelowania danych z pola na poziomie źródła z diagnostyką laboratoryjną na poziomie strony. Dane pól na poziomie źródła są bardzo przydatne jako podsumowanie wydajności witryny, a audyty Lighthouse mogą pomóc w podsumowaniu działania witryny, ale w takim przypadku należy zachować szczególną ostrożność.
Jeśli w raporcie CrUX dostępne są dane na poziomie strony, ale różnią się od danych z laboratorium Lighthouse, rekomendacje z Lighthouse mogą mieć ograniczoną wartość. Może się to zdarzyć szczególnie w przypadku problemów z CLS po wczytaniu oraz w przypadku podstawowych wskaźników internetowych (FID i INP), które zapewniają interaktywność, gdy audyty laboratoryjne są mniej przydatne.
Search Console
Search Console mierzy ruch z wyszukiwarki i wydajność witryny, z uwzględnieniem podstawowych wskaźników internetowych. Jest dostępny tylko dla właścicieli witryn, którzy potwierdzili swoje prawo własności do nich.
Cenną funkcją Search Console jest to, że grupuje podobne strony (np. strony korzystające z tego samego szablonu) w jedną ocenę grupową. Search Console zawiera też raport dotyczący podstawowych wskaźników internetowych utworzony na podstawie danych z raportu CrUX.
Kiedy korzystać z Search Console
Search Console świetnie nadaje się zarówno dla programistów, jak i osób niebędących deweloperami. Pozwalają one ocenić skuteczność zarówno w wyszukiwarce, jak i na stronach w inny sposób niż inne narzędzia Google. Prezentacja danych raportu na temat użytkowania Chrome i grupowanie stron według podobieństwa zapewnia nowatorski wgląd w to, jak poprawa wydajności wpływa na całe kategorie stron.
Kiedy nie należy korzystać z Search Console
Search Console może nie sprawdzić się w przypadku projektów wykorzystujących różne narzędzia innych firm, które grupują strony według podobieństwa, lub jeśli witryna nie jest uwzględniona w zbiorze danych raportu CrUX.
Grupowanie stron może być nieco mylące, gdy strony przykładowe w grupie mają inne cechy niż reszta grupy – np. wtedy, gdy dana grupa nie spełnia podstawowych wskaźników internetowych, a wszystkie strony przykładowe mają te same podstawowe wskaźniki internetowe. Może się tak zdarzyć, jeśli grupa zawiera długi ogon lub rzadko odwiedzane strony, które ładują się wolniej, ponieważ rzadziej są zapisywane w pamięci podręcznej. Jeśli liczba tych stron w długim ogonie jest wystarczająca, mogą one wpłynąć na ogólny współczynnik zdania grupy.
Latarnia morska
Lighthouse to narzędzie laboratoryjne, które tworzy konkretne możliwości poprawy wydajności strony. Ścieżki użytkowników w Lighthouse pozwalają też programistom na tworzenie skryptów interakcji, które pozwolą przetestować wydajność po zakończeniu wczytywania strony.
Lighthouse-CI to powiązane narzędzie, które uruchamia Lighthouse podczas kompilacji i wdrażania projektów, aby wspomóc testowanie regresji wydajności. Udostępnia raport z Lighthouse wraz z żądaniami pull i śledzi dane o skuteczności na przestrzeni czasu.
Kiedy używać Lighthouse
Narzędzie Lighthouse świetnie nadaje się do znajdowania możliwości poprawy wydajności podczas programowania zarówno w środowiskach lokalnych, jak i przejściowych. Narzędzie Lighthouse CI jest również przydatne na etapach kompilacji i wdrażania w środowiskach przejściowych i produkcyjnych, w których konieczne jest testowanie regresji wydajności, aby zadbać o dobre wrażenia użytkowników.
Kiedy nie należy używać Lighthouse
Narzędzie Lighthouse (lub Lighthouse CI) nie zastępuje danych terenowych. Lighthouse to przede wszystkim narzędzie diagnostyczne, które wyświetla listę potencjalnych problemów i sprawdzonych metod na podstawie wstępnie zdefiniowanego wczytywania strony. Wyświetlane w niej rekomendacje mogą nie zawsze odpowiadać skuteczności odnotowywanej przez użytkowników.
Możesz także użyć narzędzia Lighthouse do diagnozowania witryn produkcyjnych za pomocą narzędzi takich jak PageSpeed Insights, ale najlepiej będzie w środowiskach programistycznych i ciągłej integracji, aby rozwiązywać problemy z wydajnością przed wdrożeniem wersji produkcyjnej.
Rozszerzenie Web Vitals
Rozszerzenie do Chrome Web Vitals to narzędzie diagnostyczne, które wyświetla dane dotyczące podstawowych wskaźników internetowych podczas przeglądania internetu. Obejmuje on też dane raportu na temat użytkowania Chrome dotyczące bieżącej strony, jeśli znajdują się one w zbiorze danych raportu CrUX, oraz udostępnia informacje debugowania, które pomagają wykrywać problemy z wydajnością podstawowych wskaźników internetowych.
Kiedy warto używać rozszerzenia Web Vitals
Z rozszerzenia Web Vitals może skorzystać każdy użytkownik o dowolnej roli, aby ocenić podstawowe wskaźniki internetowe strony na każdym etapie jej cyklu życia. Przydaje się jako „na żywo” przegląd wydajności podczas korzystania ze strony w celu wykrywania problemów z wydajnością, zwłaszcza po wczytaniu się, które możesz napotkać w przypadku danych CLS i INP.
Kiedy nie należy używać rozszerzenia Web Vitals
Rozszerzenie Web Vitals nie stanowi całościowej oceny wydajności strony. Dodatkowo raportowane wskaźniki w dużym stopniu zależą od środowiska, w którym działa, a deweloperzy często mają maszyny o większej mocy lub dostęp do szybszych sieci.
Panel Wydajność w Narzędziach deweloperskich w Chrome
Narzędzia deweloperskie w Chrome to zbiór narzędzi dla programistów w przeglądarce, w tym panel Wydajność. Panel wydajności to narzędzie laboratoryjne, które profiluje całą aktywność na stronie podczas wczytywania strony lub w zarejestrowanym okresie. Zapewnia wgląd we wszystkie obserwacje w różnych wymiarach, takich jak sieć, renderowanie, malowanie i tworzenie skryptów, a także podstawowe wskaźniki internetowe strony.
Kiedy używać panelu Skuteczność
Deweloperzy powinni używać panelu Skuteczność w fazie programowania, aby mieć wgląd w wydajność strony. Jest to szczególnie przydatne przy debugowaniu problemów z responsywnością, które wpływają na FID lub INP. Gdy wykryjesz i powtórzysz interakcję, która działa wolno, panel Wydajność może dostarczyć wielu danych o tym, co dzieje się w przeglądarce, aby pomóc Ci zrozumieć problem, od blokowania głównego wątku po stosy wywołań JavaScriptu i renderowanie.
Kiedy nie należy używać panelu Skuteczność
Panel wydajności to narzędzie dla programistów, które zawiera tylko dane laboratoryjne. Ta funkcja nie zastępuje danych z pola. Ten dokument zawiera wiele informacji na temat debugowania, ale z tego powodu może być trudny do zrozumienia dla początkujących programistów i osób niebędących programistami.
Trzyetapowy przepływ pracy pozwalający zapewnić prawidłowe działanie podstawowych wskaźników internetowych witryny
Pracując nad poprawą wrażeń użytkownika, traktuj ten proces jak ciągły cykl. Aby poprawić podstawowe wskaźniki internetowe i inne wskaźniki wydajności, możesz zastosować jedną z tych metod:
- Ocenić kondycję witryny i zidentyfikować jej problemy.
- Debuguj i optymalizuj.
- Monitoruj za pomocą narzędzi do ciągłej integracji, aby wychwytywać i zapobiegać regresjom.
Krok 1. Oceń kondycję witryny i zidentyfikuj możliwości jej poprawy
W celu oceny stanu witryny najlepiej zacząć od danych z terenu.
- Używaj narzędzia PageSpeed Insights, aby wyświetlać ogólne dane dotyczące działania podstawowych wskaźników internetowych dotyczące źródła i konkretne informacje o poszczególnych adresach URL.
- Search Console pozwala zidentyfikować strony wymagające ulepszenia, jeśli funkcja grupowania stron działa dobrze w Twojej witrynie.
- Jeśli masz dane RUM, często jest to najlepszy sposób na identyfikowanie konkretnych stron lub segmentów ruchu, w przypadku których występują problemy.
Niezależnie od tego, czy analizujesz dane terenowe, które zbierasz samodzielnie, czy dane raportu na temat użytkowania Chrome, ten pierwszy krok jest kluczowy. Jeśli nie zbierasz danych z terenu, mogą Ci wystarczyć dane raportu CrUX – ponownie, o ile Twoja witryna znajduje się w zbiorze danych.
Analiza wydajności witryny z użyciem PageSpeed Insights
PageSpeed Insights wyświetla dane raportu CrUX z ostatnich 28 dni dotyczące wrażeń użytkowników w 75 centylu. Oznacza to, że jeśli 75% wrażeń użytkowników osiągnie próg określony dla danego rodzaju danych, wrażenia użytkownika uznaje się za „dobrą”.
Jeśli chcesz sprawdzić skuteczność konkretnej strony, użyj jej. Aby uzyskać ogólny widok witryny na początku optymalizacji, najlepiej zacząć od strony głównej, ponieważ zwykle jest to jedna z najpopularniejszych stron w wielu witrynach.
Na początku skup się na tym, jakie są wrażenia Twoich użytkowników. Zobaczysz maksymalnie 4 widoki danych: na urządzenia mobilne i na komputery dla wpisanego adresu URL oraz dla całego źródła. Porównaj te elementy i zobacz, czym się różnią. Urządzenia mobilne są zwykle mniej wydajne niż komputery, ponieważ mają ograniczone zasoby i działają w potencjalnie mniej stabilnej sieci. Jeśli adresy URL i dane pochodzenia znacznie się różnią, spróbuj zrozumieć, dlaczego: strony główne są często otwierane jako pierwsze (tzn. strona docelowa), więc może być wolniejsza niż użytkownicy z początku mają pełną moc w przypadku nieoczyszczonej pamięci podręcznej przeglądarki. Kolejne strony będą prawdopodobnie ładować się szybciej, ponieważ wszystkie udostępnione zasoby będą zapisywane w pamięci podręcznej, co zmniejszy zbiorcze dane na poziomie źródła.
PSI pokazuje też wszystkie 3 podstawowe wskaźniki internetowe (LCP, CLS i FID) oraz oczekujące dane INP, a także dane diagnostyczne dotyczące TTFB i FCP. Czy któryś z podstawowych wskaźników internetowych zawodzi i w jakim stopniu? W ten sposób wskażesz, na czym należy się skupić.
Poznaj zależności między tymi liczbami, zwłaszcza LCP. Jeśli LCP jest za długi, tak jak w tym przykładzie, spójrz na TTFB i FCP, które są kamieniami milowymi w tym wskaźniku. W tym przykładzie mamy 1,8-sekundową funkcję TTFB, co bardzo utrudni osiągnięcie zalecanego progu 2,5 sekundy pozwalającego uzyskać dobry LCP. To oznacza powolny backend (problemy z serwerem lub brak CDN), wolniejsze sieci lub przekierowania opóźniające pierwsze bajty HTML. Więcej informacji znajdziesz w przewodniku po Optimize TTFB. FCP trwa o drugą sekundę, co także może wskazywać na wolniejsze sieci. W tym przykładzie LCP nie występuje po FCP, co sugeruje, że zasób LCP jest dobrze zoptymalizowany po wczytaniu strony.
W przypadku CLS sprawdź wyniki CrUX CLS i Lighthouse, aby sprawdzić, czy jest to problem z wczytywaniem CLS (który można wykryć i przekazać w Lighthouse), czy może nie jest to spowodowane problemem CLS po wczytaniu. Więcej informacji znajdziesz w przewodniku po Optimize CLS.
Aby sprawdzić responsywność, weź pod uwagę wyniki FID i INP. Przejrzyj audyty TBT w Lighthouse, aby sprawdzić, czy podczas wstępnego wczytywania strony odbywa się dużo przetwarzania JavaScriptu, co może mieć wpływ na wartość INP. Ulepszenie wartości INP może być trudne, więc więcej informacji znajdziesz w przewodniku po optymalizacji INP.
Zidentyfikuj strony o niskiej skuteczności w Search Console
Wskaźnik PSI jest przydatny, gdy chcesz przetestować konkretny adres URL lub całą witrynę, a Search Console ułatwia kierowanie działań na konkretne typy stron. Jest to szczególnie przydatne, gdy wiele stron ma wspólną tematykę lub technologie, a Search Console jest w stanie je łatwo rozpoznać.
Raport dotyczący podstawowych wskaźników internetowych w Search Console zawiera pełny obraz wydajności Twojej witryny, ale nadal możesz przeanalizować konkretne strony, które wymagają uwagi. Search Console umożliwia również:
- Zidentyfikuj poszczególne grupy stron, które wymagają ulepszenia, oraz takie, które są wygodne w obsłudze.
- Uzyskuj szczegółowe dane o skuteczności według adresów URL pogrupowane według stanu, danych i grup podobnych stron internetowych (np. stron ze szczegółami produktów w witrynie e-commerce).
- Otrzymuj szczegółowe raporty, które grupują adresy URL w poszczególnych kategoriach jakości wygody użytkowników – zarówno na urządzeniach mobilnych, jak i na komputerach.
Po określeniu konkretnych stron możesz skorzystać z PSI w sposób opisany powyżej, aby lepiej zrozumieć problemy, które występują na tych stronach.
Krok 2. Debuguj i zoptymalizuj
W kroku 1 wskaż strony wymagające poprawy wydajności oraz wskaż podstawowe wskaźniki internetowe, które chcesz poprawić. Aby uzyskać więcej informacji, które pomogą Ci zidentyfikować główną przyczynę problemu, możesz skorzystać z narzędzi Google.
- Przeprowadź audyt Lighthouse, aby uzyskać wskazówki na poziomie strony
- Aby móc analizować podstawowe wskaźniki internetowe w czasie rzeczywistym, użyj rozszerzenia Web Vitals.
- Aby debugować problemy z wydajnością i testować zmiany w kodzie, użyj panelu Wydajność w Narzędziach deweloperskich w Chrome.
Bardziej szczegółowe wskazówki znajdziesz w tych przewodnikach:
Odkrywaj możliwości dzięki Lighthouse
PageSpeed Insights uruchamia za Ciebie Lighthouse, ale na potrzeby programowania lokalnego możesz też uruchomić Lighthouse z Chrome DevTools, co przydaje się do lokalnego sprawdzania poprawek.
Najważniejsze jest sprawdzenie, czy audyt Lighthouse odzwierciedla problemy, które próbujesz rozwiązać (np. problemy z powolnym LCP lub CLS). Lighthouse od razu ocenia wrażenia użytkownika tylko podczas wczytywania strony. Jest to narzędzie laboratoryjne, dlatego wyklucza FID i INP na rzecz TBT.
Gdy dane z Lighthouse sugerują podobny problem do tego, który próbujesz rozwiązać, bogata ilość informacji zawartych w audytach może pomóc w wykryciu problemów i zaproponowaniu rozwiązań.
Możesz filtrować audyty pod kątem podstawowych wskaźników internetowych, które Cię interesują, aby skupić się na poprawkach błędów związanych z konkretnymi danymi:
W przypadku FID i INP wykorzystuj audyty TBT, aby wykrywać problemy, które mogą wpłynąć na te wskaźniki. Pamiętaj jednak, że bez interakcji narzędzie Lighthouse jest w stanie zdiagnozować jedynie w ograniczonym zakresie.
Analizuj dane w czasie rzeczywistym dzięki rozszerzeniu Web Vitals
Rozszerzenie do Chrome Web Vitals pokazuje podstawowe wskaźniki internetowe w czasie rzeczywistym podczas wczytywania strony oraz podczas jej przeglądania. Z tego względu może rejestrować FID i INP, a także przesunięcia układu, które występują po wczytaniu. Opcje debugowania pokazują bardziej szczegółowe informacje o poszczególnych wskaźnikach:
Rozszerzenie Web Vitals to raczej narzędzie do sprawdzania problemów z wydajnością, a nie kompleksowe narzędzie do debugowania – zasługujesz na panel Wydajność w Narzędziach deweloperskich w Chrome.
Przejście do bardziej szczegółowego widoku w panelu Skuteczność
Panel wydajności w Narzędziach deweloperskich w Chrome profiluje wszystkie zachowania stron w zarejestrowanym okresie.
Harmonogramy kluczy (np. LCP) są wyświetlane na ścieżce czasu. Kliknij je, aby uzyskać więcej informacji.
Ścieżka Przesunięcia układu wyróżnia przesunięcia układu. Klikając je, możesz uzyskać więcej informacji o elementach, które przesunęły się w celu debugowania CLS.
Długie zadania (które mogą powodować problemy z FID i INP) są też wyróżnione czerwonymi trójkątami.
Te funkcje – wraz z informacjami zawartymi w innych częściach panelu Wydajność – pomagają określić, czy poprawki wpływają na podstawowe wskaźniki internetowe strony.
Debugowanie podstawowych wskaźników internetowych w terenie
Narzędzia laboratoryjne nie zawsze są w stanie zidentyfikować przyczynę wszystkich problemów związanych z podstawowymi wskaźnikami internetowymi, które występują u użytkowników. To jeden z powodów, dla których gromadzenie własnych danych terenowych jest tak ważne, ponieważ uwzględnia takie czynniki, których dane laboratoryjne są niedostępne.
Więcej informacji znajdziesz w sekcji Debugowanie wydajności w tym polu.
Krok 3. Monitoruj pod kątem zmian
Po rozwiązaniu wszystkich problemów warto mieć pewność, że przynoszą one wymagany efekt, a nowe problemy nie zakłócają działania podstawowych wskaźników internetowych. Wymaga to monitorowania problemów z wydajnością w ramach przepływu pracy programisty, aby zapobiegać pojawianiu się problemów z wydajnością w środowisku produkcyjnym, a także regularnie sprawdzać dane z terenu, aby na pewno tak się stało.
Monitorowanie wymagań dotyczących wydajności w środowiskach ciągłej integracji (CI)
Lighthouse-CI umożliwia automatyczne przeprowadzanie audytów Lighthouse dotyczących zatwierdzeń kodu, aby zapobiegać regresjom wydajności. Pozwala to sprawdzić czasy działania (które podlegają zmienności) lub tylko w ramach kontroli wydajności, jako narzędzie do lintowania, aby zapobiegać nieprawidłowym praktykom w kodzie.
Wyświetlanie trendów w zakresie kondycji witryny na podstawie danych z terenu
Staraj się wykrywać i rozwiązywać wszystkie problemy z wydajnością, zanim pojawią się one w środowisku produkcyjnym, ale monitorowanie danych z terenu za pomocą RUM jest kluczowe, jeśli chcesz znaleźć te, które mogą umknąć Twojej uwadze. Dostępnych jest wiele komercyjnych produktów RUM, które mogą w tym pomóc. Biblioteka JavaScript web-vitals może zautomatyzować zbieranie danych o polach w witrynie i opcjonalnie używać tych danych do tworzenia niestandardowych paneli i systemów alertów.
W przypadku witryn bez rozwiązania RUM możesz użyć panelu raportu na temat użytkowania Chrome jako podstawowej analizy trendów danych z terenu. W przypadku witryn w CrUX raportuje te informacje:
- Przegląd witryny, który dzieli podstawowe wskaźniki internetowe na typy komputerów i urządzeń mobilnych.
- Trend historyczny według typu wskaźnika, który przedstawia rozkład danych w czasie dla każdego dostępnego miesięcznego raportu na temat użytkowania raportu na temat użytkowania Chrome.
- Dane demograficzne użytkowników, które pokazują rozkład wyświetleń strony w całym źródle z poszczególnych grup demograficznych, w tym na urządzeniach i typach efektywnych połączeń.
Panel raportu CrUX korzysta z zbioru danych CrUX BigQuery, który jest aktualizowany raz w miesiącu. Pamiętaj o regularnym sprawdzaniu podstawowych wskaźników internetowych.
Podsumowanie
Aby zapewnić użytkownikom szybką i wygodną obsługę, trzeba stawiać na wydajność i odpowiednio wdrożyć przepływ pracy. Korzystaj z odpowiednich narzędzi i procesów do kontroli, debugowania i monitorowania działań użytkowników, dbania o wygodę użytkowników i przestrzegania progów określonych jako prawidłowe podstawowe wskaźniki internetowe.