open search bar close search bar
Wróć

20 sposobów na optymalizację wyniku w Google PageSpeed Insights

6 min czytania

Osom Studio - Agencja Interaktywna
share on twitter share on facebook

Czym jest page speed i dlaczego warto w ogóle poruszać ten temat?

Page speed, to nic innego jak miara całkowitego czasu ładowania się strony internetowej. Zastanawiasz się, dlaczego ten wskaźnik jest tak istotny? Są co najmniej dwa powody, o których warto wspomnieć. Po pierwsze – user experience. Zależność jest prosta – im krótszy czas ładowania się strony, tym lepiej dla pierwszego wrażenia użytkownika i mniej szans na odrzucenie. Badania przeprowadzone przez Google we współpracy z SOASTA Research (2017) wskazują, że bounce rate wzrasta aż o 32%, jeżeli strona zamiast 1 sekundy ładuje się, chociażby o 2 sekundy więcej.

Co więcej, w przypadku gdy bounce rate będzie zbyt wysoki Google może w ogóle nie pokazywać Twojej strony w wynikach wyszukiwania, uznając ją za nieprzyjazną dla użytkownika. To prowadzi nas płynnie do drugiego powodu istotności page speed czyli – search engines. Im strona ładuje się szybciej, tym Google umieszcza ją wyżej w naturalnych wynikach wyszukiwania. Page speed stanowi zatem czynnik wpływający na pozycję Twojej witryny w wyszukiwarce.

Z czego korzystać do poprawy swojego web-performance?

Na rynku istnieje wiele narzędzi do analizowania page speed. Jednym z najbardziej popularnych jest oferowany przez Google – PageSpeed Insight. Jest to narzędzie bezpłatne, umożliwiające analizę szybkości ładowania dla dowolnej strony po podaniu adresu URL. Co istotne, wyniki podawane są osobno zarówno dla mobilnej i desktopowej wersji strony, biorąc pod uwagę inne wymagania co do każdej z nich.

20 sposobów na optymalizację wyniku w Google PageSpeed Insights
Google zwraca wynik w skali 1-100 odpowiadający poziomowi performance Twojej strony:

  • 0-49 pkt – źle (wynik wyświetla się na czerwono)
  • 50-89 pkt – umiarkowanie (wynik wyświetla na pomarańczowo)
  • 90-100 – dobrze (wynik wyświetla się na zielono).

Jednak nie sam wynik jest w tym przypadku najważniejszy. To na co uwagę powinieneś zwrócić to rekomendacje, jakie daje to narzędzie.

Jak zwiększyć wynik w Google PageSpeed Insights?

Na szybkość ładowania się strony wpływ ma wiele czynników. Poniżej omówimy podstawowe z nich, wraz z krótkimi wskazówkami dotyczącymi tego co zrobić, aby w szybki sposób zoptymalizować wynik.

1. Eliminacja zasobów blokujących renderowanie

Aby przeglądarka mogła wyrenderować stronę, niezbędne jest zbudowanie drzewa DOM w ramach parsowania HTML. W ten sposób, kiedy tylko przeglądarka wykryje skrypt, będzie zmuszona do zatrzymania się i wykonania go przed kontynuacją. W przypadku zewnętrznego skryptu przeglądarka musi dodatkowo zatrzymać się, aby go pobrać. Istotą tego punktu jest zatem to, aby użytkownikowi w pierwszej kolejności załadował się kod HTML, a dopiero później JavaScript.

Aby uniknąć tego problemu, najprostszym rozwiązaniem jest (w przypadku małego skryptu), wstrzyknięcie skryptu inline bądź użycie tagu async i defer. Należy pamiętać, aby skrypt znajdował się przed zamknięciem tagu body.

2. Unikanie łańcuchów żądań krytycznych

Punkt ten odnosi się do sposobu hierarchizacji skryptu. Łańcuchy żądań krytycznych stanowią zbiór zależnych od siebie żądań sieciowych ważnych w procesie ładowania się strony. Generalnie, im większa jest długość łańcucha i im większe rozmiary pobieranych zasobów, tym mniejsza będzie wydajność witryny. Aby zmniejszyć negatywny wpływ tego czynnika na wydajność strony, należy zminimalizować liczbę krytycznych zasobów poprzez odłożenie ich pobierania lub oznaczenie ich jako asynchroniczne. Krytyczne zasoby powinny być przeniesione wyżej w strukturze.

3. Zachowanie małej liczby zapytań i małych rozmiarów plików

