Jak uzyskać wskaźnik ponad 90 w Google Page Speed

Kilka lat istnienia strony w Internecie to epoka. Sposób budowania stron zmienia się tak dynamicznie, że nawet osoby z branży nie są czasami na bieżąco ze wszystkimi nowymi technologiami i rozwiązaniami, które pozwalają na nowo spojrzeć na starsze, znane im projekty.

W szczególności zmiany wywołane są przez dynamicznie rozwijający się Internet mobilny. Od kilku lat mówi się o roku mobile co oznacza, że zasoby internetowe w coraz większym stopniu są przeglądane za pomocą urządzeń takich jak telefony i tablety. W listopadzie 2016 na świecie po raz pierwszy w historii więcej ruchu zostało wygenerowanego przez urządzenia mobilne niż komputery stacjonarne. (źródło: Statcounter)

Zdajemy sobie sprawę jak ważnym punktem styku biznesu naszego klienta jest strona internetowa i szybkość jej ładowania. Dlatego zdecydowaliśmy się przeprowadzić audyt pod tym kątem.

Stworzona kilka lat temu strona wymagała wielu poprawek, szybkość ładowania pozostawiała wiele do życzenia. Jest to istotny wskaźnik przede wszystkim dla użytkowników z mobilnym Internetem. Badania wykazały, że nawet różnica 250 ms w czasie ładowania strony pomiędzy stroną Twojego biznesu a konkurencji może spowodować, że potencjalny nabywca zrezygnuje z twoich usług i wybierze szybszą stronę konkurenta.

Filarum.pl na tle konkurencji przed optymalizacją

Strona filarum.pl na tle konkurencji nie wyglądała źle, ale dostrzegliśmy rzeczy, które wypadałoby znacznie poprawić. Przy wykorzystaniu narzędzi Pingdom Speed Test oraz Google Page Speed porównaliśmy stronę filarum.pl z konkurencją.

Należy zwrócić uwagę na fakt, że czas ładowania strony nie wynika tylko z jej rozmiaru, ale również z czasu odpowiedzi zewnętrznych skryptów czy zewnętrznych połączeń z API.

Wnioski z przeprowadzonego przez nas audytu były jednoznaczne: Wersję mobilną strony można znacznie poprawić, a cały serwis zdecydowanie odchudzić i przyspieszyć.

Zadania do wykonania:

• zaprojektowanie całkiem nowej wersji mobilnej (o tym mniej w tym wpisie);
• przyśpieszenie serwisu i osiągnięcie zielonego wskaźnika w Google Speed Insight zarówno dla wersji desktop jak i mobile (na tym się skoncentrujemy).

Do analizy strony użyliśmy dwóch narzędzi:

• Wspomnianego wcześniej Google PageSpeed Insight
• Pingdom Website Speed Test

Usługa Google PageSpeed Insights została opracowana z myślą o właścicielach stron internetowych. Aplikacja mierzy wydajność strony na urządzeniach mobilnych oraz komputerach stacjonarnych, a wyniki sprawdzane i prezentowane są osobno dla każdej z wersji.

Wynik PageSpeed mieści się w zakresie od 0 do 100 punktów. Im wyższy wynik, tym lepiej dla naszej strony. Rezultat na poziomie 85 punktów jest uznawany za dobry. Warto zaznaczyć, że Google nieustannie pracuje nad tym narzędziem i dobrze jest weryfikować nasz wynik co jakiś czas.

Na chwilę obecną Google dla wersji na komputery sprawdza 10 kluczowych punktów – większość z nich pokrywa się z wersją mobilną. Punkty te zawierają w sobie:

• wyeliminowanie renderowania blokujących kodów JavaScript i CSS z części strony widocznej na ekranie,
• optymalizację obrazów,
• pamięć podręczną przeglądarki,
• optymalizację JavaScript,
• kompresję strony www,
• kompresję HTML,
• priorytety dla widocznej treści,
• czas odpowiedzi serwera,
• przekierowania stron docelowych,
• kompresję CSS.

Pingdom Website Speed Test jest natomiast narzędziem, które oprócz funkcji sprawdzania prędkości ładowania strony, posiada funkcję wyświetlania i zapisywania do pliku wszystkich informacji, które zostały wczytane podczas zapytania z serwera strony internetowej. Posiada on funkcję wyświetlania rozwiązań dla konkretnych błędów i problemów, które powodują, że strona działa wolno. Dodatkowo klasyfikuje on dane odnoszące się do odpowiedzi serwera, ogólnego czasu ładowania dla poszczególnych plików oraz rozmiaru skryptów, które zostały zapisane podczas skanowania. Narzędzie to pozwoli wykryć niepotrzebne pliki oraz pomoże podjąć odpowiednią decyzję co do ich usunięcia.

Jak sytuacja wyglądała na początku dla kluczowych stron:

Strona główna:

• Czas ładowania 1,82s,
• Waga 1,6MB
• Wynik w Google PageSpeed Inisght 66/100 mobile i 78/100 desktop
• Czas wgrywanie strony dla przykładowej szybkości Internetu – GRAFIKA
  • 0,3 Mbps (EDG) – 32s
  • 1 Mbps (np. słabe 3G) – 8s
  • 3 Mbps (np. średnie 3G) – 3s
  • 6 Mbps (np. dobre 3G) – 2s
  • 12 Mbps (np. 4G/LTE) – 1s

