Podstawowe wskaźniki internetowe: 7 narzędzi i technik identyfikowania wąskich gardeł w wydajności performance

Core Web Vitals (CWV) to obecnie gorący temat. W tym miejscu przyjrzymy się niektórym narzędziom, których możemy użyć do zidentyfikowania problemów z wydajnością witryny, w ramach przygotowań do nadchodzącej aktualizacji rankingu Google w maju 2021 r.

Potrzebujesz odświeżenia w Core Web Vitals? Dowiedz się, czym one są i jak je zoptymalizować w moim artykule Core Web Vitals Explained.

Automatyczne monitorowanie metryk CWV

Jeśli masz kilka witryn internetowych lub kluczowych stron, które chcesz monitorować w czasie, bez konieczności ręcznego uruchamiania testu po teście, ten arkusz kalkulacyjny Digital Inspiration może być dla Ciebie. Po prostu weź klucz Lighthouse PageSpeed ​​API, podłącz kilka adresów URL i gotowe!

Arkusz kalkulacyjny pomaga zidentyfikować potencjalne problemy z wydajnością wokół kluczowych wskaźników CWV i kiedy mogą wystąpić, co z kolei może dać nam wskazówki, co może być przyczyną. Można go również wykorzystać do zademonstrowania, w jaki sposób wyniki szybkości mogą zmieniać się naturalnie wraz z rozwojem witryny lub gdy wprowadzane są zmiany w podstawowych algorytmach szybkości strony.

Od kilku miesięcy korzystamy ze zmodyfikowanej wersji tego arkusza kalkulacyjnego, która pomogła nam zidentyfikować możliwości poprawy wydajności wielu witryn.

Statystyki PageSpeed

Google PageSpeed ​​Insights to moje podstawowe narzędzie do wstępnych, czołowych badań problemów związanych z wydajnością i CWV, zarówno dla urządzeń mobilnych, jak i stacjonarnych. Raporty zawierają „Dane pola”; jak użytkownicy w świecie rzeczywistym doświadczają witryny wraz z danymi Lighthouse „Lab”, które symulują ładowanie strony, co jest przydatne do powtarzalnych i spójnych testów.

Podstawowe wskaźniki Web Vital są wyraźnie wyróżnione prostymi, oznaczonymi kolorami wskaźnikami. Słabe dane są wyróżnione na czerwono, dobre na zielono. Te dane są połączone, aby dać ogólny wynik szybkości, a do zielonego „zaliczenia” potrzebujesz 90% lub więcej.

Raporty te zawierają również szereg zaleceń i diagnostyki, uporządkowanych według elementów o największym wpływie pod względem łącznej liczby sekund, które można zaoszczędzić.

Monitor wydajności Chrome DevTools

Aby uzyskać bardziej szczegółową analizę wydajności i problemów związanych z CWV, często korzystam z Monitora wydajności Chrome w DevTools, a niektóre kluczowe wskaźniki CWV, których używam, są ponumerowane na poniższym zrzucie ekranu.

1. Po pierwsze, będziesz chciał się upewnić, że używasz monitora wydajności we właściwej rozdzielczości, ponieważ elementy LCP i CLS często zmieniają się w różnych rozdzielczościach. Mam ustawiony na 350 x 636 pikseli, aby powielić widok mobilny PageSpeed ​​Insights.
2. Przed uruchomieniem raportu możesz również zasymulować łączność i moc urządzenia mobilnego. Często wybieram szybkie spowolnienie procesora 3g i 4x.
3. Wybranie metryki LCP po wygenerowaniu raportu identyfikuje największy element. Powinno to być jak najbliżej FCP (First Contentful Paint). Jeśli istnieje luka, będziesz chciał zidentyfikować i usprawnić dostarczanie największego elementu.
4. Długie zadania procesora są wyróżnione czerwonymi przekątnymi na szarych paskach. Jest to często spowodowane cięższym kodem JavaScript, reprezentowanym przez żółte paski i wpływa na wskaźniki interaktywności (FID, TBT i TTI). Przejrzenie poniższych pasków zwykle wskazuje na nieodpowiednie pliki i funkcje JavaScript.
5. Przesunięcia układu są wyróżnione tymi czerwonymi paskami, a ich wybranie zwykle podświetla, który element został przesunięty. Duża ich ilość stworzy wyższe wartości CLS.
6. Widok ramki może być świetnym sposobem na wizualne podkreślenie wyglądu treści i przesunięcia układu podczas ładowania. W przypadku wysokich wartości CLS często widać na podstawie ramek, jaka jest przyczyna. W tym przykładzie duży baner plików cookie powoduje przesunięcie układu w miarę przesuwania treści w dół.