Kolejną z rekomendacji, jaką może zaoferować Google PageSpeed Insights, to zachowanie jak najmniejszej liczby zapytań i małych rozmiarów plików, rozumiane jako zmniejszenie ich wielkości i ilości do niezbędnej dla właściwego funkcjonowania strony. Aby sprostać tym wymaganiom, należy w pierwszej kolejności ograniczyć ilość czcionek internetowych, zmniejszyć liczbę skryptów pobieranych z zewnętrznych źródeł oraz zastosować łączenie tzw. bundlowanie kodu. Ponadto, należy zadbać o właściwą kompresję plików i ich optymalizację, co rozwiniemy w kolejnych punktach w odniesieniu do konkretnych typów plików.

4. Minifikacja CSS/JavaScript

Istotą tego procesu jest skompresowanie kodu źródłowego poprzez usunięcie niepotrzebnych znaków lub zmiana długich nazw zmiennych na odpowiedniki typu x, y, z. Zmiana ta nie wywołuje zmiany samej funkcjonalności strony, a jedynie zmniejsza wagę i rozmiar samego kodu. Aby zminifikować kod źródłowy, należy użyć programów pakujących tj. WebPack, ParcelJS lub wykorzystać kompresory online i wtyczki do WordPressa np. Autooptimize.

5. Usunięcie nieużywanych stylów

Realizacja tego zalecenia opiera się na eliminacji zbędnych klas w przypadku braku ich wykorzystania w danej zakładce lub w przypadku usunięcia kodu HTML, który nie jest już używany tak, aby zbędnie nie ładować niepotrzebnych plików. Pomocne może być wówczas użycie narzędzi ChromeDev Tools, które w zakładce sources mogą wskazać ilość nieużywanych danych (coverage).

6. Minimalizacja pracy w głównym wątku

Wątek główny jest odpowiedzialny za przekształcenie kodu w stronę internetową i obsługę interakcji użytkownika. Sposoby poprawy web performance odnośnie tego punktu wiążą się w istotny sposób z wymienionymi już minifikacją i usuwaniem nieużytkowanego kodu. Co więcej, w realizacji tej rekomendacji zaleca się zastosowanie pamięci podręcznej.

7. Skrócenie czasu wykonywania skryptów JavaScript

W celu minimalizacji czasu oczekiwania na załadowanie skryptu JavaScript należy przede wszystkim zmniejszyć jego wagę oraz kontrolować, aby nie był on wykonywany w ramach głównego wątku (main-thread).

8. Skrócenie czasu reakcji serwera (Reduce Server Response Times (TTFB))

Dla odpowiedniej prędkości ładowania się strony niezbędny jest dobrej jakości serwer, na którym strona funkcjonuje. W tym celu serwer musi znajdować się jak najbliżej fizycznej lokalizacji użytkownika. Jeżeli nie ma możliwości spełnienia tego rozwiązania, musi być użyty CDN (Content Delivery Network).

Kolejnym istotnym aspektem, poza fizyczną lokalizacją serwera, jest jego obciążenie. Serwer nie może być przeciążony liczbą stron, które na nim funkcjonują. Warto więc zadbać o dobrego usługodawcę hostingowego, który nie dzieli jego zasobów między innymi użytkownikami (tzw. shared hosting).

9. Zachowanie właściwych rozmiarów obrazów

W optymalizacji czasu ładowania strony bardzo ważną rolę odgrywają pliki graficzne. Szczególną uwagę należy zwrócić na ich właściwe rozmiary. Na stronie należy umieszczać pliki w wymaganej rozdzielczości bądź użyć atrybutu srcset w przypadku braku możliwości załadowania właściwego rozmiaru obrazu.

10. Odroczenie ładowania obrazów poza ekranem

Aby zoptymalizować proces ładowania się strony, należy zadbać również o to, aby użytkownikowi ładowały się tylko te obrazy, które aktualnie znajdują się w jego viewporcie. W tym celu używamy natywnego atrybutu loading=„lazy” (tylko dla Chrome). Można również wykorzystać gotowe biblioteki JavaScript, które załadują obraz po wykryciu go w viewporcie użytkownika.

11. Efektywne kodowanie obrazów

Dla osiągnięcia wysokiego wyniku w teście PageSpeed wymaga efektywnego kodowania obrazów. Uzyska się go poprzez kompresję obrazów, wymienione wcześniej zachowanie właściwych rozmiarów oraz wykorzystanie nowych formatów obrazów, np. webp.

12. Serwowanie obrazów w formatach Next-Gen

Google zachęca do odejścia od nieefektywnych już formatów obrazów takich jak *jpg czy *png i zamianę ich na nowoczesne formaty tj. *jpg2000 bądź *webp. Zabieg ten wpłynie pozytywnie na wynik testu.

13. Korzystanie z formatów video dla treści animowanych

Analogicznie do powyższego punktu, Google zachęca do wykorzystania nowszych formatów video. Jako najbardziej efektywne wymieniane są *webm oraz *mp4. Nie należy pomijać oczywiście kwestii ich odpowiedniej kompresji.

