Połącz narzędzia Google, aby skutecznie sprawdzać, ulepszać i monitorować swoją witrynę.
Opublikowano: 28 maja 2020 r.
Podstawowe wskaźniki internetowe to zestaw danych, które oceniają wrażenia użytkowników na podstawie kryteriów takich jak wydajność wczytywania, responsywność na działania użytkowników i stabilność układu.
W tym przewodniku omówimy proces ulepszania podstawowych wskaźników internetowych w Twojej witrynie, ale jego początek zależy od tego, czy zbierasz własne dane. To, gdzie kończy się diagnozowanie, zależy od tego, które narzędzia Google okazują się przydatne do diagnozowania i rozwiązywania problemów z wygodą użytkowników.
Podstawowe wskaźniki internetowe najlepiej mierzyć w warunkach rzeczywistych
Podstawowe wskaźniki internetowe zostały opracowane specjalnie do pomiaru wrażeń użytkowników związanych z Twoją witryną. Są to dane dotyczące użytkowników. Narzędzia laboratoryjne, takie jak Lighthouse, to narzędzia diagnostyczne, które wskazują potencjalne problemy z wydajnością i sprawdzone metody. Narzędzia laboratoryjne są uruchamiane w określonych, wstępnie zdefiniowanych warunkach i mogą nie odzwierciedlać rzeczywistych pomiarów podstawowych wskaźników internetowych, które mają użytkownicy.
Na przykład Lighthouse to narzędzie do testów laboratoryjnych, które przeprowadza testy z symulowanym ograniczeniem przepustowości w symulowanym środowisku komputera stacjonarnego lub urządzenia mobilnego. Symulacje wolniejszej sieci i warunków działania urządzenia są przydatne podczas diagnozowania problemów z wydajnością, ale stanowią tylko jeden wycinek z wielkiej różnorodności warunków sieci i możliwości urządzeń, więc mogą nie odzwierciedlać tego, z czym mają do czynienia użytkownicy Twoich witryn.
Narzędzia laboratoryjne, takie jak Lighthouse, zwykle wczytują stronę internetową jako zupełnie nowy użytkownik. Jest to często najwolniejsze wczytywanie, ale w praktyce użytkownicy mogą mieć w pamięci podręcznej niektóre zasoby, jeśli wcześniej odwiedzili witrynę lub przeglądają ją. Nowi użytkownicy i nowe narzędzia mogą też widzieć stronę inaczej, ponieważ wyświetlają się u nich banery dotyczące plików cookie lub inne treści.
Krótko mówiąc, narzędzia laboratoryjne mogą wskazywać potencjalne problemy z wydajnością i pomagać w debugowaniu oraz iteracji, ale nie odzwierciedlają one liczby użytkowników, którzy faktycznie odwiedzają Twoją witrynę. Korzystaj z danych zgromadzonych do pomiaru skuteczności w rzeczywistych warunkach i z narzędzi laboratoryjnych, takich jak Lighthouse, do diagnozowania problemów i ich rozwiązywania. Zobacz też sekcję Kiedy używać Lighthouse.
Google mierzy podstawowe wskaźniki internetowe za pomocą raportu na temat użytkowania Chrome (CrUX). Jest to publiczny zbiór danych zebranych od prawdziwych użytkowników Chrome. Jest on podstawą wielu narzędzi Google i narzędzi innych firm, które raportują podstawowe wskaźniki internetowe witryny.
Ma on jednak pewne ograniczenia. Często można z niego dowiedzieć się, kiedy wystąpił problem, ale często nie ma w nim wystarczających danych, aby podać przyczynę.
zbierać własne dane z terenu,
Najlepszym zbiorem danych do poprawy skuteczności witryny w danym obszarze jest zbiór danych utworz. Zaczyna się od zbierania danych polowych od użytkowników witryny. Sposób wykonania tej czynności zależy od wielkości organizacji i od tego, czy chcesz zapłacić za rozwiązanie zewnętrzne, czy utworzyć własne.
Płatne rozwiązania z całą pewnością zmierzą podstawowe wskaźniki internetowe (oraz inne wskaźniki wydajności) i zwykle udostępnią różne narzędzia do analizowania uzyskanych danych. W dużych organizacjach z dużymi zasobami może to być preferowana metoda.
Możesz jednak nie należeć do dużej organizacji ani nie mieć środków na zakup rozwiązania innej firmy. W takich przypadkach biblioteka web-vitals Google pomoże Ci zebrać wszystkie dane Web Vitals. Odpowiadasz jednak za sposób raportowania, przechowywania i analizowania tych danych.
Jeśli korzystasz już z Google Analytics, ale nie zbierasz jeszcze własnych danych terenowych, możesz użyć biblioteki web-vitals, aby przesyłać do Google Analytics dane wskaźników internetowych zebrane w terenie, a do raportowania używać eksportów GA4 do BigQuery.
Informacje o narzędziach Google
Niezależnie od tego, czy zbierasz własne dane z pola, masz do dyspozycji kilka narzędzi Google, które mogą Ci się przydać podczas analizowania podstawowych wskaźników internetowych. Zanim określisz proces roboczy, ogólny opis każdego narzędzia może Ci pomóc w zorientowaniu się, które z nich mogą być dla Ciebie odpowiednie.
Raport na temat użytkowania Chrome (CrUX)
Jak już wspomnieliśmy, CrUX to publiczny zbiór danych z pól zebranych na podstawie segmentu prawdziwych użytkowników Google Chrome w milionach witryn. Obejmuje ona podstawowe wskaźniki internetowe i inne dane dotyczące witryn z wystarczającą liczbą użytkowników.
Dane CrUX są dostępne jako miesięczny zbiór danych BigQuery na poziomie pochodzenia lub jako codziennie aktualizowane dane API na poziomie adresu URL lub pochodzenia, o ile adres URL lub pochodzenie ma wystarczającą liczbę próbek w zbiorze danych CrUX. Dane CrUX są dostępne w różnych narzędziach CrUX, zarówno do programowego dostępu, jak i do wizualnych narzędzi do użytku użytkowników.
Kiedy używać CrUX
Nawet jeśli zbierasz własne dane z pola, raport CrUX może być przydatny. Chociaż raport CrUX obejmuje podzbiór użytkowników Chrome, warto porównać dane z pól Twojej witryny, aby sprawdzić, jak się one pokrywają z danymi CrUX. Każde z nich ma swoje zalety i wady, które mogą się różnić. Jeśli nie zbierasz żadnych danych polowych dotyczących swojej witryny, raport na temat użytkowania Chrome może być szczególnie przydatny do uzyskania ogólnego przeglądu, pod warunkiem że Twoja witryna jest reprezentowana w tym zbiorze danych.
Możesz użyć bezpośrednio CrUX lub innego narzędzia (w tym wymienionych poniżej). Korzystanie bezpośrednio z zbioru danych Crux (za pomocą BigQuery lub interfejsu API) jest przydatne, ponieważ pozwala wyświetlać dane, których nie ma w innych narzędziach. Na przykład dane na poziomie kraju są często niedostę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ć CrUX
CrUX obejmuje tylko użytkowników Chrome, a nawet w tym przypadku tylko ich podzbiór. Pełne rozwiązanie RUM może obejmować więcej funkcji w Chrome i innych przeglądarkach, które obsługują podstawowe wskaźniki internetowe.
Witryny, które nie mają wystarczającej ilości ruchu, nie są uwzględniane w zbiorze danych CrUX. W takim przypadku musisz zebrać własne dane, aby poznać wydajność witryny w warunkach rzeczywistych, ponieważ nie możesz użyć CrUX. Możesz też polegać na danych z laboratorium, ale z ograniczeniem, że mogą one nie być wystarczająco reprezentatywne, jak opisano wcześniej.
Dane dostarczane przez CrUX to średnia z poprzednich 28 dni, więc nie jest to idealne narzędzie do tworzenia aplikacji, ponieważ wprowadzenie ulepszeń do zbioru danych CrUX zajmuje sporo czasu.
W przypadku publicznych zbiorów danych CrUX ogranicza ilość informacji, które może udostępnić, oraz sposób wysyłania zapytań do tych danych. Dzięki rejestrowaniu własnych danych RUM możesz uzyskać więcej szczegółów (np. element LCP) i dodatkowo podzielić dane na segmenty, aby wykryć problemy. Czy użytkownicy zalogowani mają lepsze czy gorsze podstawowe wskaźniki internetowe niż niezalogowani? Czy użytkownicy z wolnym czasem LCP mają określony element LCP? Które interakcje powodują wysokie wartości FID i INP?
PageSpeed Insights (PSI)
PSI to narzędzie, które generuje raporty z danymi z pól raportu CrUX i z laboratorium Lighthouse dotyczącego danej strony. Więcej informacji znajdziesz w tych sekcjach.
Kiedy używać PSI
PSI doskonale nadaje się do oceny skuteczności CrUX na poziomie strony lub pochodzenia zarówno w przypadku użytkowników urządzeń mobilnych, jak i komputerów. Jest to dobre rozwiązanie, jeśli chcesz uzyskać ogólny wgląd w podstawowe wskaźniki internetowe na stronie lub w witrynie. Możesz też wyświetlać dane podstawowych wskaźników internetowych dotyczące innych witryn, np. witryn konkurencji.
PSI udostępnia też dane Lighthouse, które zawierają przydatne zalecenia dotyczące poprawy podstawowych wskaźników internetowych (jeśli dane są zgodne). Jeśli te wartości się nie zgadzają, rekomendacje Lighthouse mogą być mniej trafne.
Ponieważ Lighthouse działa na serwerze, może tworzyć bardziej spójne dane wyjściowe niż w przypadku uruchamiania Lighthouse z DevTools.
Kiedy nie należy korzystać z PSI
PSI jest dostępny tylko w przypadku publicznych adresów URL. Nie można go używać w przypadku witryn deweloperskich, które nie są dostępne publicznie.
Dane CrUX są dostępne tylko wtedy, gdy witryny spełniają określone kryteria kwalifikacji, w tym progi popularności. PSI jest mniej przydatne, gdy dane CrUX nie są dostępne dla strony lub źródła, ponieważ w takich przypadkach może wyświetlać tylko dane laboratoryjne Lighthouse.
Podobnie, jeśli masz tylko dane z poziomu źródła w raporcie CrUX, a nie dane dotyczące konkretnego testowanego adresu URL, nie możesz też stosować korelacji danych z pól na poziomie źródła z diagnostyką laboratoryjną na poziomie strony. Dane pól na poziomie pochodzenia są nadal bardzo przydatne, ponieważ stanowią podsumowanie wydajności witryny. Mogą Ci pomóc audytorzy Lighthouse, ale w tym przypadku należy zachować szczególną ostrożność.
Jeśli dane na poziomie strony są dostępne w raporcie CrUX, ale różnią się od danych z laboratorium Lighthouse, rekomendacje Lighthouse mogą mieć ograniczoną wartość. Może się to zdarzyć zwłaszcza w przypadku problemów z wartością CLS po załadowaniu oraz podstawowych wskaźników internetowych dotyczących interakcji (FID i INP), w których przypadku audyty przeprowadzane w laboratorium są mniej przydatne.
Search Console
Search Console mierzy ruch z sieci wyszukiwania i skuteczność witryny, w tym podstawowe wskaźniki internetowe. Jest ona dostępna tylko dla właścicieli witryn, którzy potwierdzili swoje prawo własności do witryny.
Cenna funkcja Search Console polega na tym, że podobne strony (np. strony korzystające z tego samego szablonu) są grupowane w jedną grupę. Search Console zawiera też raport Podstawowe wskaźniki internetowe oparty na danych z pól w raporcie CrUX.
Kiedy używać Search Console
Search Console jest przydatne zarówno dla programistów, jak i osób niebędących programistami, ponieważ pozwala oceniać skuteczność wyszukiwania i strony w sposób niedostępny w innych narzędziach Google. Prezentacja danych CrUX i grupowanie stron według podobieństwa zapewnia nowe informacje o tym, jak poprawa skuteczności wpływa na całe kategorie stron.
Kiedy nie należy używać Search Console
Search Console może nie być odpowiednim narzędziem w przypadku projektów, które korzystają z różnych narzędzi innych firm, które grupowałyby strony według podobieństwa, lub gdy witryna nie jest reprezentowana w zbiorze danych CrUX.
Grupowanie stron może być też nieco mylące, gdy przykładowe strony w grupie mają inne właściwości niż pozostałe strony w grupie. Na przykład gdy grupa nie spełnia wymagań określonych podstawowych wskaźników internetowych, ale przykładowe strony spełniają te wymagania. Może się tak zdarzyć, gdy grupa zawiera rzadko odwiedzane strony, które mogą się ładować wolniej, ponieważ rzadziej są przechowywane w pamięci podręcznej. Gdy w grupie jest wystarczająca liczba takich stron, mogą one wpływać na ogólny współczynnik skuteczności.
Latarnia morska
Lighthouse to narzędzie laboratoryjne, które umożliwia konkretne działania mające na celu poprawę szybkości działania strony. Ścieżki użytkownika Lighthouse umożliwiają też deweloperom tworzenie skryptów ścieżek interakcji na potrzeby testowania wydajności poza wczytywaniem strony.
Lighthouse-CI to powiązane narzędzie, które uruchamia Lighthouse podczas kompilacji i wdrażania projektu, aby pomóc w testowaniu regresji wydajności. Zawiera raport Lighthouse wraz z żądaniami pull i śledzi dane o skuteczności w czasie.
Kiedy używać Lighthouse
Lighthouse doskonale nadaje się do znajdowania możliwości poprawy wydajności podczas tworzenia zarówno w środowiskach lokalnych, jak i w środowiskach testowych. CI Lighthouse jest równie przydatne na etapie kompilacji i wdrażania w środowiskach testowych i produkcyjnych, gdzie do zachowania dobrej jakości wrażeń użytkowników potrzebne są testy regresji wydajności.
Kiedy nie należy używać Lighthouse
Lighthouse (lub Lighthouse CI) nie zastępuje danych w polu. Lighthouse to przede wszystkim narzędzie diagnostyczne, które na podstawie wstępnie zdefiniowanego wczytania strony podaje potencjalne problemy i sprawdzone metody. Rekomendacje mogą nie zawsze odpowiadać skuteczności uzyskanej przez użytkowników.
Narzędzie Lighthouse można używać do diagnozowania witryn produkcyjnych za pomocą narzędzi takich jak PageSpeed Insights, ale najlepiej używać go w środowiskach programowania i ciągłej integracji, aby rozwiązywać problemy z wydajnością, zanim trafią one do środowiska produkcyjnego.
Audyt przeprowadzany przez Lighthouse jest też dostępny w sekcji „statystyki” w panelu Wydajność w Narzędziach deweloperskich w Chrome. Zawiera on bardziej szczegółową analizę wydajności strony.
Panel Wydajność w Narzędziach deweloperskich w Chrome
Narzędzia deweloperskie w Chrome to zestaw narzędzi do programowania w przeglądarce, w tym panel wydajności. Panel Wydajność to narzędzie laboratoryjne, które ma 2 „tryby”:
Gdy panel Wydajność zostanie otwarty po raz pierwszy, na ekranie Dane na żywo zobaczysz bieżące dane dotyczące podstawowych wskaźników internetowych, a także możliwość zaimportowania danych zgromadzonych z raportu na temat użytkowania Chrome. Jest to przydatny „na żywo” widok skuteczności, gdy wchodzisz w interakcję ze stroną, aby odkryć problemy ze skutecznością. Dotyczy to zwłaszcza problemów z zawartością po załadowaniu, które możesz zauważyć w danych CLS i INP.
Po drugie, panel Wydajność umożliwia deweloperom rejestrowanie profilu (lub śladu) całej aktywności na stronie podczas jej wczytywania lub w określonym okresie. Ten widok zapewnia szczegółowe informacje o wszystkich obserwowanych wymiarach, takich jak sieć, renderowanie, wypełnianie i aktywność skryptów, a także o podstawowych wskaźnikach internetowych strony. Zawiera on też statystyki podobne do tych, które udostępnia Lighthouse.
Kiedy używać panelu Wydajność
Deweloperzy powinni korzystać z panelu Wydajność, aby uzyskać szczegółowe informacje o wydajności danej strony.
Widok danych na żywo pozwala szybko poznać bieżące cechy wydajności strony, a także wykrywać potencjalne problemy podczas interakcji z nią.
Widok śledzenia jest szczególnie przydatny do debugowania problemów z szybkością reakcji wpływających na 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ść to narzędzie dla deweloperów, które udostępnia głównie dane laboratoryjne, ale z pewnym kontekstem pól z raportu CrUX. Nie zastępuje danych z pola.
Widok śledzenia zawiera wiele informacji debugujących, ale z tego powodu może być trudny do zrozumienia dla początkujących programistów lub osób, które nie są programistami. Jednak widok danych na żywo, który otwiera się po otwarciu panelu, rozwiązuje ten problem, ponieważ zapewnia łatwy w użyciu interfejs dla osób, które nie potrzebują pełnych szczegółów.
3-etapowy proces zapewniający prawidłowe działanie podstawowych wskaźników internetowych w witrynie
Podczas pracy nad ulepszaniem wygody użytkowników warto traktować ten proces jako ciągły cykl. Aby poprawić podstawowe wskaźniki internetowe i inne dane dotyczące wydajności, możesz zastosować następujące podejście:
- Ocenianie stanu witryny i identyfikowanie problemów.
- Debugowanie i optymalizacja.
- Monitorowanie za pomocą narzędzi do ciągłej integracji w celu wykrywania i zapobiegania regresji.
Krok 1. Oceń stan witryny i odkryj możliwości jej ulepszenia
Aby ocenić stan witryny, najlepiej zacząć od danych zebranych w polu.
- Korzystaj z narzędzia PageSpeed Insights, aby wyświetlać ogólne dane Core Web Vitals dotyczące wrażeń użytkowników na stronie źródłowej oraz szczegółowe informacje o poszczególnych adresach URL.
- Search Console może Ci pomóc w identyfikowaniu stron, które wymagają ulepszenia, jeśli w Twojej witrynie dobrze działa funkcja grupowania stron.
- Jeśli masz dane RUM, często jest to najlepszy sposób na zidentyfikowanie konkretnych stron lub segmentów ruchu, które mają problemy.
Niezależnie od tego, czy analizujesz dane pól zebrane przez siebie, czy dane Crux, ten pierwszy krok jest kluczowy. Jeśli nie zbierasz danych z pola, dane CrUX mogą być wystarczające, o ile Twoja witryna jest reprezentowana w zbiorze danych.
Analizowanie wydajności witryny za pomocą PageSpeed Insights
Narzędzie PageSpeed Insights wyświetla dane raportu CrUX dotyczące użytkowania przez użytkowników w ostatnich 28 dniach w 75. percentylu. Oznacza to, że jeśli 75% wrażeń użytkowników spełnia wartość progową ustawioną dla danego wskaźnika, wrażenia te są uznawane za „dobre”.
Jeśli masz na myśli konkretną stronę, której skuteczność chcesz sprawdzić, użyj jej. Aby uzyskać ogólny wgląd w witrynę, gdy zaczynasz ją optymalizować, zacznij od strony głównej, ponieważ jest to zwykle jedna z najpopularniejszych stron w wielu witrynach.
Na początek skup się na sekcji Wrażenia użytkowników. Zobaczysz maksymalnie 4 widoki danych: na urządzeniach mobilnych i komputerach w przypadku wpisanego adresu URL oraz całej witryny. Porównaj te opcje i zobacz, czym się różnią. Urządzenia mobilne zwykle mają mniejszą wydajność niż komputery, ponieważ mają mniej zasobów i działają w warunkach potencjalnie mniej stabilnej sieci. Jeśli dane adresu URL i dane pochodzenia różnią się znacznie, spróbuj ustalić, dlaczego: strony główne są często pierwszymi odwiedzanymi stronami (czyli stronami docelowymi), więc mogą być wolniejsze niż strony pochodzenia, ponieważ użytkownicy korzystają z nieprzygotowane pamięci podręcznej przeglądarki. Kolejne strony prawdopodobnie wczytują się szybciej, ponieważ wszystkie udostępnione komponenty zostaną zapisane w pamięci podręcznej, co spowoduje zmniejszenie zbiorczych danych na poziomie pochodzenia.
PSI pokazuje też wszystkie 3 podstawowe wskaźniki internetowe (LCP, CLS i INP), a także diagnostyczne dane TTFB i FCP. Czy któryś z podstawowych wskaźników internetowych nie spełnia wymagań? Jeśli tak, o ile? Dzięki temu dowiesz się, na czym należy się skupić.
Poznaj zależności między tymi wartościami, zwłaszcza w przypadku LCP. Jeśli LCP jest długi, jak w tym przykładzie, sprawdź czasy TTFB i FCP, które są punktami kontrolnymi dla tego wskaźnika. W tym przykładzie czas TTFB wynosi 1,8 s, co utrudnia osiągnięcie zalecanego progu 2,5 s dla dobrego wyniku LCP. Może to oznaczać, że backend jest powolny (problemy z serwerem lub brak CDN), sieci są wolniejsze lub przekierowania opóźniają pierwsze bajty kodu HTML. Więcej informacji znajdziesz w przewodniku Optymalizacja TTFB. FCP zajmuje jeszcze 1 sekundę, co może wskazywać na wolniejsze sieci. W tym przykładzie LCP nie następuje długo po FCP, co sugeruje, że zasób LCP jest dobrze zoptymalizowany po załadowaniu strony. W CrUX możesz też teraz zobaczyć więcej informacji diagnostycznych w typach i podelementach zasobów, co ułatwia diagnozowanie problemów z LCP.
W przypadku CLS sprawdź wyniki CLS w CRUX i Lighthouse, aby sprawdzić, czy problem dotyczy CLS po załadowaniu (co Lighthouse wykryje i oznaczy) czy po załadowaniu (co Lighthouse nie wykryje). Więcej informacji znajdziesz w przewodniku Optimize dotyczącym CLS.
W przypadku elastyczności sprawdź wyniki INP. W Lighthouse sprawdź audyty dotyczące TBT, aby się dowiedzieć, czy podczas początkowego wczytywania strony odbywa się dużo przetwarzania kodu JavaScript, co może mieć wpływ na INP. Zwiększenie INP może być trudne, dlatego więcej informacji znajdziesz w przewodniku Optymalizacja INP.
Wyznaczanie stron o słabej skuteczności w Search Console
Narzędzie PSI jest przydatne, gdy chcesz przetestować konkretny adres URL lub całą witrynę, ale Search Console może pomóc Ci skupić się na określonych typach stron. Jest to szczególnie przydatne, gdy wiele stron ma wspólne motywy lub technologie, które Search Console może zidentyfikować.
Raport Podstawowe wskaźniki internetowe w Search Console przedstawia ogólny obraz wydajności witryny, ale możesz też przejść do konkretnych stron, które wymagają uwagi. W Search Console możesz też:
- określić poszczególne grupy stron, które wymagają poprawy, i te, które zapewniają użytkownikom dobre wrażenia;
- Uzyskaj szczegółowe dane o wydajności według adresu URL pogrupowanego według stanu, rodzaju danych i grup podobnych stron internetowych (np. stron z informacjami o produkcie w witrynie e-commerce).
- Uzyskaj szczegółowe raporty, które grupowałyby adresy URL według każdej kategorii jakości wrażeń użytkownika, zarówno na urządzeniach mobilnych, jak i na komputerach.
Gdy wybierzesz konkretne strony, możesz użyć PSI, aby dowiedzieć się więcej o problemach na tych stronach.
Krok 2. Debugowanie i optymalizacja
W kroku 1. powinny zostać zidentyfikowane strony, które wymagają poprawy wydajności, a także wskaźniki podstawowych wskaźników internetowych, które chcesz ulepszyć. Możesz użyć narzędzi Google, aby uzyskać więcej informacji o przyczynie problemu.
- Przejrzyj audyt Lighthouse, aby uzyskać ogólne wskazówki dotyczące strony.
- Korzystaj z widoku danych na żywo w panelu Wydajność, aby analizować podstawowe wskaźniki internetowe w czasie rzeczywistym.
- Do debugowania problemów z wydajnością i testowania zmian kodu użyj śledzenia w panelu Wydajność.
Bardziej szczegółowe wskazówki znajdziesz w tych przewodnikach:
Odkrywanie możliwości za pomocą Lighthouse
Narzędzie PageSpeed Insights uruchamia Lighthouse za Ciebie. Można też uruchomić Lighthouse w Narzędziach deweloperskich Chrome, co jest przydatne do weryfikowania poprawek lokalnie, ale panel Performance (Wydajność) (omówiony w następnym punkcie) zawiera bardziej kompleksowe narzędzia do identyfikowania i rozwiązywania problemów z wydajnością lokalnie.
Najważniejsze jest sprawdzenie, czy audyt Lighthouse odzwierciedla problemy, które próbujesz rozwiązać (np. problemy z wolnym LCP lub CLS). Domyślnie Lighthouse ocenia tylko wrażenia użytkownika podczas wczytywania strony. Ponieważ jest to narzędzie laboratoryjne, wyklucza ono również INP na rzecz TBT.
Gdy dane Lighthouse wskazują na problem podobny do tego, który próbujesz rozwiązać, obszerne informacje w audytach mogą pomóc w identyfikowaniu problemów i proponowaniu rozwiązań.
Aby skupić się na rozwiązywaniu problemów związanych z konkretnymi danymi, możesz filtrować audyty tak, aby obejmowały tylko interesujące Cię podstawowe wskaźniki internetowe:
W przypadku INP skorzystaj z audytów TBT, aby wykryć problemy, które mogą potencjalnie wpływać na te dane. Pamiętaj jednak, że bez interakcji możliwości diagnostyczne Lighthouse są ograniczone.
Analizowanie w czasie rzeczywistym za pomocą ekranu danych na żywo w Narzędziach deweloperskich w Chrome
Na ekranie danych na żywo w narzędziach deweloperskich w Chrome w panelu Wydajność możesz sprawdzać podstawowe wskaźniki internetowe w czasie rzeczywistym podczas wczytywania strony ipodczas jej przeglądania. Dzięki temu może on rejestrować INP oraz zmiany układu, które występują po załadowaniu. Możesz też wyświetlić bardziej szczegółowe informacje o każdym rodzaju danych:
Ten widok zawiera wiele przydatnych informacji, które ułatwiają wykrywanie problemów z wydajnością. Możesz też pobrać informacje o polach z Chrome UX Report. Aby uzyskać jeszcze więcej informacji, możesz użyć funkcji śledzenia.
Szczegóły w panelu Wydajność
Panel Wydajność w Narzędziach deweloperskich Chrome umożliwia rejestrowanie profilu (lub ścieżki) zachowania wszystkich stron w okresie rejestracji.
Statystyki wydajności są dostępne w panelu Statystyki. Pokazuje też podstawowe wskaźniki internetowe wraz z wartościami pól, jeśli są dostępne.
Śledzenie Przesunięcia układu wyróżnia przesunięcia układu, a kliknięcie ich powoduje wyświetlenie dodatkowych informacji o elementach, które się przesunęły, co ułatwia debugowanie CLS.
Najważniejsze czasy, np. LCP, są widoczne w sekcji Czasy na dole ścieżki. Kliknij te linki, aby uzyskać więcej informacji.
Długie zadania (które mogą prowadzić do problemów z INP) są również wyróżnione na wykresie słupkowym na czerwono.
Te funkcje, a także informacje z innych części panelu Wydajność, mogą pomóc Ci określić, czy wprowadzone poprawki mają jakikolwiek wpływ na podstawowe wskaźniki internetowe strony.
Debugowanie podstawowych wskaźników internetowych w polu
Narzędzia laboratoryjne nie zawsze mogą zidentyfikować przyczyny wszystkich problemów z podstawowymi wskaźnikami internetowymi, które wpływają na użytkowników. To jeden z powodów, dla których tak ważne jest zbieranie własnych danych terenowych, ponieważ uwzględniają one czynniki, których nie uwzględniają dane laboratoryjne.
Więcej informacji znajdziesz w artykule Debugowanie wydajności na urządzeniach.
Krok 3. Monitoruj zmiany
Po naprawieniu problemów musisz się upewnić, że przyniosły one oczekiwany efekt i że nowe problemy nie zakłócają podstawowych wskaźników internetowych. Wymaga to monitorowania problemów z wydajnością w ramach procesu deweloperskiego, aby zapobiec ich przeniesieniu do wersji produkcyjnej, oraz regularnego sprawdzania danych polowych.
Monitorowanie zapytań o wydajność w środowiskach ciągłej integracji (CI)
Lighthouse-CI umożliwia automatyczne uruchamianie audytów Lighthouse po przesłaniu zmian w kodzie, aby zapobiec regresji wydajności. Może to sprawdzać czasy wykonywania (które są zmienne) lub tylko sprawdzać skuteczność jako narzędzie do sprawdzania kodu, aby zapobiegać nieprawidłowym działaniom w kodzie.
Wyświetlanie trendów dotyczących stanu witryny za pomocą danych polowych
Chociaż wszystkie problemy z wydajnością należy wykrywać i rozwiązywać, zanim trafią do wersji produkcyjnej, monitorowanie danych polowych za pomocą RUM jest niezbędne, aby wykrywać te, które się wymkną. Dostępnych jest wiele komercyjnych usług RUM, które mogą Ci w tym pomóc. Biblioteka JavaScript web-vitals może zautomatyzować zbieranie danych pol w witrynie i opcjonalnie używać tych danych do obsługi niestandardowych pulpitów i systemów ostrzegania.
W przypadku witryn bez rozwiązania RUM możesz użyć różnych narzędzi CrUX do podstawowej analizy trendów danych polowych.
Podsumowanie
Aby zapewnić użytkownikom szybkie i przyjemne wrażenia, musisz skupić się na wydajności i wdrożyć odpowiednią metodykę, która pozwoli Ci odnotowywać postępy. Dzięki odpowiednim narzędziom i procesom weryfikacji, debugowania i monitorowania możesz tworzyć świetne wrażenia dla użytkowników oraz utrzymywać wartości podstawowych wskaźników internetowych na poziomie „Dobrze”.