Analiza Coverage w Chrome DevTools – identyfikacja nieużywanego kodu

Analiza Coverage w Chrome DevTools – identyfikacja nieużywanego kodu

Nie od dziś wiadomo, że sygnały behawioralne związane z zachowaniem użytkownika w witrynie mają wpływ na jej ranking w wynikach wyszukiwania. Celem Google jest zapewnienie internautom przyjemnego korzystania z wyszukiwarki i dostarczenie w odpowiedzi na ich zapytanie jak najtrafniejszych stron wysokiej jakości. Potwierdzają to chociażby liczne aktualizacje algorytmów Google. Na przestrzeni lat pojawiały się nowe kryteria wpływające na pozycję witryny w wynikach wyszukiwania, związane m.in. z szybkością ładowania strony czy dostosowaniem jej do urządzeń mobilnych. Wkrótce czekają nas kolejne zmiany – sygnały związane z postrzeganiem strony przez użytkowników będą zyskiwały na znaczeniu.

Nadchodząca w maju 2021 aktualizacja Google będzie uwzględniać podstawowe wskaźniki internetowe Core Web Vitals jako nowy czynnik rankingowy. Co kryje się pod tym terminem? Jak zmierzyć jakość i wydajność serwisu? O tym w dalszej części artykułu.

Poznaj kluczowe wskaźniki Core Web Vitals

W kontekście nadchodzących zmian jakość strony określana jest poprzez wrażenia użytkowników, jakie towarzyszą im podczas kontaktu z witryną internetową. Dotychczas jakość serwisu oceniana była na podstawie różnych metryk, takich jak czas ładowania, responsywność czy stabilność układu. W maju 2021 wśród tych wskaźników pojawią się także nowe metryki określone jako Core Web Vitals.

Związane one będą z szybkością, responsywnością i stabilnością wizualną witryny. Jednocześnie Google informuje o nieustannych pracach nad pozyskiwaniem większej ilości danych dotyczących jakości strony. W przyszłości możemy spodziewać się zatem pojawienia nowych metryk związanych z jakością strony, których wartość będzie brana pod uwagę przez algorytm Google.

Core Web Vitals to zestaw podstawowych wskaźników internetowych zorientowanych na użytkownika, które pomagają w ocenie jakości korzystania z witryny. Obecny zestaw składa się z trzech wskaźników:

  1. LCP (Largest Contentful Paint) – metryka określająca czas ładowania głównego elementu strony. Mierzona jest od rozpoczęcia ładowania witryny do wyświetlenia największego elementu (np. wideo, grafika, blok tekstu) znajdującego się w danym viewporcie. Aby zapewnić dobre wrażenia użytkownika, wartość tego wskaźnika powinna wynosić poniżej 2,5 sekundy.

  2. FID (First Input Delay) – wskaźnik dotyczący interaktywności i szybkości reakcji serwisu. Wartość tej metryki wskazuje na czas, jaki upłynął od pierwszej interakcji użytkownika ze stroną (np. kliknięcie przycisku) do czasu, gdy przeglądarka jest w stanie odpowiedzieć na tę interakcję. Wartość tego wskaźnika nie powinna przekraczać 100 milisekund.

  3. CLS (Cumulative Layout Shift) – metryka służąca do pomiaru stabilności wizualnej, czyli zmian układu i przesunięcia treści podczas ładowania witryny. Przesunięcie treści może wywoływać dodatkowe ładowanie elementów strony, np. grafik lub zmianę formatowania. Takie nieoczekiwane zmiany układu mogą irytować użytkownika, dlatego warto się ich wystrzegać. Wartość wskaźnika CLS powinna wynosić poniżej 0,1.

Każdy z tych wskaźników mierzy inny aspekt doświadczenia użytkownika. Każdy ma także inne progi, które klasyfikują wydajność jako dobrą, wymagającą poprawy lub słabą. Dla Google priorytetem staje się zapewnienie użytkownikom doskonałych doświadczeń w sieci, stąd właśnie inicjatywa Core Web Vitals, która dostarcza ujednolicone wskazówki dotyczące sygnałów jakości.

Narzędzia do pomiaru Core Web Vitals

Istnieje szereg narzędzi, które pozwalają zebrać dane na temat wartości wskaźników Core Web Vitals dla Twojej witryny. Pomiar możemy wykonać przy wykorzystaniu narzędzi, które dostarczają dane pochodzące zarówno ze środowiska rzeczywistego, jak i laboratoryjnego.

Narzędzia laboratoryjne umożliwiają sprawdzenie, jak potencjalny użytkownik prawdopodobnie będzie korzystał ze strony. Test strony w kontrolowanym środowisku laboratoryjnym możemy przeprowadzić wykorzystując np. narzędzie Chrome DevTools, o którym opowiem nieco więcej w dalszej części artykułu.

Analizę jakości strony najlepiej jednak rozpocząć od zapoznania się z danymi pochodzącymi ze środowiska rzeczywistego – są to tak zwane dane terenowe, rejestrujące wydajność serwisu podczas korzystania z niego przez rzeczywistych użytkowników. W poradniku WebDev odnajdziemy listę narzędzi rekomendowanych przez Google do analizy Core Web Vitals.

Podstawowym źródłem, które pozwala sprawdzić, jak rzeczywisty użytkownik doświadcza Twojej witryny, jest Chrome UX Report. Zawiera on dane na temat wartości kluczowych wskaźników internetowych, zebrane od użytkowników, którzy zgodzili się na synchronizację historii przeglądania. Jednym ze sposobów prezentacji i wglądu do tych danych jest skonfigurowanie dashboardu w Google Data Studio.