Web Vitals Rozszerzenia Chrome

Podstawowe wskaźniki SERP

Rozszerzenie SERP Vitals wyświetla przydatny wskaźnik dla metryk LCP, FID i CLS bezpośrednio w wynikach wyszukiwania. Świetnie nadaje się do analizy konkurencji i może szybko wskazać, jak szybko strona internetowa może być, zanim ją odwiedzisz.

Dane od prawdziwych użytkowników są kompilowane anonimowo w raporcie Chrome User Experience Report (CrUX). Nie jest ona jednak dostępna dla każdej witryny, ponieważ nowe witryny lub witryny o małym ruchu nie zgromadzą wystarczającej liczby punktów danych.

Wskaźniki internetowe

Przydatne rozszerzenie Web Vitals mierzy 3 kluczowe wskaźniki CWV dla użytkowników komputerów stacjonarnych w Chrome w czasie rzeczywistym, a jego kolor sygnalizacji świetlnej zapewnia szybki wskaźnik podczas przeglądania witryny. Ponieważ nie opiera się na zewnętrznie zebranych danych użytkowników, może być świetnym rozwiązaniem dla programistów pracujących w środowisku lokalnym, aby wcześnie wykryć wszelkie problemy.

Latarnia morska

Rozszerzenia Lighthouse zapewniają szybką drogę do tej samej funkcji raportowania dostępnej w Chrome DevTools i pobierają dane laboratoryjne za pomocą Lighthouse API zamiast danych terenowych od rzeczywistych użytkowników za pośrednictwem CrUX.

Raport skuteczności jest bardzo podobny do analizy mobilnej PageSpeed ​​Insights, oferując podobną diagnostykę i zalecenia. Generowane są również dodatkowe raporty dotyczące SEO, dostępności i najlepszych praktyk.

Wizualizator prędkości witryny Treo

Wizualizator na https://treo.sh/sitespeed pokazuje metryki CWV w czasie, które można filtrować według urządzenia, łączności i regionu geograficznego. Jest aktualizowany co tydzień i wykorzystuje dane z raportu CrUX.

W poniższym przykładzie dla bbc.co.uk widzimy, jak metryka CLS znacznie spadła w ciągu ostatnich 3 miesięcy, dając zielone wyniki dla wszystkich podstawowych metryk. Jest to świetny sposób na analizę wydajności metryk CWV w czasie lub na przeprowadzenie analizy konkurencji.

Wizualizacja żądań stron trzecich

Pomiary interaktywności dla FID, TTI i TBT często mogą być trudne do rozwiązania. PageSpeed ​​Insights może się przydać, jeśli chodzi o identyfikację najcięższych skryptów innych firm, ale czasami przyzwoita wizualizacja może znacznie łatwiej komunikować wpływ tych skryptów.

Narzędzie do mapowania żądań https://requestmap.herokuapp.com/ jest do tego świetne. Wygenerowane mapy zawierają węzły dla każdego żądania strony trzeciej, przy czym większe węzły reprezentują skrypty o większym wpływie. Jeśli Twoje wskaźniki interaktywności są słabe, prawdopodobnie zobaczysz na tej mapie wiele węzłów.

Oto przykład z witryny, która ma aż 26 sekund na pomiar czasu do interaktywnego TTI. Szybki rzut oka na mapę pokazuje widżet czatu na żywo, reprezentowany przez liczne ciemnoniebieskie węzły u góry, stanowiące ponad połowę wszystkich żądań.

Narzędzie do mapowania żądań to także świetny sposób na określenie, skąd ładowane są skrypty lub inne zasoby. Poniżej widzimy kilka węzłów pochodzących bezpośrednio z żółtego węzła Menedżera tagów Google w tym przykładzie.

Wodospady w WebPageTest

Raporty WebPageTest zawierają dużo więcej szczegółów niż PageSpeed ​​Insights i mogą być generowane z różnych urządzeń i lokalizacji.

Często używam tego narzędzia do analizy kaskadowej, która wizualizuje kolejność ładowania wszystkich zasobów na stronie. Może to być szczególnie przydatne, gdy próbujesz usprawnić krytyczne treści „powyżej części ekranu”. Na przykład, jeśli optymalizujesz pod kątem LCP, a największy element powyżej elementu strony widocznej na ekranie to obraz lub typografia, możesz zaimplementować wstępne wczytywanie największych plików graficznych i czcionek i sprawdzić, czy te wstępnie załadowane zasoby pojawiają się u góry kaskady .

Nie masz pewności, jak CWV wpłynie na Twoją witrynę, napisz do nas już dziś.