Łącz narzędzia Google, aby skutecznie kontrolować, ulepszać i monitorować swoją witrynę.
Opublikowano: 28 maja 2020 r.
Podstawowe wskaźniki internetowe to zestaw danych, które oceniają wrażenia użytkownika na podstawie kryteriów takich jak wydajność wczytywania, czas reakcji na działania użytkownika i stabilność układu.
W tym przewodniku omówimy proces ulepszania podstawowych wskaźników internetowych w Twojej witrynie. Punkt wyjścia tego procesu zależy jednak od tego, czy zbierasz własne dane z terenu. To, gdzie się kończy, może zależeć od tego, które narzędzia Google uznasz za przydatne w diagnozowaniu i rozwiązywaniu problemów z wygodą użytkowników.
Podstawowe wskaźniki internetowe najlepiej mierzyć w rzeczywistych warunkach
Podstawowe wskaźniki internetowe zostały zaprojektowane 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 działają w określonych, zdefiniowanych warunkach i mogą nie odzwierciedlać rzeczywistych pomiarów podstawowych wskaźników internetowych, które są widoczne dla użytkowników.
Na przykład Lighthouse to narzędzie laboratoryjne, które przeprowadza testy z symulowanym ograniczaniem przepustowości w symulowanym środowisku komputerowym lub mobilnym. Symulacje wolniejszej sieci i urządzeń są przydatne podczas diagnozowania problemów z wydajnością, ale stanowią tylko wycinek szerokiego zakresu warunków sieciowych i możliwości urządzeń, więc mogą nie odzwierciedlać tego, co widzą użytkownicy Twoich witryn.
Narzędzia laboratoryjne, takie jak Lighthouse, zwykle wykonują „zimne ładowanie” strony internetowej jako zupełnie nowy użytkownik. Jest to zwykle najwolniejsze ładowanie, ale w rzeczywistości odwiedzający mogą mieć niektóre zasoby w pamięci podręcznej, jeśli wcześniej odwiedzili witrynę lub podczas przeglądania witryny. Nowi użytkownicy i narzędzia mogą też inaczej korzystać z witryny, ponieważ wyświetlają się im banery z informacją o plikach cookie lub inne treści.
Podsumowując, narzędzia laboratoryjne mogą wskazywać potencjalne problemy z wydajnością i pomagać w ich rozwiązywaniu oraz wprowadzaniu zmian, ale mogą nie odzwierciedlać tego, jak wielu użytkowników faktycznie korzysta z Twojej witryny. Używaj danych zgromadzonych do pomiaru wydajności w rzeczywistych warunkach, a narzędzi laboratoryjnych, takich jak Lighthouse, do diagnozowania sposobów na jej poprawę. Zapoznaj się też z 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 rzeczywistych użytkowników Chrome. Jest to podstawa wielu narzędzi Google i innych firm, które raportują podstawowe wskaźniki internetowe witryny.
CrUX ma jednak swoje ograniczenia. Często może Ci powiedzieć, kiedy występuje problem, ale zwykle ma za mało danych, aby określić dlaczego.
W miarę możliwości zbieraj własne dane z terenu
Najlepszy zbiór danych do zwiększania skuteczności witryny w terenie to ten, który Ty utworzysz. Zaczyna się od zbierania danych z pola od użytkowników Twojej witryny. Sposób, w jaki to zrobisz, zależy od wielkości organizacji i od tego, czy chcesz zapłacić za rozwiązanie innej firmy, czy utworzyć własne.
Płatne rozwiązania prawie na pewno będą mierzyć podstawowe wskaźniki internetowe (i inne dane o skuteczności) i zwykle udostępniać 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 lub nawet do takiej, która może sobie pozwolić na rozwiązanie innej firmy. W takich przypadkach biblioteka web-vitals Google pomoże Ci zebrać wszystkie podstawowe sygnały internetowe. Będziesz jednak odpowiadać za sposób raportowania, przechowywania i analizowania tych danych.
Jeśli korzystasz już z Google Analytics, ale nie zbierasz własnych danych z pola, możesz użyć biblioteki web-vitals, aby wysyłać do Google Analytics dane ze wskaźników internetowych zebrane w polu, a następnie korzystać z eksportów GA4 do BigQuery w celu raportowania danych.
Poznaj narzędzia Google
Niezależnie od tego, czy zbierasz własne dane z terenu, istnieje kilka narzędzi Google, które mogą być przydatne w analizowaniu podstawowych wskaźników internetowych. Zanim utworzysz przepływ pracy, zapoznaj się z ogólnym opisem każdego narzędzia, aby dowiedzieć się, które z nich będą dla Ciebie najlepsze.
Raport na temat użytkowania Chrome (CrUX)
Jak wspomnieliśmy wcześniej, CrUX to publiczny zbiór danych z pól zebranych od segmentu rzeczywistych użytkowników Google Chrome z milionów witryn. Obejmuje ona podstawowe wskaźniki internetowe i inne dane dotyczące witryn o wystarczającym ruchu.
Dane CrUX są dostępne jako miesięczny zbiór danych BigQuery na poziomie źródła 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 CrUX są dostępne w różnych narzędziach CrUX, zarówno w postaci dostępu programowego, jak i narzędzi wizualnych do użytku przez użytkowników.
Kiedy używać CrUX
Nawet jeśli zbierasz własne dane z pól, CrUX jest nadal przydatny. Chociaż CrUX reprezentuje podzbiór użytkowników Chrome, warto porównać dane z pól w Twojej witrynie, aby sprawdzić, jak są one zgodne z danymi CrUX. Każda z nich ma swoje zalety i wady, co może powodować różnice. Jeśli nie zbierasz żadnych danych z pola w przypadku swojej witryny, raport CrUX jest szczególnie przydatny do uzyskania ogólnego przeglądu – pod warunkiem że Twoja witryna jest uwzględniona w jego zbiorze danych.
Możesz korzystać z CrUX bezpośrednio lub za pomocą innego narzędzia (w tym wymienionych poniżej). Bezpośrednie korzystanie ze zbioru danych CrUX, za pomocą BigQuery lub interfejsu API, jest przydatne do udostępniania danych, które nie są widoczne 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ć dodatkowe dane w CrUX, które również często nie są widoczne w innych narzędziach.
Kiedy nie należy używać CrUX
CrUX reprezentuje tylko użytkowników Chrome, a nawet wtedy tylko ich część. Pełne rozwiązanie RUM może obejmować więcej doświadczeń w Chrome i innych przeglądarkach, w których obsługiwane są wskaźniki Web Vitals.
Witryny, które nie generują wystarczającego ruchu, nie są uwzględniane w zbiorze danych CrUX. W takim przypadku musisz zebrać własne dane z terenu, aby dowiedzieć się, jak działa Twoja witryna, ponieważ CrUX nie będzie dostępny. W przeciwnym razie musisz polegać na danych laboratoryjnych, ale z ograniczeniami, które mogą sprawić, że nie będą one reprezentatywne, jak opisano wcześniej.
Dane CrUX to średnia krocząca z ostatnich 28 dni, więc nie jest to idealne narzędzie podczas programowania, ponieważ odzwierciedlenie zmian w zbiorze danych CrUX zajmuje sporo czasu.
Jako publiczny zbiór danych raport CrUX ma ograniczenia dotyczące ilości udostępnianych informacji i sposobu, w jaki można wysyłać do niego zapytania. Zbieranie własnych danych RUM pozwala gromadzić więcej szczegółów (np. element LCP) i dokładniej segmentować dane w celu identyfikowania problemów. Czy zalogowani użytkownicy mają lepsze czy gorsze podstawowe wskaźniki internetowe niż użytkownicy, którzy nie są zalogowani? Czy użytkownicy z wolnym 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 raportuje dane z pól z raportu na temat użytkowania Chrome i dane z laboratorium Lighthouse dotyczące danej strony. Więcej informacji znajdziesz w odpowiednich sekcjach.
Kiedy używać PSI
PSI doskonale nadaje się do oceny wydajności CrUX na poziomie strony lub źródła, zarówno w przypadku użytkowników urządzeń mobilnych, jak i komputerów. To dobry wybór, jeśli chcesz uzyskać wstępny przegląd podstawowych wskaźników internetowych strony lub witryny. Umożliwia też wyświetlanie danych o podstawowych wskaźnikach internetowych innych witryn, np. konkurencji.
PSI udostępnia też dane Lighthouse, które zawierają przydatne rekomendacje dotyczące poprawy podstawowych wskaźników internetowych, jeśli wartości są zgodne. Jeśli te założenia nie są spełnione, rekomendacje Lighthouse mogą być mniej trafne.
Lighthouse jest uruchamiany na serwerze, więc może tworzyć bardziej spójne wartości bazowe niż w przypadku uruchamiania go w Narzędziach deweloperskich.
Kiedy nie należy używać PSI
PSI jest dostępny tylko w przypadku publicznych adresów URL. Nie można go używać w witrynach w wersji deweloperskiej, które nie są publicznie dostępne.
Dane CrUX są dostępne tylko wtedy, gdy witryny spełniają określone kryteria kwalifikacji, w tym progi popularności witryny. PSI jest mniej przydatne, gdy dla strony lub źródła nie są dostępne dane CrUX, ponieważ w takich przypadkach może wyświetlać tylko dane laboratoryjne Lighthouse.
Podobnie jeśli masz tylko dane CrUX na poziomie źródła, a nie konkretnego testowanego adresu URL, ogranicza to przydatność danych z pól na poziomie źródła do powiązania z diagnostyką laboratoryjną na poziomie strony. Dane o polach na poziomie pochodzenia są nadal bardzo przydatne jako podsumowanie wyników witryny, a audyty Lighthouse mogą być pomocne, ale w tym przypadku należy zachować szczególną ostrożność.
Gdy dane na poziomie strony są dostępne w raporcie na temat użytkowania Chrome, ale różnią się od danych laboratoryjnych Lighthouse, rekomendacje Lighthouse mogą mieć ograniczoną wartość. Może się to zdarzyć zwłaszcza w przypadku problemów z CLS po wczytaniu oraz podstawowych wskaźników internetowych związanych z interaktywnością (FID i INP), w przypadku których audyty laboratoryjne są mniej przydatne.
Search Console
Search Console mierzy ruch z wyszukiwarki i skuteczność Twojej witryny, w tym podstawowe wskaźniki internetowe. Jest ona dostępna tylko dla właścicieli witryn, którzy potwierdzili własność witryny.
Cenną funkcją Search Console jest to, że grupuje podobne strony (np. strony, które korzystają z tego samego szablonu) w jedną ocenę grupy. Search Console zawiera też raport dotyczący podstawowych wskaźników internetowych oparty na danych z pól pochodzących z CrUX.
Kiedy używać Search Console
Search Console to narzędzie odpowiednie zarówno dla deweloperów, jak i osób na stanowiskach niezwiązanych z programowaniem. Umożliwia ono ocenę skuteczności wyszukiwania i stron w sposób, w jaki nie robią tego inne narzędzia Google. Prezentacja danych CrUX i grupowanie stron według podobieństwa zapewniają nowe spojrzenie na to, jak poprawa wydajnoś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 innych narzędzi innych firm grupujących strony według podobieństwa, lub jeśli 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 cechy niż reszta grupy – na przykład jeśli grupa nie spełnia określonych podstawowych wskaźników internetowych, ale przykładowe strony wydają się spełniać te same podstawowe wskaźniki internetowe. Może się tak zdarzyć, gdy grupa zawiera rzadko odwiedzane strony, które mogą się wolniej ładować, ponieważ rzadziej są przechowywane w pamięci podręcznej. Jeśli w długim ogonie jest wystarczająca liczba takich stron, mogą one wpływać na ogólny odsetek zdanych testów w grupie.
Latarnia morska
Lighthouse to narzędzie laboratoryjne, które wskazuje konkretne możliwości poprawy skuteczności strony. Przepływy użytkownika w Lighthouse umożliwiają też programistom tworzenie skryptów przepływów 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 ułatwić testowanie regresji wydajności. Wyświetla raport Lighthouse wraz z żądaniami ściągnięcia i śledzi dane o wydajności w czasie.
Kiedy używać Lighthouse
Lighthouse doskonale sprawdza się do znajdowania możliwości poprawy wydajności podczas programowania w środowiskach lokalnych i testowych. Lighthouse CI jest równie przydatne w fazach kompilacji i wdrażania w środowiskach testowych i produkcyjnych, w których do zapewnienia wygody użytkowników potrzebne są testy regresji wydajności.
Kiedy nie należy używać Lighthouse
Lighthouse (lub Lighthouse CI) niezastępuje danych z terenu. Lighthouse to przede wszystkim narzędzie diagnostyczne, które wyświetla potencjalne problemy i sprawdzone metody dotyczące wstępnie zdefiniowanego ładowania strony. Wyświetlane przez nią rekomendacje nie zawsze mogą odpowiadać skuteczności, jaką osiągają Twoi użytkownicy.
Narzędzie Lighthouse może służyć do diagnozowania witryn produkcyjnych za pomocą narzędzi takich jak PageSpeed Insights, ale najlepiej używać go w środowiskach programistycznych i ciągłej integracji, aby rozwiązywać problemy z wydajnością, zanim trafią one do wersji produkcyjnej.
Audyty udostępniane przez Lighthouse są też dostępne w sekcji „Statystyki” na panelu Wydajność w Narzędziach deweloperskich w Chrome, która zawiera bardziej szczegółową analizę wydajności strony.
Panel Wydajność w Narzędziach deweloperskich w Chrome
Narzędzia deweloperskie w Chrome to zbiór narzędzi do tworzenia stron internetowych wbudowanych w przeglądarkę, w tym panel Wydajność. Panel Wydajność to narzędzie laboratoryjne, które ma 2 „tryby”:
Po otwarciu panelu Wydajność na ekranie Dane na żywo wyświetlają się bieżące dane dotyczące podstawowych wskaźników internetowych z możliwością importowania danych z raportu CrUX. Jest to przydatny widok „na żywo” skuteczności, który pozwala wykrywać problemy z wydajnością podczas interakcji ze stroną, zwłaszcza problemy po wczytaniu, które mogą być widoczne w przypadku wskaźników 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 zarejestrowanym przedziale czasu. Ten widok zapewnia szczegółowy wgląd we wszystko, co jest obserwowane w różnych wymiarach, takich jak sieć, renderowanie, malowanie i aktywność skryptów, a także w Core Web Vitals strony. Zawiera też statystyki podobne do tych, które udostępnia Lighthouse.
Kiedy używać panelu Wydajność
Deweloperzy powinni używać panelu Wydajność, aby uzyskać szczegółowe informacje o wydajności konkretnej strony.
Widok danych na żywo pozwala szybko poznać aktualne charakterystyki wydajności strony, a także wykryć potencjalne problemy podczas interakcji z nią.
Widok śledzenia jest szczególnie przydatny do debugowania problemów z reaktywnością, które wpływają na INP. Gdy zidentyfikujesz interakcję, która nie reaguje prawidłowo, i będziesz w stanie ją odtworzyć, panel Wydajność może dostarczyć wiele danych o tym, co dzieje się w przeglądarce, aby pomóc Ci zrozumieć problem – od blokowania wątku głównego po stosy wywołań JavaScriptu i renderowanie.
Kiedy nie należy używać panelu Wydajność
Panel Wydajność to narzędzie dla deweloperów, które dostarcza głównie dane laboratoryjne, ale też pewne informacje z CrUX. Nie zastępuje danych z pola.
Widok śledzenia zawiera wiele informacji do debugowania, ale z tego powodu może być trudny do zrozumienia dla początkujących deweloperów lub osób, które nie zajmują się tworzeniem aplikacji. Jednak widok danych na żywo, który otwiera się w panelu, rozwiązuje ten problem, ponieważ zapewnia łatwiejszy w użyciu interfejs dla osób, które nie potrzebują pełnych szczegółów.
3-etapowy proces dbania o podstawowe wskaźniki internetowe witryny
Pracując nad poprawą komfortu użytkowników, warto traktować ten proces jako ciągły cykl. Aby poprawić podstawowe wskaźniki internetowe i inne wskaźniki wydajności, możesz wykonać te czynności:
- Oceniaj stan witryny i określaj problemy.
- Debuguj i optymalizuj.
- Monitoruj za pomocą narzędzi do ciągłej integracji, aby wykrywać i zapobiegać regresjom.
Krok 1. Oceń stan witryny i określ możliwości ulepszeń
Aby ocenić stan witryny, najlepiej zacząć od danych z terenu.
- Użyj narzędzia PageSpeed Insights, aby wyświetlić ogólne dane dotyczące wrażeń użytkowników związane z podstawowymi wskaźnikami internetowymi w przypadku źródła oraz szczegółowe informacje o poszczególnych adresach URL.
- Search Console może być przydatne do identyfikowania stron, które wymagają ulepszeń, a funkcja grupowania stron dobrze sprawdza się w przypadku Twojej witryny.
- Jeśli masz dane RUM, często jest to najlepsza opcja, aby zidentyfikować konkretne strony lub segmenty ruchu, w których występują problemy.
Niezależnie od tego, czy analizujesz zebrane przez siebie dane z terenu, czy dane CrUX, ten pierwszy krok jest kluczowy. Jeśli nie zbierasz danych z terenu, dane CrUX mogą wystarczyć, aby Ci pomóc – pod warunkiem, że Twoja witryna jest uwzględniona w zbiorze danych.
Analizowanie wydajności witryny za pomocą PageSpeed Insights
PageSpeed Insights wyświetla dane raportu CrUX z ostatnich 28 dni, które dotyczą danych o użytkownikach na 75 percentylu. Oznacza to, że jeśli 75% wrażeń użytkowników spełnia próg ustawiony dla danego wskaźnika, to wrażenia są uznawane za „dobre”.
Jeśli chcesz sprawdzić skuteczność konkretnej strony, użyj jej adresu. Aby uzyskać ogólny widok witryny, gdy dopiero zaczynasz optymalizację, możesz zacząć od strony głównej, ponieważ jest ona zwykle jedną z najpopularniejszych stron w wielu witrynach.
Na początku skup się na sekcji Jakie są wrażenia użytkowników w PSI. Zobaczysz maksymalnie 4 widoki danych: dane dotyczące urządzeń mobilnych i komputerów w przypadku wpisanego adresu URL oraz całej domeny. Porównaj je i zobacz, czym się różnią. Urządzenia mobilne zwykle działają wolniej niż komputery, ponieważ mają mniej zasobów i mogą działać w mniej stabilnych warunkach sieciowych. Jeśli dane URL i dane o pochodzeniu znacznie się od siebie różnią, spróbuj ustalić przyczynę. Strony główne są często pierwszymi odwiedzanymi stronami (czyli stronami docelowymi), więc mogą być wolniejsze niż pochodzenie, ponieważ użytkownicy w pełni odczuwają skutki nieprzygotowanej pamięci podręcznej przeglądarki. Kolejne strony będą prawdopodobnie wczytywać się szybciej, ponieważ wszystkie udostępnione komponenty będą zapisywane w pamięci podręcznej, co zmniejszy zagregowane dane na poziomie źródła.
PSI pokazuje też wszystkie 3 podstawowe wskaźniki internetowe (LCP, CLS i INP) oraz diagnostyczne wskaźniki TTFB i FCP. Czy któryś z podstawowych wskaźników internetowych nie spełnia wymagań i w jakim stopniu? Wskaże to, na czym należy się skupić.
Poznaj zależności między tymi liczbami, zwłaszcza w przypadku LCP. Jeśli LCP jest powolny, jak w tym przykładzie, sprawdź TTFB i FCP, które są punktami odniesienia dla tej wartości. W tym przykładzie czas TTFB wynosi 1,8 sekundy, co utrudnia osiągnięcie zalecanego progu 2,5 sekundy dla dobrego LCP. Sugeruje to powolne działanie backendu (problemy z serwerem lub brak sieci CDN), wolniejsze sieci lub przekierowania opóźniające pierwsze bajty HTML. Więcej informacji znajdziesz w przewodniku po optymalizacji TTFB. FCP zajmuje dodatkową sekundę, co może wskazywać na wolniejsze sieci. W tym przykładzie LCP nie występuje długo po FCP, co sugeruje, że zasób LCP jest dobrze zoptymalizowany po wczytaniu strony. CrUX wyświetla teraz też więcej informacji diagnostycznych w przypadku typów zasobów i ich części, co również pomaga w diagnozowaniu problemów z LCP.
W przypadku CLS sprawdź wyniki CLS w CrUX i Lighthouse, aby dowiedzieć się, czy problem dotyczy CLS podczas wczytywania (co wykryje i zasygnalizuje Lighthouse), czy CLS po wczytaniu (czego Lighthouse nie wykryje). Więcej informacji znajdziesz w przewodniku po optymalizacji CLS.
Aby sprawdzić responsywność, zwróć uwagę na wyniki INP. Sprawdź audyty TBT w Lighthouse, aby dowiedzieć się, czy podczas początkowego wczytywania strony nie jest przetwarzana duża ilość kodu JavaScript, co prawdopodobnie ma wpływ na INP. INP może być trudnym wskaźnikiem do poprawy, więc więcej informacji znajdziesz w przewodniku po optymalizacji INP.
Wykrywanie w Search Console stron o niskiej skuteczności
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, jeśli wiele stron ma wspólne tematy lub technologie, a Search Console może je skutecznie identyfikować.
Raport Podstawowe wskaźniki internetowe w Search Console pokazuje ogólny obraz skuteczności Twojej witryny, ale możesz też sprawdzić szczegółowe informacje o konkretnych stronach, które wymagają uwagi. W Search Console możesz też:
- określać grupy stron, które wymagają poprawy, oraz te, które zapewniają dobrą jakość.
- Uzyskuj szczegółowe dane o skuteczności według adresu URL pogrupowane według stanu, danych i grup podobnych stron internetowych (np. stron z informacjami o produktach w witrynie e-commerce).
- Uzyskuj szczegółowe raporty, które dzielą adresy URL na kategorie jakości obsługi użytkownika na urządzeniach mobilnych i komputerach.
Gdy znajdziesz już konkretne strony, możesz użyć PSI w sposób opisany wcześniej, aby lepiej zrozumieć problemy dotyczące tych stron.
Krok 2. Debugowanie i optymalizacja
W kroku 1 powinna być już określona lista stron, które wymagają poprawy wydajności, oraz wskaźniki podstawowych wskaźników internetowych, które chcesz poprawić. Aby dowiedzieć się więcej o przyczynie problemu, możesz skorzystać z narzędzi Google.
- Sprawdź audyty Lighthouse, aby uzyskać ogólne wskazówki dotyczące strony.
- Aby analizować podstawowe wskaźniki internetowe w czasie rzeczywistym, użyj widoku danych na żywo w panelu Wydajność.
- Użyj śledzenia w panelu Wydajność, aby debugować problemy z wydajnością i testować zmiany w kodzie.
Bardziej szczegółowe wskazówki znajdziesz w tych przewodnikach:
Odkrywanie możliwości za pomocą narzędzia Lighthouse
Narzędzie PageSpeed Insights uruchamia Lighthouse. Narzędzie Lighthouse można też uruchomić z Narzędzi deweloperskich w Chrome. Jest to przydatne do lokalnego sprawdzania poprawek, ale panel Wydajność (omówiony w dalszej części) to bardziej kompleksowe narzędzie do identyfikowania i lokalnego rozwiązywania problemów z wydajnością.
Ważne jest, aby sprawdzić, czy audyt Lighthouse odzwierciedla problemy, które próbujesz rozwiązać (np. powolny LCP lub problemy z CLS). Lighthouse od razu po zainstalowaniu ocenia tylko wygodę użytkownika podczas wczytywania strony. Jest to narzędzie laboratoryjne, więc zamiast INP uwzględnia TBT.
Jeśli dane z Lighthouse wskazują na podobny problem do tego, który próbujesz rozwiązać, bogactwo informacji w jego audytach może pomóc w zidentyfikowaniu problemów i sugerowaniu rozwiązań.
Możesz filtrować audyty, aby wyświetlać tylko te podstawowe wskaźniki internetowe, które Cię interesują. Dzięki temu możesz skupić się na rozwiązywaniu problemów związanych z określonymi danymi:
W przypadku INP używaj audytów TBT, aby identyfikować problemy, które mogą 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 z danymi na żywo w Narzędziach deweloperskich w Chrome
Ekran z danymi na żywo w narzędziach deweloperskich w Chrome w panelu Wydajność pokazuje podstawowe wskaźniki internetowe w czasie rzeczywistym podczas wczytywania strony i przeglądania strony. Dzięki temu może rejestrować zarówno INP, jak i zmiany układu, które występują po wczytaniu strony. Możesz też wyświetlić bardziej szczegółowe informacje o każdym rodzaju danych:
Ten widok zawiera wiele przydatnych informacji, które pomagają identyfikować problemy z wydajnością, a nawet pobierać dane z CrUX. Aby uzyskać jeszcze więcej informacji, możesz przejść do szczegółów za pomocą śledzenia.
Szczegółowe informacje w panelu Wydajność
Panel Wydajność w Narzędziach deweloperskich w Chrome umożliwia nagrywanie profilu (lub śladu) wszystkich działań na stronie w określonym przedziale czasu.
Statystyki wydajności są dostępne w panelu bocznym Statystyki. Wyświetla też podstawowe wskaźniki internetowe wraz z wartościami pól, jeśli są dostępne.
Ścieżka Przesunięcia układu wyróżnia przesunięcia układu, a kliknięcie tych elementów powoduje wyświetlenie dodatkowych informacji o elementach, które uległy przesunięciu, co ułatwia debugowanie CLS.
Kluczowe czasy, takie jak LCP, są widoczne w sekcji Czasy u dołu ścieżki. Kliknij te elementy, aby uzyskać więcej informacji.
Długie zadania (które mogą powodować problemy z INP) są też wyróżnione czerwonymi trójkątami na wykresie płomieniowym.
Te funkcje, a także informacje w innych częściach panelu Wydajność, mogą pomóc Ci określić, czy wprowadzone poprawki mają wpływ 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 z podstawowymi wskaźnikami internetowymi, które występują u użytkowników. Dlatego tak ważne jest zbieranie własnych danych terenowych, ponieważ uwzględniają one czynniki, których nie można uwzględnić w danych laboratoryjnych.
Więcej informacji znajdziesz w artykule Debugowanie wydajności w terenie.
Krok 3. Monitoruj zmiany
Po rozwiązaniu problemów musisz się upewnić, że wprowadzone zmiany mają oczekiwany efekt i że nowe problemy nie zakłócają działania podstawowych wskaźników internetowych. Wymaga to monitorowania problemów z wydajnością w ramach procesu pracy dewelopera, aby zapobiec wprowadzaniu do środowiska produkcyjnego problemów z wydajnością, oraz regularnego monitorowania danych z terenu, aby upewnić się, że tak jest.
Monitorowanie żądań dotyczących wydajności w środowiskach ciągłej integracji (CI)
Lighthouse-CI umożliwia automatyczne przeprowadzanie audytów Lighthouse w przypadku zatwierdzeń kodu, aby zapobiegać pogorszeniu wydajności. Może to sprawdzać czasy działania (które podlegają zmienności) lub tylko audyty wydajności jako narzędzie do sprawdzania kodu, które zapobiega stosowaniu w nim nieprawidłowych praktyk.
Wyświetlanie trendów dotyczących stanu witryny na podstawie danych z pola
Chociaż należy dążyć do wykrywania i usuwania wszystkich problemów z wydajnością, zanim trafią one do środowiska produkcyjnego, monitorowanie danych z terenu za pomocą RUM jest niezbędne do znalezienia tych, które się tam przedostały. Dostępnych jest wiele komercyjnych usług RUM, które mogą w tym pomóc. Biblioteka JavaScript web-vitals może automatyzować zbieranie danych o polach w witrynie, a opcjonalnie używać tych danych do obsługi niestandardowych paneli i systemów alertów.
W przypadku witryn bez rozwiązania RUM możesz używać różnych narzędzi CrUX do podstawowej analizy trendów danych z terenu.
Podsumowanie
Aby zapewnić użytkownikom szybkie i przyjemne korzystanie z aplikacji, musisz myśleć przede wszystkim o wydajności i wdrożyć odpowiedni proces, który pozwoli Ci osiągnąć postępy. Dzięki odpowiednim narzędziom i procesom do przeprowadzania audytów, debugowania i monitorowania możesz tworzyć strony, które zapewniają użytkownikom doskonałe wrażenia i spełniają wymagania dotyczące dobrych podstawowych wskaźników internetowych.