Formularz rejestracyjny

• Czas ładowania 1,82s
• Waga 1,4 MB
• Wynik w Google PageSpeed Inisght 65/100 mobile i 77/100 desktop

Optymalizacja dotyczyła całego serwisu. Każda podstrona serwisu została przez nas przeanalizowana i poprawiona, my jednak skoncentrujemy się na dwóch kluczowych stronach – stronie głównej i formularzu rejestracyjnym.

Wspomniane działania optymalizacyjne nie są możliwe do przeprowadzenia przez osoby, które nie mają pojęcia o programowaniu. Dlatego lepiej zlecić je doświadczonej agencji, która weźmie odpowiedzialność za ich wykonanie.

Zapraszam na kilkuetapową wycieczkę:

1. Wyeliminowanie renderowania blokujących kodów JavaScript i CSS z części strony widocznej na ekranie.

Aby wyświetlić stronę internetową, przeglądarka musi pobrać wszystkie zasoby, które są niezbędne do poprawnego wyświetlenia strony. Prostym przykładem może być strona z jednym obrazem, jednym plikiem CSS i jednym plikiem JavaScript.

 Jak wygląda po kolei ścieżka wyświetlenia strony przez przeglądarkę:

1. Przeglądarka pobiera plik HTML
2. Wyświetla HTML i widzi, że istnieje jeden plik CSS, jeden JavaScript i jeden obraz
3. Rozpoczyna pobieranie obrazu
4. Decyduje, ze nie może wyświetlić strony bez wcześniejszego pobrania pliku CSS i JS
5. Pobiera plik CSS
6. Decyduje, że wciąż nie może wyświetlić strony, gdyż trzeba pobrać JavaScript
7. Pobiera JavaScript
8. Wyświetla stronę

Na stronie mamy zwykle kilka plików CSS, kilka JavaScriptów, wiele obrazów, niejednokrotnie także video.

Kody JavaScript i CSS jeśli zostanie umieszczony w sekcji <HEAD> mogą opóźnić ładowanie strony. Język JavaScript działa po stronie przeglądarki, strona oczekuje pełnego załadowania tego pliku oraz wykonania szeregu funkcji, które są w nim zakodowane i dopiero wtedy wyświetli się strona.

Dlatego dobrze jest umieścić JavaScript przed zamknięciem znacznika </BODY>.

Optymalizowana strona korzysta z wielu skryptów zewnętrznych dlatego skorzystaliśmy z opóźnienia ładowania niektórych skryptów.

<script defer src="/js/jquery-1.9.1.min.js"></script>

<script defer src="/js/grouped-js.js"></script>

<script defer src="/js/front/fil-compress.js"></script>

Więcej o rozwiązaniu jakiego użyliśmy można przeczytać tutaj https://www.w3schools.com/tags/att_script_defer.asp

2. Optymalizacja obrazów

Zwykle to te elementy ważą najwięcej i administratorzy strony wrzucają obrazki ważące niejednokrotnie 6MB. Na stronie Filarum.pl poza banerem, logiem i ikonami nie mamy za wiele elementów graficznych.

Zastosowaliśmy tu Sprites CSS. CSS sprite to jeden plik graficzny, który jest wykorzystywany jako tło do różnych elementów (ikony, logo, przyciski).

Jeden plik wczytuje się szybciej niż kilkanaście mniejszych i wszystkie pojawiają się w jednej chwili. Przeglądarka nie musi wysyłać kilkunastu zapytań do serwera. My zmniejszyliśmy liczbę połączeń do serwera z 40 do 2.

Pozostałe elementy graficzne jak banery, które zmieniamy dość regularnie możemy odchudzić za pomocą dostępnych aplikacji. My korzystamy głównie z:

• TinyPNG
• Optimizilla
• Imagify

3. Pamięć podręczną przeglądarki

Ustawienie daty wygaśnięcia lub maksymalnego wieku zasobów statycznych w nagłówkach HTTP powoduje, że przeglądarka wczytuje z lokalnego dysku twardego zasoby pobrane wcześniej, zamiast ponownie pobierać je z sieci. Dzięki temu raz pobrane elementy takie jak logo czy biblioteki JavaScript, będą ładowane bezpośrednio z pamięci podręcznej przeglądarki (tzw. cache). Co w znacznym stopniu przyspieszy ładowanie strony przez przeglądarkę.

ExpiresActive on

ExpiresDefault                                      "access plus 1 month"

ExpiresByType text/css                              "access plus 1 year"

ExpiresByType application/javascript                "access plus 1 year"

ExpiresByType application/x-javascript              "access plus 1 year "

ExpiresByType text/javascript                       "access plus 1 year"

W naszym przypadku nie wszystkim zasobom mogliśmy ustawić tak długi czas. Na stronie pozostały zasoby, których czas został ustawiony na 2 czy 15 minut.

4. Optymalizację JavaScript

