Co to jest Google PageSpeed Insights?

PageSpeed to darmowe narzędzie od Google, dzięki któremu możemy przeanalizować m.in. szybkość wczytywania strony internetowej. Przekazuje nam raport na temat witryny. Znajdują się tam informacje dotyczące szybkości ładowania wszystkich zasobów strony oraz o czasie ładowania się pierwszego widoku. Ma to ogromny wpływ na punktację tak samo jak Ogólny wynik strony jest pokazywany w stupunktowej skali. Wynik, który jest uznawany za dobry musi mieć przynajmniej 90 punktów.

W raporcie zawarte są szczegółowe dane na temat ładowania poszczególnych plików, co daje nam możliwość skrócenia ogólnego czasu wczytania strony. Informacje te są bardzo przydatne dla deweloperów ponieważ dzięki nim wiedzą co należy poprawić w witrynie.

Optymalizacja strony pod kątem narzędzia Google Pagespeed

Jak działa PageSpeed Insights?

Aby wygenerować raport należy tylko podać odpowiedni adres URL a cała aplikacja wykonuje szereg zadań i procesów aby dostarczyć nam wynik. Rezultat jest zależny od czynników takich jak szybkość połączenia z serwerem, czas wykonywania skryptów javascript i wiele innych.

PageSpeed Insights dzieli dane na dwie kategorie. Pierwsza z nich to dane laboratoryjne (Lab Data), czyli te na podstawie jednego połączenia, które zostało wykonane.

Field Data to dane zebrane od wielu użytkowników na podstawie raportu na temat użytkowania Chrome (Chrome User Experience Report).

Jednakże Google nie zawsze dysponuje tymi danymi i z reguły używa Lab Data.

Kolejnymi czynnikami wpływającymi na końcową ocenę są:

Piewsze wyrenderowane treści (First Contentful Paint) – jest to czas po którym użytkownik po raz pierwszy widzi jakąś treść.
Pierwsze wyrenderowanie elementu znaczącego (First Meaningful Paint) – moment w którym użytkownik może coś zrozumieć, np. przeczytać tekst.
Indeks szybkości (Speed index) – mierzy jak szybko elementy strony zaczynają się pojawiać
CPU bezczynny po raz pierwszy (First CPU Idle) – moment w którym strona jest załadowana na tyle by obsłużyć pierwszą interakcję użytkownika
Czas do pełnej interaktywności (Time to Interactive) – czas do którego załadowała się w pełni i wszystkie jej funkcjonalności działają poprawnie i są gotowe do użycia
Maksymalne potencjalne opóźnienie przy 1 działaniu (Max Potential First Input Delay) – opóźnienie odpowiedzi przez przeglądarkę po interakcji użytkownika. Wynik ten nie jest uwzględniany do końcowego wyniku.

Narzędzie to tworzy również audyt, w którym pokazuje nam co można zrobić, by nasza strona była jeszcze szybsza i przystępniejsza dla użytkownika końcowego. Dzieli go na trzy sekcje:

Możliwości – mówią nam jak możemy poprawić szybkość strony
Diagnostyka – sugeruje nam dodatkowe informacje na temat dobrych praktyk stosowanych przez twórców stron internetowych
Zaliczone audyty – zaznacza, które audyty pomyślnie zaliczone przez PageSpeed Insights

Dzięki temu posiadamy wiedzę, gdzie dokładnie strona może być ulepszona. Te wszystkie informacje pomogą nam zoptymalizować stronę w najlepszy sposób. My jako twórcy chętnie korzystamy z tego narzędzia i zawsze celujemy w najwyższy wynik.

Jak zoptymalizować stronę pod PageSpeed Insights?

Pierwszym czynnikiem jest szybkość. Stronę może spowolnić wiele rzeczy, np. zbyt duża ilość wtyczek, zbyt dużo zbędnego kodu a nawet nienajlepsze usługi hostingowe. Warto poświęcić trochę czasu na usunięcie niepotrzebnych plików. Pracując z WordPress’em, tak jak my, warto wybrać także odpowiedni motyw dla strony. Nie chodzi tylko o wygląd lecz także o jego optymalizację. Nasi specjaliści wykonują indywidualnie dostosowane motywy, które w testach PageSpeed Insights osiągają bardzo wysokie wyniki.