Kolejne narzędzia, które warto przeanalizować, to Google Search Console oraz Lighthouse. Google Search Console jest pierwszym narzędziem, od którego warto rozpocząć analizę pod kątem optymalizacji wartości metryk Core Web Vitals. Dzięki raportom dostępnym w sekcji “Ulepszenia” możemy sprawdzić skuteczność dla poszczególnych typów podstron w serwisie.

Lighthouse to z kolei narzędzie open source stworzone przez Google, które służy do wykonywania audytów m.in. pod kątem wydajności i jakości stron oraz aplikacji internetowych. Po uruchomieniu narzędzia przeprowadzana jest seria testów na stronie i zostaje wygenerowany raport. Przedstawia on wartości, jakie przyjmują poszczególne metryki Core Web Vitals dla testowanej podstrony.

Kolejne narzędzie, Page Speed Insight, jest bardzo podobne do Lighthouse. Z PSI możemy zbadać dowolny adres URL dla wersji mobilnej lub desktop i sprawdzić, jakie wartości wskaźników Core Web Vitals otrzymuje dana strona.

Na koniec warto wspomnieć o Core Web Vitals Extension – prostym rozszerzeniu do przeglądarki Chrome, które pozwala na szybkie sprawdzenie parametrów dla wybranej podstrony. Mierzy ono trzy wskaźniki Core Web Vitals w czasie rzeczywistym, jednak w celu dokonania głębszej analizy i odnalezienia przyczyn niskich wartości konieczne będzie posłużenie się dodatkowymi narzędziami.

Analiza wydajności w Chrome DevTools

Nieocenionym narzędziem, które pozwala lepiej zrozumieć problem wydajności strony i wartości Core Web Vitals, jest Chrome DevTools. Liczne funkcjonalności konsoli pozwalają zagłębić się w analizę strony.

Szczególnie warto skupić się na zakładce Network, gdzie odnajdziemy zestawienie wszystkich zasobów, jakie otrzymujemy z serwera. Znajdziemy tam informacje na temat kodu odpowiedzi, typu i rozmiaru przesyłanego pliku, czasu odpowiedzi i dostarczenia zasobu oraz wiele innych danych. Pozwala to zidentyfikować elementy, które są problematyczne i wydłużają czas ładowania strony.

Kolejną niezwykle pomocną funkcję dostarcza opcja Coverage. Pozwala ona wykryć, które pliki lub fragmenty kodu ładowane są niepotrzebnie, gdyż nie są wykorzystywane na stronie. Aby z niej skorzystać, należy wejść w opcję konsoli, wybrać zakładkę “More Tools” i kliknąć “Coverage”.

W efekcie uzyskamy zestawienie, przedstawiające źródło, z którego pobierany jest kod, typ pliku oraz to, co nas najbardziej interesuje – wielkość pliku i liczbę bajtów, które nie zostały wykorzystane na analizowanej podstronie. Po kliknięciu w konkretne źródło wyświetlona zostanie jego zawartość, a fragmenty kodu oznaczone na czerwono to te, które nie są używane.

Kolejną przydatną zakładką w narzędziu Chrome DevTools jest Performance. Oprócz wartości wskaźników Core Web Vitals znajdziemy w niej informacje o występowaniu nadmiarowego kodu JavaScript. Sytuacja ta występuje, gdy ładowanych i wykonywanych jest znacznie więcej zasobów JS niż użytkownik może w danym momencie potrzebować. Aby zidentyfikować taki nadmiarowy kod, należy spojrzeć na tzw. “długie zadania” oznaczone na wykresie jako “Long Task”. Są to okresy wykonywania JavaScript, podczas których użytkownicy mogą uznać, że interfejs użytkownika nie odpowiada.

Do procesu optymalizacji powinniśmy podejść w sposób holistyczny, skupiając się na poprawie rzeczywistej wydajności witryny, a nie tylko poszczególnych metryk. Kluczowe jest zadbanie o takie czynniki, jak odpowiednia optymalizacja grafik, zastosowanie techniki lazy load, optymalizacja czasu odpowiedzi serwera, minifikacja plików JS i CSS czy eliminacja nieużywanego kodu.

Wnioski

Nadchodząca aktualizacja Core Web Vitals jest jednym z większych updatów algorytmu wprowadzanych przez Google. Na ten moment nie wiemy, w jakim stopniu wpłynie ona na pozycje stron w wynikach wyszukiwania. Możemy jednak dostrzec, w jakim kierunku zmierza Google – skoncentrowanie się na użytkowniku i jego potrzebach jest motywem przewodnim dokonywanych aktualizacji.

Algorytm jest nieustannie rozwijany poprzez uwzględnianie coraz to nowszych sygnałów związanych z User Experience. Kluczem do osiągnięcia długoterminowego sukcesu każdej witryny w sieci będzie zatem zadbanie o jak najlepsze doświadczenia użytkowników związane z korzystaniem ze strony.

Narzędzia, takie jak Chrome DevTools, Lighthouse czy Page Speed Insight, dostarczają cennych informacji, które pozwolą zidentyfikować obszary wymagające poprawy wydajności i optymalizacji pod kątem Core Web Vitals. Regularne monitorowanie tych wskaźników i wdrażanie rekomendowanych zmian to klucz do utrzymania wysokiej pozycji Twojej strony w wynikach wyszukiwania Google.

Stronyinternetowe.uk to wiodąca agencja, która specjalizuje się w tworzeniu wydajnych i responsywnych stron internetowych. Nasi eksperci pomogą Ci zoptymalizować Twoją witrynę pod kątem Core Web Vitals i zapewnić użytkownikom najlepsze doświadczenia podczas korzystania z niej.

Nasze inne poradniki

Chcemy być Twoim partnerem w tworzeniu strony internetowej, a Ty chcesz mieć profesjonalnie zaprojektowaną witrynę?

Zrobimy to dla Ciebie!