Optymalizacja polega na pozbyciu się zbędnych danych tekstowych takich jak spacje czy tabulacje. Powstało wiele narzędzi, dzięki którym można przeprowadzić taką optymalizację. Nie jest to nic nadzwyczaj trudnego. Warto jednak zachować oryginalny plik sprzed optymalizacji, gdyż plik po optymalizacji będzie dla programisty bardzo nieczytelny.

Do optymalizacji możemy użyć tych narzędzi:

• Javascript compressor
• JavaScript Minifier/Compressor

5. Kompresja strony www,

Poprawne napisanie kodu, to nie wszystko co możemy zrobić by przyspieszyć działanie strony. Stronę można przyspieszyć wykorzystując mechanizmy kompresji.

Kompresja pozwala nam na zaoszczędzeniu od 50-70% wielkości plików. Warto więc poświęcić temu zagadnieniu czas. Wszystkie nowoczesne przeglądarki rozumieją i akceptują skompresowane pliki.

Włączenie kompresji gzip jest standardową praktyką, my mieliśmy ją włączoną. Więc tutaj nie zyskaliśmy zbyt wielu punktów w Google Page Speed Insight, lecz pisząc taki artykuł nie sposób nie wspomnieć o kompresji strony.

Ponieważ serwis jest uruchomiony na serwerze Apache, dodaliśmy do .htaccess tę regułę.:

<IfModule mod_setenvif.c>

<IfModule mod_headers.c>

SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding

RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding

</IfModule>

</IfModule>

6. Kompresja HTML

Google Page Speed Inisght sprawdza czy HTML jest skompresowany, nam udało się uzyskać 95 punktów bez kompresji HTML, więc tego nie zrobiliśmy. Minusem takiego rozwiązania jest utarta czytelności kodu dla programisty, podobnie jak przy kompresji CSS, czy JavaScriptów. Warto zachować pliki źródłowe – nieskompresowane, a na serwerze umieszczać wersję po kompresji. W wielu przypadkach może pomóc uzyskać kilka punktów w ocenie Google.

Jeśli jednak zdecydujecie się na kompresję to mogę polecić to narzędzie:

• HTML Compressor

7. Priorytety widoczności treści

Strony internetowe, które wydają się bardzo szybkie, są często tak samo duże, jak powolne strony internetowe. Różnica polega na tym, że nadawane są priorytety widoczności treści, którą użytkownik widzi na pierwszym ekranie zanim zacznie przeglądać zawartość strony. By zrobić to dobrze, na początku ładujemy elementy znajdujące się na pierwszym ekranie – zwykle logo, elementy graficzne menu, slider. Dopiero po załadowaniu tych elementów, dogrywamy zawartość aktualność, stopki, skryptów JS.

Google zaleca by w sekcji <HEAD> ładowane były tylko najważniejsze style odpowiedzialne za wygląd strony. Wszystkie pozostałe elementy powinny znaleźć się bezpośrednio przed znacznikiem </BODY>.

My zrobiliśmy to w następujący sposób:

• Ładujemy nagłowek, w którym są czcionki
• Meta dane
• Struktura HTML
• CSS inline
• Skrypty JS

8. Czas odpowiedzi serwera

W naszym przypadku nie stwierdziliśmy problemu z tym punktem. Czas odpowiedzi serwera w omawianym przypadku był znakomity. Jest to czas reakcji serwera na żądanie przeglądarki, ważne by był poniżej 200ms (według Google).

9 .Przekierowania

Kolejny ważny punkt. Nie dotyczył optymalizowanej strony, ale skoro pojawił się jako jeden z punktów ocenianych przez Google Page Speed Insight to należy o nim wspomnieć.

Niejednokrotnie mamy zdefiniowane typy przekierowań typu strona.pl -> www.strona.pl -> www.strona.pl/index.php zanim przeglądarka zinterpretuje poprawnie zdefiniowane przekierowania tracimy cenny czas, warto więc przeanalizować czy na serwis takich przekierowań nie ma.

10. Kompresja CSS

Kompresja CSS to dokładnie ten sam proces opisywany przy kompresji JavaScript i Kompresji HTML. Pozwala zyskać kilka kB, dzięki usunięciu zbędnych spacji, znaków łamania wierszy i wcięć.

• CSS Compressor

Podsumowanie

Projektując i optymalizując nową wersję mobilna udało nam się uzyskać najlepszy wynik dla strony głównej spośród konkurencyjnych 95 punktów w Google PageSpeed Insight oraz czas ładowania strony 0,72s potwierdzony narzędziem Pingdom Tools.

Wprowadzone zmiany optymalizacyjne również są widoczne na wersji desktop, która według Google PageSpeed Insight poprawił się z 78 pkt na 95.

Udało się również znacznie zmniejszyć ilość pobieranych danych prawie o ponad połowę z 1,6 MB do 607 kB.

Tak wyglądają wyniki strony Filarum.pl na tle konkurencji po optymalizacji:

Należy zwrócić uwagę na fakt, że czas ładowania strony nie wynika tylko z jej rozmiaru, ale również z czasu odpowiedzi zewnętrznych skryptów czy zewnętrznych połączeń z API.