PageSpeed Insights – co to za test i do czego służy?
PageSpeed Insights
Jak sama nazwa sugeruje – PageSpeed Insights to zestaw danych określających szybkość dostępu do zasobów strony. Choć w istocie narzędzie od Google służące do pomiaru i wyodrębnienia informacji na temat prędkości ładowania się witryny. Oraz tych dotyczących jej wydajności.
Instrument ten zawiera szereg dyspozycji oraz dyrektyw, które pozwalają właścicielowi własnego adresu WWW zidentyfikować błędy. Lub inne istotne uchybienia odpowiedzialne za niezbyt przyjazne doświadczenie użytkownika.
Ujęte wyżej mankamenty, jak ukazuje poniższy artykuł: Czym jest User Experience i do czego służy?, w sposób znaczący ważą na konwersji. A także użyteczności samej strony ogólnie.
Niemniej, nie ograniczając się wyłącznie do UX, PageSpeed Insights zwraca również pakiet rekordów stojących w potencjalnej niezgodności z ogólną polityką Google. To gigantyczne amerykańskie przedsiębiorstwo, jak samo oficjalnie wskazuje, uznaje wyniki testu za potencjalny walor. Lub przeszkodę dla witryny przy zajęciu dobrej pozycji w wyszukiwarce.
Co w istocie oznacza, iż jeśli masz na sumieniu mniejsze lub większe aspekty techniczne niweczące płynność ładowania się strony, ten artykuł pozwoli zrozumieć założenia analizy PageSpeed Insights oraz przywrócić witrynę do stanu świetności.
Czym jest PageSpeed Insights i jak działa?
PageSpeed Insights to narzędzie, z którego funkcjonalnością możesz zaznajomić się, przechodząc bezpośrednio na stronę: testu prędkości.
Zobaczysz w tym miejscu pole do wpisania adresu URL, po którego wklejeniu oraz wybraniu przycisku: „Analizuj” uzyskasz możliwość przeprowadzenia faktycznego audytu.
Raport generowany jest w rozdzieleniu na dwie odrębne sekcje dotyczące wydajności strony dla urządzeń mobilnych oraz deskopowych. Gdzie jego wynik określany za pomocą 100 punktowej skali oznacza odpowiednio:
- 0-49 punktów – stan nieakceptowalny wymagający poprawy;
- 50-89 punktów – stan pośredni pomiędzy niedopuszczalnym rezultatem a w pełni zoptymalizowaną witryną;
- 90-100 punktów – efekt rozpatrywany przez Google jako miarodajny i pozytywny.
Bilans wyodrębnia niewyłącznie zbiór zagadnień, które w witrynie kuleją, ale i te spełniające założone wytyczne. Należy także dodać, iż do listy uchybień dorzucono informację, o tym, jak dany czynnik zoptymalizować. Co zasadniczo ułatwia prace na rzecz usprawnienia przestrzeni rzutujących na niewydajne działanie strony.
Praktyczne i użyteczne wskazówki, które w danym ujęciu pomogą, zawierają sekcje: „Możliwości” oraz: „Diagnostyka”.
Warto wiedzieć: Szybkość wczytywania się strony ma krytyczny wpływ na konwersję. A jak sugerują badania – już między 1 a 3 sekundą oczekiwania na załadowanie się zasobów, ryzyko opuszczenia witryny przez użytkownika wzrasta o 32%.
Co dokładnie bada test PageSpeed Insights?
Analiza PageSpeed Insights weryfikuje wydajność stron internetowych, bazując na 4 głównych parametrach, które pojawiają się jako pierwsze w wygenerowanym podsumowaniu.
Odnoszą się one do krytycznych aspektów strony, a w samym narzędziu są oznaczone jako:
- First Contentful Paint (FCP);
- First Input Delay (FID);
- Largest Contentful Paint (LCP);
- Cumulative Layout Shift (CLS).
Co odzwierciedlają te terminy oraz o czym świadczą, dowiesz się bezpośrednio z listy punktów uwzględnionych poniżej:
1. First Contentful Paint (FCP)
First Contentful Paint określa moment, w którym użytkownik po raz pierwszy widzi dowolny element witryny.
Na FCP ma również wpływ DOMContentLoaded determinujący chwilę załadowania się kodu HTML. A co za tym idzie – nie bez znaczenia będzie także czas reakcji serwera. Ten jest widoczny w PageSpeed Insights jako TTFB (Time to First Byte).
I aby pokonać problemy związane z tym aspektem należy:
- wyeliminować zasoby blokujące renderowanie;
- zoptymalizować kod HTML;
- zadbać o widoczność tymczasowych czcionek w czasie, gdy ładowane są właściwe;
- używać atrybutów: Prefetch, Preload, Prerender, Preconnect, DNS Prefetching względem najistotniejszych źródeł;
- zainwestować w dobry, a przede wszystkim szybki hosting i/lub wdrożyć rozwiązanie typu Content Delivery Network (CDN).
2. First Input Delay (FID)
First Input Delay mierzy czas, jaki musi upłynąć od wykonania przez odwiedzającego danej akcji (np. kliknięcia przycisku) do chwili uzyskania odpowiedzi.
Wskaźnik ten bada zatem tzw. interaktywność, która w ramach dobrego UX, powinna nastąpić w przeciągu 100 milisekundy.
Do FID wliczają się wyłącznie działania bezpośrednie, tzn. generujące autentyczne zdarzenie, np. wybór docelowego linku. Z pominięciem aspektów obejmujących scrollowanie strony, czy mające na celu powiększenie jakiegoś elementu.
Aby zachować dobry współczynnik FID należy:
- unikać wszelkich animacji wydłużających wykonywanie akcji;
- zrezygnować z generowania przycisków w technologii JavaScript;
- ograniczyć wpływ zewnętrznego kodu;
- zminimalizować pracę głównego wątku.
3. Largest Contentful Paint (LCP)
Largest Contentful Paint wskazuje, kiedy największy fragment zawartości witryny stanie się w pełni dostępny, a więc załaduje na stronie.
LCP zakłada, że najbardziej gabarytowa treść powinna być widoczna w przeciągu 2,5 sekundy. A do najczęstszych elementów wpadających w zbiór tego aspektu można zaliczyć grafiki, pliki video lub obszerny blok tekstowy.
Aby zadbać o dobre LCP należy:
- unikać sliderów, karuzel i animacji;
- skompresować zdjęcia oraz używać nowoczesnych formatów typu WebP;
- zoptymalizować CSS, JavaScript oraz czcionki internetowe;
- wykorzystać atrybut Preload, Precaching oraz tzw. Lazy loading zasobów.
4. Cumulative Layout Shift (CLS)
Cumulative Layout Shift determinuje chwilę, w której na stronie ustabilizowały się poszczególne układy. I nie występują przesunięcia obrazów, czy innych treści.
Wskaźnik ten jest mierzony w skali od 0 do 1. I, aby strona spełniła warunki dobrego UX, zaleca się, by czynnik ten nie wykroczył poza wartość 0,1.
Za niestabilność layoutu witryny odpowiadają zazwyczaj zaimplementowane materiały video w nieokreślonym odgórnie formacie lub reklamy dynamicznie zmieniające swój rozmiar.
Aby poradzić sobie z CLS należy:
- unikać sliderów, karuzel i animacji;
- sprecyzować rozmiary zdjęć oraz materiałów video.
Sprawdź najszybszy na rynku hosting WordPress oraz hosting Ecommerce.
Dlaczego dobry wynik testu jest ważny dla pozycjonowania?
Jak samo Google utrzymuje – wydajność i szybkość wczytywania się strony internetowej są brane pod uwagę przy determinowaniu pozycji w wyszukiwarce.
Choć należy tutaj uwzględnić, iż tyczy się to ujęcia, w którym wszystkie inne aspekty, biorąc po lupę konkurencję, odbijają pokrewny rezultat. Mówimy tu więc o sytuacji, gdzie witryny celują w zbliżony content, są podobnie ukierunkowane, pokrywają się we frazach kluczowych i prezentują zbieżny profil.
Wówczas domeną rankującą niżej okaże się właśnie ta z nieprzyjaźnie wolno ładującym się układem.
A co gorsza, jeśli w ogóle nie mamy do tego aspektu przekonania. I zostawiamy go takim, jakim funkcjonalność i zawartość naszej WWW go stworzyła, bounce rate (wskazujący zaangażowanie użytkownika i czas spędzony w obrębie witryny) z uwagi na dyskusyjny UX — będzie wysoki. Co dla Google może być wystarczająco sprawiedliwym sygnałem, aby uznać, iż nie jesteśmy dostatecznie user friendly. A co za tym idzie – należy taką domenę wykluczyć z wyników wyszukiwania.
Takie podejście do problematyki nie pozostawia właścicielom adresów WWW wiele wyboru. I obliguje do odpowiedniej optymalizacji zasobów decydujących o szybkości wczytywania się witryny.
Jak zadbać o dobry performance?
Jeśli doszliśmy już do wniosku, że warto temu tematowi zwrócić zasłużony honor. A w tym usprawnić adekwatne obszary, możemy to uczynić na 2 sposoby. W zależności od wyznawanej filozofii i posiadanych środków.
Pierwszy z nich jest najmniej skomplikowany i ogranicza się do delegowania zadania w ręce specjalisty, podczas gdy drugi wymaga już od nas stosownego działania.
I jeśli prowadzisz witrynę na WordPressie na serwerach JCHost.pl, jesteśmy w stanie zagwarantować optymalizację strony pod kątem testu, tak aby uzyskać wynik 80+.
Warto również zastosować się do poniższych wytycznych:
Jakie działania podjąć, aby przyspieszyć stronę?
Jeśli mamy zamysł przeprowadzić optymalizację samodzielnie trzeba zwrócić uwagę na kilka krytycznych aspektów, które mogą pojawić się w uzyskanym raporcie.
Do tych w szczególności należą:
- redukcja zasobów blokujących renderowanie – te niwelujemy poprzez asynchroniczne ładowanie strony oraz wygenerowanie krytycznego CSS.
- minimalizacja aktywności głównego wątku – polega na minifikacji CSS i JavaScript oraz usunięciu zbędnego kodu;
- skrócenie czasu reakcji serwera – wiąże się z inwestycją w szybki hosting oraz/lub zastosowanie CDN;
- odłożenie ładowania obrazów poza ekranem – używamy atrybutu: loading=„lazy”, aby opóźnić wczytywanie się zdjęć do chwili, gdy ich obecność będzie konieczna, tzn. użytkownik przewinie stronę w docelową przestrzeń;
- minifikacja CSS i JavaScript – polega na kompresji kodu, a więc zmniejszeniu jego wagi oraz rozmiaru.
- wyświetlanie obrazów w formatach nowej generacji – zalecane formaty to JPEG 2000, JPEG XR i WebP. Ten ostatni od niedawnej aktualizacji WordPressa do wersji 5.8 jest wspierany, w związku z czym nie ma potrzeby instalowania dodatkowego pluginu celem konwersji zdjęć z formatu PNG czy JPEG do WebP;
- zapewnienie widoczności tekstu podczas ładowania czcionek – aby dać użytkownikowi szansę zapoznania się z treścią witryny, zanim wczytają się docelowe fonty, używa się atrybutu: font-display: swap. Oraz implementuje za pomocą CSS;
- włączenie kompresji tekstu – udogodnienie stosowane, aby zmniejszyć wagę plików.
- skrócenie czasu wykonywania JavaScript – odnosi się do opóźnienia ładowania skryptu oraz ograniczenia jego wagi.
To oczywiście nie wszystkie punkty mające wpływ na szybkość ładowania się strony. Acz zdecydowanie te najczęściej występujące, których zoptymalizowanie nada witrynie oczekiwanej sprężystości.
PageSpeed Insights a urządzenia mobilne
Jak ukazują badania przeprowadzone w 2017 r. przez Google/SOASTA Research, ryzyko rezygnacji z odwiedzenia strony wzrasta wraz z wydłużającym się oczekiwaniem na dostęp do zawartości.
Współczynnik ten swoje apogeum osiąga już między 5 a 6 sekundą, gdzie skłonność internauty do rozstania się z chęcią sięgnięcia po wyszukiwane informacje stanowi równowartość 90-100%.
A ponieważ sposób korzystania z zasobów witryny na urządzeniach mobilnych jest ciut inny, aniżeli w przypadku komputerów (konieczność przybliżania ekranu, przesuwania treści w lewo i w prawo, niepulsujące w oczach (małe) czcionki), posiadacze telefonów są znacznie mniej tolerancyjni dla nienależycie wyświetlającej się zawartości.
I o ile do września 2020 r. można było uznać, iż organizacja szybkich mobilnych witryn to nadal mrzonka. Tak po wprowadzeniu przez Google pierwszeństwa indeksacji wersji strony na telefon przed tą skierowaną do użytkowników komputerów (w odpowiedzi na rosnący udział smartfonów w ruchu internetowym), należy zakładać, że dynamicznie startująca odsłona mobilna to obecnie konieczność.
Tę, jeśli korzystasz z usług hostingowych JCHOST, masz z góry pod kontrolą, dzięki m.in. szybkim dyskom SSD NVME, o których była mowa tutaj: Dyski SSD NVMe PCIe 4.0/Gen4 – czym są i jak działają?. A które wnoszą ten pożądany komfort posiadania 80+ w teście PageSpeed Insights dla urządzeń mobilnych.
Warto więc wykorzystać tę sposobność i skupić się na innych krytycznych czynnikach decydujących o mocnym UX.
Podsumowanie
PageSpeed Insights to narzędzie, które może pomóc witrynie odzyskać wydajność. A dzięki temu podnieść współczynnik konwersji, który na fali wciąż rosnącego udziału posiadaczy smartfonów w ruchu internetowym i dyrektyw wdrożonych przez Google staje się mocno zależny od prędkości wczytywanych zasobów.
Co w ujęciu szczególnym sugeruje, iż jest to element kluczowy, który odpowiada niewyłącznie za solidny UX, ale i zajmowaną pozycję w wyszukiwarce.
Odbieramy telefony, odpisujemy na maile, nie ukrywamy kosztów, a dodatkowo oferujemy najszybsze pakiety hostingowe na rynku. Uważasz, że to zwroty marketingowe? Sprawdź sam/a!
Jeśli nie będziesz zadowolony/a, zwrócimy Ci pieniądze.
Twoje strony i sklepy przeniesiemy za darmo!
Jeżeli masz jakiekolwiek pytania, skontaktuj się z nami! Kliknij tutaj.
Chcesz dowiedzieć się o nas trochę więcej? Przejdź na stronę JCHost.pl.