Aby zadbać o szybkość ładowania strony, należy także wykonać optymalizację zdjęć. Ich duża rozdzielczość będzie obciążała stronę, powodując wolniejsze ładowanie. Z tym wiąże się kolejny problem. Rozmiar wyświetlania może różnić się od faktycznego rozmiaru obrazu, co opóźnia wczytanie witryny.

Im większy rozmiar zdjęcia tym dłużej będzie się on pobierał. W takiej sytuacji warto zmniejszyć ich rozmiar w pamięci komputera. Jeżeli do budowania strony używany jest WordPress, można użyć jednej z wtyczek i problem mamy z głowy. Wykorzystanie najnowszych formatów zdjęć takich jak .webp, również może przyspieszyć stronę. Warto wspomnieć, że używanie tego lub innych formatów nie ma żadnego wpływu na SEO.

Kolejnym ważnym zagadnieniem jest rozdzielczość obrazu, który jest wyświetlany przez przeglądarkę. Wyobraź sobie stronę gdzie znajduje się kilka mniejszych zdjęć, powiedzmy 400×200 pikseli. Przeglądarka wyświetla nam obraz o podanych wcześniej rozmiarach lecz pobierany jest oryginalny, który może być nawet kilka razy większy. W ten sposób tracimy czas na pobieranie za dużego zdjęcia co jest mało optymalne. Nasza firma korzysta z autorskiego pomysłu, który sprawdza się rewelacyjnie. Poprzez wtyczkę w WordPress’ie tworzymy wiele kopii obrazu o różnych rozdzielczościach a nasza funkcja dobiera za nas zdjęcie do pobrania, które jest najbardziej zbliżone rozmiarami do tego wyświetlanego na stronie.

Wyświetlane obrazy, można także załadować dopiero wtedy gdy użytkownik przewinie stronę i je zobaczy. Pomaga to skrócić czas ładowania oraz pozwala przeglądarce skupić się na ładowaniu pierwszego widoku strony.

Napisany kod oraz jego struktura również ma znaczenie dla ładowania witryny. Struktura HTML dyktuje przeglądarce jak strona ma być załadowana ( więcej o tym przeczytasz w artykule Czym jest HTML i CSS? ), więc warto by dokument ten, był uporządkowany oraz nie zawierał zbędnych linijek kodu. To samo dotyczy plików CSS, ich struktura nie powinna być zbytnio zagmatwana.

Minimalizacja plików CSS oraz JavaScript, jest kolejną ważną rzeczą. Większość deweloperów używa spacji czy wcięć aby kod był czytelniejszy. Dla kompilatorów nie ma to znaczenia, dlatego korzysta się z minifikacji kodu. Dzięki temu procesowi zmniejszamy kod źródłowy, tak by czas pobierania go przez przeglądarki był jak najmniejszy.

Stosowanie pamięci podręcznej przeglądarek może również przyspieszyć wczytanie strony. Podczas pierwszego załadowania niektóre pliki zapisywane są do lokalnej pamięci co przyspieszy proces ponownego otwarcia strony. WordPress udostępnia kilka naprawdę dobrych wtyczek do buforowania witryn, my także korzystamy z tej technologii.

Kolejnym krokiem może być redukcja zasobów blokujących renderowanie strony. Są to pliki CSS i JavaScript, które z reguły muszą się załadować zanim pojawi się jakakolwiek treść. Często to opóźnia cały proces wczytywania strony. Istnieje kilka rozwiązań by pozbyć się tego problemu. Jednym z nich jest wyżej opisana minifikacja kodu. Możemy zrobić to z pomocą wtyczek na WordPress’ie takich jak „Autoptimize” lub „W3 Total Cache”.

Zalety i wady Google Pagespeed

Pagespeed jest bardzo dobrym narzędzie ale posiada pewne wady. Nie jest zawsze miarodajny, czasami pokazuje niski wynik a po ponownym odświeżeniu strony wynik jest powtarzalny.

Zdarza się, że narzędzie wskazuje na skrypty analityczne od Googla, które rzekomo opóźniają renderowanie strony. Podczas dopieszczania strony zdarzało się, że Pagespeed „czepiał” się tych samych rzeczy.

Pomimo tego narzędzie od Googla jest jednym z ważniejszych elementów optymalizacji strony internetowej. Pagespeed wskaże Ci miejsca w których można dopieścić witrynę tak, żeby osiągała jeszcze lepsze czasy ładowania i zaskakiwała użytkowników swoim działaniem. Wniosek jest prosty, warto korzystać ale nie można w 100% zaufać temu narzędziu i warto przetestować również inne witryny do testowania stron www.