PageSpeed Insights – jak skrócić czas ładowania się strony?
![](./userfiles/baza_wiedzy/683/169623338925065300.jpg)
![PageSpeed Insights](./userfiles/baza_wiedzy/683/169623338925065300.jpg)
Spis treści:
- Szybkość wczytywania się strony internetowej
- Co to jest Google PageSpeed Insights?
- Jak sprawdzić prędkość wczytywania strony w PageSpeed Insights?
- Jakie są funkcje narzędzia PageSpeed Insights?
- Jaki powinien być czas wczytywania się strony?
- Na czym polega optymalizacja szybkości ładowania się strony? Jakie czynniki wpływają na czas wczytywania?
- Szybsze ładowanie się strony to więcej pieniędzy. Dużo więcej pieniędzy
Szybkość wczytywania się strony internetowej
Nie ma znaczenia, w jakim obszarze działasz. Jeśli czas ładowania się serwisu nie jest satysfakcjonujący, w pierwszej kolejności należy skupić się na optymalizacji tego parametru. W innym przypadku może się okazać, że współczynnik odrzuceń nigdy nie przestanie spadać…
Według badań strony ładujące się w 5 sekund mają średnio o 70% dłuższe sesje niż witryny ładujące się w 19 sekund. To ogromna różnica.
Zadowolenie klientów z szybkiego ładowania się strony to jedno, obniżenie jej pozycji w wynikach wyszukiwania to drugie. Warto mieć na względzie, że wolne wczytywanie się strony www może mieć bezpośredni wpływ na konwersję oraz pozycję serwisu w rankingach wyszukiwarek.
Aby dobrze zrozumieć wpływ wolnego czasu ładowania, należy zrozumieć, co oznacza szybkość witryny, a czym jest szybkość konkretnej strony. Page speed to czas liczony na załadowanie się pojedynczej strony w witrynie. Szybkością witryny będziemy natomiast nazywać średnią szybkość ładowania się stron dla całego serwisu.
Rozróżnienie tych dwóch zagadnień jest kluczowe do tego, by na etapie wdrażania optymalizacji nie tylko wyciągnąć odpowiednie wnioski, ale i wybrać konkretne, dobre rozwiązania. Bo nie zawsze problem leży po stronie całej zawartości www. Niekiedy problematyczna jest wyłącznie jedna z podstron.
Szybkość ładowania ma ogromne znaczenie dla osiągnięcia pożądanych wyników sprzedażowych i widoczności konkretnej strony. W praktyce page speed wpływa na wszystkie kluczowe aspekty, bo i na pozycje, i na zadowolenie, ale również zaangażowanie potencjalnych użytkowników. Trzeba pamiętać, że szybkość ładowania się strony aktualnie jest głównym czynnikiem rankingowym Google’a.
Współcześni użytkownicy Internetu nie poszukują DOBRYCH rozwiązań. To już nie wystarczy. Witryny, które odwiedzają, mają być PERFEKCYJNE, tj. mają być perfekcyjnie zoptymalizowane i prezentować kluczowe treści zawsze wtedy, gdy userzy zadają konkretne zapytania. Jako właściciel serwisu masz dosłownie 5 sekund (lub mniej), by zainteresować odbiorcę zawartością podstrony. Po tym czasie użytkownik opuści Twoją witrynę w poszukiwaniu lepszego rozwiązania.
Szacuje się, że nawet 53% użytkowników odwiedzających stronę może ją porzucić, jeśli wczytywanie się witryny trwa dłużej niż 3 sekundy. A nawet 79% osób robiących zakupy online, które doświadczyły problemów z ładowaniem się strony, może już nie wrócić na tę witrynę, a co za tym idzie – uda się do konkurencji i to tam zostawi swoje pieniądze. W dobie pandemii i coraz większej rangi zakupów online – żaden serwis e-commerce nie powinien sobie na to pozwolić.
Pamiętaj, że liczba odsłon wzrasta wraz z szybkością ładowania się stron. To nie wróżby, lecz słuszna matematyka, zgodnie z którą wiele firm odzyskało swoje utracone dochody. Czy wiesz, że strony, które nie ładują się w stosunkowo krótkim czasie, stresują użytkowników? Dla wielu klientów takie doświadczenie jest wyjątkowo negatywne. I to właśnie dlatego czas ładowania się www należy optymalizować, analizować i poprawiać. A służą do tego odpowiednie narzędzia!
Co to jest Google PageSpeed Insights?
Narzędzi do testowania szybkości strony jest sporo. Fachowcy w tej dziedzinie proponują jednak, by w pierwszej kolejności korzystać z tego, co pochodzi od firmy Google, czyli profesjonalnego narzędzia Google PageSpeed Insights. Na początek na pewno wystarczy, a co ważne, zapewni dostęp do wiarygodnych informacji.
W tym miejscu warto jednak wspomnieć również o narzędziu Lighthouse, które znajduje się w przeglądarkach z silnikiem Chromium. Dane z PageSpeed Insight są bez wątpienia pomocne i należy je analizować, ale bardziej w kontekście przydatnych wskazówek do optymalizacji kodu niż najważniejszego wyznacznika poprawności działania strony.
Przy analizie warto też sugerować się danymi z CrUX (UX). To raport, który zawiera dane na temat odbiorców korzystających ze strony. Co ważne, bazuje on na rzeczywistych wrażeniach użytkowników, którzy mają włączone raportowanie statystyk użytkowania.
Inne narzędzia (na wszelki wypadek) pomagające zwiększyć szybkość strony to m.in.:
Jak sprawdzić prędkość wczytywania strony w PageSpeed Insights?
Tymczasem narzędzie Google PageSpeed Insights jest zupełnie darmowe – znajdziesz je tutaj. Chcesz zbadać konkretną stronę internetową pod kątem szybkości ładowania? Wklej jej adres URL i kliknij „Analizuj”. To na razie tyle.
Po załadowaniu się wszystkich danych otrzymasz ocenę w skali od 0 do 100 oraz wiele przydatnych informacji i rad. Dowiesz się, które obszary powinieneś poprawić i jak to zrobić, by uzyskać lepszy wynik. Tzw. dobre praktyki mają sprawić, by serwis stał się zdecydowanie bardziej przyjazny zarówno dla użytkowników, jak i dla robotów Google’a.
W narzędziu można otrzymać informację pogrupowane względem odpowiednich danych, czyli:
- dane laboratoryjne,
- możliwości – elementy do poprawy,
- diagnostyka – zalecenia,
- zaliczone audyty – elementy, do których funkcjonowania nie można mieć zastrzeżeń.
Podczas analizy sprawdza się: wykorzystanie pamięci podręcznej wyszukiwarki, kompresje multimediów, CSS i HTML, kod JavaScript, czas odpowiedzi serwera oraz priorytet dla widocznej treści.
Na podstawie tych informacji dowiesz się też, jak do tej pory zachowywali się użytkownicy witryny i na jakie problemy napotkali. Dane przedstawione są zawsze w dwóch widokach. Dla urządzeń mobilnych oraz komputerów stacjonarnych.
Google PageSpeed Insights to bez wątpienia przydatne narzędzie, ale… szkoda czasu, by śrubować wynik i szukać sposobów na zbliżenie się do 100 – lepiej przeznaczyć go na wdrożenie zaleceń platformy, które wraz z wynikiem otrzymujemy. To nie wynik 100/100 jest tak naprawdę ważny – Internet pełny jest przykładów, gdzie witryny mają średni czas ładowania ekstremalnie niski, a wynik PSI znacząco odbiega od górnej granicy. Dlaczego? Pamiętajmy, po co optymalizujemy witrynę, dlaczego sprawdzamy wytyczne Google’a i próbujemy się do nich dostosować. Robimy to dla klienta, to on jest (a przynajmniej powinien być) dla nas najważniejszy. A przecież nieistotny jest dla niego Twój wynik Google PageSpeed Insights, lecz możliwość jak najszybszego przeglądania Twoich treści. Tak też powinniśmy traktować to narzędzie – jako wskazówkę, a nie cel sam w sobie, wykorzystać je do znalezienia problematycznych miejsc w witrynie, które należy zoptymalizować i dostarczyć korzyść odbiorcy.
Michał Kamiński – specjalista ds. SEO i content marketingu
Jakie są funkcje narzędzia PageSpeed Insights?
Dane przedstawione w narzędziu PageSpeed Insights, ale zebrane z CrUX (generowane na bazie odczytów prawdziwych użytkowników), umieszczone są w czterech metrykach, których wynik w podsumowaniu jest zaprezentowany w formie wykresu paskowego.
Do najważniejszych metryk należą:
- Pierwsze wyrenderowanie treści (FCP) - prezentuje, jak długo przeglądarka generuje pierwszy kawałek DOM po kliknięciu w link do badanej strony bądź po wpisaniu jej w pasek adresu.
- Opóźnienie od pierwszej interakcji (FID) - pokazuje, jak długo użytkownik musi czekać na możliwość interakcji po załadowaniu pierwszych obiektów DOM.
- Największe wyrenderowanie treści (LCP) - z tego pomiaru można dowiedzieć się, ile czasu zajmuje pojawienie się największego elementu DOM u góry strony.
- Skumulowane przesunięcie układu (CLS) - to wskaźnik, który służy do określenia stabilności layoutu strony. Mowa tutaj przede wszystkim o przesunięciach układu. Google, wskazując na ten parametr, chce uniknąć nieumyślnego klikania w linki przez użytkowników.
Jaki powinien być czas wczytywania się strony?
Jak to w przypadku danych liczbowych bywa, trudno odpowiedzieć jednoznacznie. Dobrze, jeśli czas ten nie przekracza 5 sekund, a najlepiej, jeśli wynosi mniej niż 3 sekundy.
A jak jest z urządzeniami mobilnymi? Oto średnie wartości podawane przez Google:
- Średni sindeks szybkości < 3 s
- Średni czas do pierwszego bajta <1,3 s
- Średnia liczba żądań < 50
- Średnia waga strony < 500 KB
Na czym polega optymalizacja szybkości ładowania się strony? Jakie czynniki wpływają na czas wczytywania?
Idealnie byłoby uzyskać 100% w ocenie szybkości wczytywania się strony i spać spokojnie. Aby jednak narzędzie mogło wskazać tak wysoki wynik, konieczna jest optymalizacja konkretnych parametrów. Wykonaj test szybkości www, a przekonasz się, nad czym musisz popracować.
Jak najszybciej osiągnąć wysoki rezultat? Gdy tworzy się nową stronę, od podstaw. Można wówczas analizować wyniki na bieżąco i do razu wprowadzać poprawki.
W przypadku rozbudowanych witryn, mających już swoją historię, wymagania względem czasu optymalizacji i samych wdrożeń są większe. Poprawa wyniku jest możliwa za pomocą realnego przyspieszania procesów wczytywania i renderowania stron internetowych w przeglądarkach. Aby taka optymalizacja miała sens, należy:
- Odinstalować dodatkowe nieużywane funkcjonalności, np. przez wtyczki czy biblioteki JavaScript.
- Zastosować odpowiednie formaty graficzne. Można tutaj zastosować podmianę wszystkich grafik z PNG i JPG/JPEG na WebP.
- Zmniejszyć rozmiar obrazów. Zdjęcia i grafiki rastrowe nie powinny być większy niż rozmiar wyrenderowanego komponentu <img> na www. Poza tym pliki graficzne nie powinny ważyć więcej niż 200 KB. Do zmniejszania można użyć chociażby prostego narzędzia online TinyPNG, czy po prostu funkcji kompresowania, która znajduje się w większości edytorów grafiki.
Jeśli strona oparta jest na systemie WordPress, wystarczy np. usunąć nieużywane wtyczki. Jednak największą poprawę zauważymy w momencie uporządkowania obrazów. Zdjęcia, zwłaszcza te o dużej rozdzielczości, mogą ważyć nawet kilka megabajtów, co ma ogromny wpływ na czas ładowania się strony. Proponuję używać miniatur zdjęć, a duże rozdzielczości ładować tam, gdzie to naprawdę konieczne. Ponadto warto przekonwertować obrazy lub postarać się o pliki wektorowe, które są najlepszym sposobem na skrócenie czasu ładowania się strony internetowej.
Wojciech Burczyk – Front-End Developer, ONION MEDIA
- Przyjąć technikę lazy load, czyli wolnego ładowania. Grafiki położone poniżej 1600 pikseli powinny być ładowane z opóźnieniem, tzn. po określonym czasie od pełnego wczytania się www albo po przewinięciu podstrony w dół.
- Włączyć kompresję zasobów tekstowych – GZIP lub deflate dla zasobów HTML, CSS, JS i XML. Zmniejszy to rozmiar sumaryczny całej witryny, a co za tym idzie – możliwe będzie szybsze wczytywanie się podstrony odwiedzanej na samym początku sesji.
- Zminimalizować kod CSS i JS, czyli usunąć nadmiarowe znaki w kodzie. Usuń tzw. białe znaki, przecinki, komentarze itp.
- Usunąć nieużywany kod CSS i JavaScript, czyli np. nieużywane instrukcje CSS lub niepotrzebne pliki ze skryptami JavaScript.
- Wykorzystać zasoby pamięci podręcznej. Zadbaj o to, by buforowanie przeglądarki bazowało na zapisie i ponownym wykorzystaniu plików przy każdorazowym powrocie użytkownika na stronę www. Jeśli masz serwis e-commerce, buforowanie ustaw wyłącznie na sekcje logo, style i CSS.
- Skrócić czas reakcji serwera (TTFB). Im mniejszy czas TTFB, tym lepiej.
- Unikać nadmiaru przekierowań w obrębie www. Nie trzeba całkowicie zrezygnować z przekierowań 301. Należy jednak weryfikować, czy na konkretnej stronie nie ma tzw. łańcucha przekierowań, który składa się z przekierowań pośrednich i wpływa na spowalnianie działania tego obszaru serwisu.
- Pamiętać o aktualizacji wersji PHP.
Warto pamiętać, że składniową wpływająca na szybkość serwisu jest też wersja PHP. Najnowsze wersje wpływają na czas ładowania się stron internetowych (m.in. tych opartych na WordPressie) przez możliwość obsługi większej ilości żądań na linii serwer-witryna. Systematyczne pilnowanie oraz aktualizacja wersji PHP wpływa również na sferę bezpieczeństwa witryny, dlatego tak ważne jest to, aby o tym pamiętać.
Wojciech Kamiński – specjalista ds. SEO, Digital Hill
- Postawić na sprawdzony hosting. Pamiętaj, że czas odpowiedzi serwera nie powinien być dłuższy niż 0,2 s (to wytyczne Google’a). Serwer musi odpowiadać temu, jak rozbudowany jest Twój serwis i jaki ruch na nim panuje. Czasami więc warto postawić na dużego dostawcę, niż szukać oszczędności, które w konsekwencji okażą się zgubne.
Jeśli skorzystałeś z powyższych wskazówek, koniecznie daj znać w komentarzu, jakie efekty udało Ci się osiągnąć.
Szybsze ładowanie się strony to więcej pieniędzy. Dużo więcej pieniędzy
Krótki czas ładowania witryny poprawia współczynnik UX, czyli doświadczenia usera. Każdy potencjalny użytkownik będzie złapany na haczyk. Zwrócisz i zatrzymasz jego uwagę już podczas pierwszej wizyty, a tym samym zachęcisz go do powrotu. Jeśli masz serwis e-commerce, będzie miało to odzwierciedlenie w sprzedaży.
Pamiętaj, że w przypadku dobrze zoptymalizowanej strony pod kątem szybkości wyświetlania roboty Google’a mogą sprawniej poruszać się po serwisie, dzięki czemu szybciej indeksują konkretny adres www. A stąd już niedaleko, by znaleźć się w wynikach wyszukiwania w top 10.
Nie miej złudzeń. Długie ładowanie się www to niski współczynnik konwersji, chociażby przy płatnych kampaniach reklamowych. Co prawda istnieje szansa, że użytkownicy klikną określoną reklamę, ale zamkną taką witrynę, zanim ta zdąży się całkowicie załadować. Nie chcesz chyba generować kosztów na kolejne budżety reklamowe, które nic nie dają?
Znaczenie szybkości ładowania się strony doskonale obrazuje symulacja, którą przeprowadził Amazon. Według szacunków firma z Seattle mogłaby stracić nawet 1,6 mld dolarów, gdyby zanotowała spadek czasu wczytywania się strony o ledwie 1 sekundę!
Finalnie nie chodzi jedynie o symulacje i statystyki. Trudno zbudować wizerunek solidnej marki, jeśli każemy odbiorcom czekać zbyt długo na treści, których pożądają. Nie będą chcieli korzystać z takich serwisów ani też polecać ich innym użytkownikom. Jako właściciel witryny musisz być skuteczny i szybki. Inaczej koło nosa mogą przejść Ci naprawdę duże pieniądze.