14. Zapewnienie widoczności tekstu podczas ładowania czcionek

Podczas procesu ładowania strony tekst, który został ostylowany konkretnymi czcionkami, nie wyświetli się, dopóki nie zostaną one załadowane. Aby zminimalizować czas oczekiwania na właściwie fonty i umożliwić natychmiastowe wyświetlanie się tekstu (do czasu załadowania plików z fontami), należy wykorzystać atrybut font-display swap.

15. Uruchomienie kompresji tekstu

W celu zmniejszenia wagi plików, które składają się na stronę internetową, należy użyć tzw. kompresji GZIP. Pozwala ona na zmniejszenie wagi tekstu przed wysłaniem do użytkownika. Zabieg ten wpływa bezpośrednio na zwiększenie page speed. Najbardziej efektywną metodą jest dodanie reguły w pliku .htaccess lub użycie WordPressowych wtyczek typu w3 total cache.

16. Unikanie wielokrotnych przekierowań

Każde kolejne przekierowanie spowalnia szybkość ładowania strony. Aby temu zapobiec, należy precyzyjnie wskazać linki do aktualnych lokalizacji wybranych plików. Szczególnie istotne jest to, aby unikać przekierowań w zasobach dla twojej krytycznej ścieżki renderingowej (CRP).

17. Serwowanie plików statycznych z efektywną polityką pamięci podręcznej

Kolejnym sposobem na zwiększenie wyniku page speed jest serwowanie plików statycznych z efektywną polityką pamięci podręcznej. Wykorzystanie plików pamięci podręcznej przeglądarki pozwoli na szybsze załadowanie strony przy kolejnych wizytach, jako że użytkownik nie będzie zmuszony do każdorazowego pobierania plików, które już znajdują się w pamięci podręcznej przeglądarki. Najbardziej efektywną metodą jest dodanie reguł (cache control i expires) w pliku .htaccess.

18. Zmniejszenie wpływu kodu osób trzecich

Posiadanie zbyt dużej ilości skryptów ze stron zewnętrznych może spowalniać ładowanie strony. Aby temu zapobiec, należy ograniczyć ich pobieranie (m.in. share buttons, embedy filmów, iframes). Jeżeli już są one wykorzystywane na stronie i nie można ograniczyć ich ilości, zalecane jest usprawnienie ich ładowania przez wykorzystanie atrybutów async/defer i preconnect lub hostowanie ich na swoim serwerze.

19. Unikanie dużych ładunków sieciowych

Zgodnie z zaleceniami Google całkowite rozmiary plików nie powinny przekraczać 1600 kB. Aby osiągnąć taki stan rzeczy, należy:

  • zastosować kompresję obrazów graficznych
  • zastosować kompresję kodu JavaScript i CSS
  • używać formatów nowej generacji
  • posiadać poprawną politykę cache

20. Unikanie zbyt dużego rozmiaru obiektu dokumentu

W celu uniknięcia powyższego problemu należy ograniczyć zagnieżdżanie znaczników HTML. Na jednej stronie nie powinno znajdować się w tym samym czasie 1500 nodów, jeden element nie powinien posiadać więcej niż 60 nodów, a głębia nie powinna przekroczyć 32 zagnieżdżeń.

 

Google PageSpeed Insights – przyspiesz swoją stronę

Google PageSpeed Insights to niewątpliwie użyteczne narzędzie zarówno dla programistów, jak i właścicieli stron internetowych. Umożliwia kontrolę nad istotną miarą web performance, jaką jest szybkość ładowania strony. Co najważniejsze, oferuje dedykowane dla naszego serwisu rekomendacje, które w znaczący i przede wszystkim sprecyzowany sposób mogą przełożyć się na przyśpieszenie strony internetowej. Konsekwencją będzie zmniejszony bounce rate i wymierne zyski ekonomiczne.

WordPress nie ma przed Tobą tajemnic?

Następny artykuł

Osom Studio - Agencja Interaktywna

Jak zadbać o bezpieczeństwo WordPressa w kilku krokach

Według danych z w3techs.com, co trzecia strona internetowa jest oparta o WordPress. Nie dziwi więc fakt, że hakerzy i crackerzy skanują strony w poszukiwaniu luk w samym core oraz w zainstalowanych wtyczkach. Podatny kod znaleziony…

Zróbmy to!

Popracujmy nad wspólnym projektem.

Jesteś ciekaw, co możemy zrobić dla Twojego biznesu? Chcesz skorzystać z zalet marketingu online, potrzebujesz graficznej obsługi firmy, planujesz uruchomić sklep internetowy albo kampanię reklamową adwords?

Skontaktuj się z nami i zobacz, jakie działania podejmiemy, by nasz wspólny projekt zrealizował Twój cel biznesowy.

Skontaktuj się