Co to jest Google Page Speed Insight?

Google Page Speed insight jest to narzędzie do testowania szybkości ładowania się witryny.  Aktualnie jest ono oparte o narzędzie audytowe Lighthouse, dostępne z poziomu przeglądarki Google Chrome. Weryfikuje ono wiele obszarów w tym następujące:

• czy witryna posiada certyfikat bezpieczeństwa i szyfrowanie danych za pomocą SSL,
• czy nasza witryna jest statyczną stroną ładowaną z cache serwera,
• czy wszystkie pliki css, js i html uległy minifikacji (zostały zmniejszone i pozbawione zbędnych odstępów oraz akapitów),
• czy obrazy zawarte w witrynie maja optymalny rozmiar i poziom kompresji,
• czy zastosowano najnowsze technologie kompresji plików
• czy zastosowano kompresję g-zip, czy to na poziomie serwera czy też na poziomie witryny,
• czy nadano priorytet treści w witrynie,
• czy ustawiono czas wygasania ciasteczek i plików aby nie obciążać nadmiernie użytkowników korzystających z witryny.

Dlaczego moja strona powinna ładować się jak najszybciej?

Szybkość ładowania witryny jest wysoce istotna z perspektywy botów indeksujących dla wyszukiwarki Google oraz dla botów Google Ads. Na podstawie wyniku szybkości ładowania oraz danych historycznych Google szacuje jakość odwiedzanej witryny i ten wskaźnik jest brany pod uwagę przy określeniu ogólnego wyniku jakości reklam Google. Nie znam algorytmu Google ale śmiem twierdzić, że szybkość ładowania się witryny i te dodatkowe kwestie podlegające analizie w Google Speed Insight wpływają również na pozycję w wynikach wyszukiwania organicznego. Dlatego podczas optymalizacji strony, jest to dla mnie wiodący temat.

Co przedstawia raport z Google Speed Insight?

Omówię dane na podstawie nowo stawianego bloga, bugslife.eu którego jeszcze nie analizowałem pod kątem wyświetlania. Witryna została uruchomiona przy użyciu WordPress, z motywem potomnym przebudowanym przeze mnie, na potrzeby projektu – bugs_twentyseventeen. Poniżej ilustracje i opisy najważniejszych, moim zdaniem, elementów raportu.

Wynik testu:

Na skali od 0-100 zaznaczono poziom na którym plasuje się witryna w PageSpeed Tools. Jak widać wskaźnik jest różny w zależności od urządzenia. Aktualnie strony dobrym wynikiem mobilnym mają pierwszeństwo w indeksie. Strona wypada aktualnie bardzo blado, jest to WordPress i jest naszpikowany dużymi objętościowo zdjęciami, specjalnie zadbałem o to aby było co poprawiać.

Wskazówki optymalizacyjne:

Poniżej ilustracja ze wskazanymi obszarami do poprawy. Zostaną omówione poniżej.

Skracanie czasu odpowiedzi serwera

Każdy serwer na którym instalujemy witrynę, aplikację czy po prostu przechowujemy dane ma, swoje limity, które powinniśmy sprawdzić zanim zainstalujesz cokolwiek, biorąc pod uwagę szacunkowy ruch który uda nam się w witrynie wywołać. Jeśli serwer ma wolny procesor, łącze, nie posiada dysku SSD, ładowana strona jest dynamiczna i ciężka może to wydłużyć czas jego odpowiedzi. Istnieje narzędzie diagnostyczne, które pozwoli nam na wywołanie szczegółowych parametrów serwera. Wystarczy jedynie odrobina chęci, bo zadanie jest proste. Mianowicie:

1. 1. Tworzymy plik info.php w którym wklejamy poniższy kod:

1. Kopiujemy plik do folderu w którym umieszczone są pliki wykonywalne witryny.
2. Wywołujemy funkcję wpisując w przeglądarkę „http://twojawitryna.pl/info.php”

Na podstawie danych z serwera, możemy zadać pytanie dostawcy usług, co oznaczają poszczególne parametry oraz zapytać o ich poprawę.

Eliminowanie blokującego kodu JavaScript i stylów CSS

Tutaj sprawa jest nieco trudniejsza i z całą pewnością wymaga szerszego spojrzenia na programowanie w JavaScript oraz na funkcje php wywoływane przez naszą stronę. Często funkcje oraz skrypty zawierają fragmenty kodu Java, które wykonywane blokowo mogą zatrzymać dalsze renderowanie strony do czasu przejścia do następnego bloku. Oczywiście są metody które umożliwiają wywoływanie kodu w tle lub opóźnienie jego wykonania (w sposób asynchroniczny) ale jeśli nasza strona jest zbudowana w taki sposób, że w pierwszej kolejności muszą załadować się określone moduły, klasy czy zmienne, dokonując zmian możemy doprowadzić do tego, że kod działający w tle nie wczyta niektórych elementów które po prostu nie będą dostępne, ponieważ jakaś część kodu używana przez inny skrypty nie załadowała się.

Poniższe diagramy ilustrują prawidłowe i nieprawidłowe wywoływanie skryptów w sposób asynchroniczny które powoduje powstanie błędu. Więcej o asynchronicznym ładowaniu skryptów znajdziecie na pluralsight.com, tam też znajdują się sztuczki na optymalizację kodu i ustawienie kolejności ładowania zasobów.

Innym przypadkiem problemów z blokowaniem renderowania witryny mogą być sytuacje w których zasoby takie jak pliki CSS lub skrypty Java pobierane są z serwerów zewnętrznych. Tutaj jeśli chodzi o pliki CSS, możemy spokojnie pozwolić aby nie zablokowały ładowania się strony na czas ich ładowania. W moim przykładzie sprawa dotyczy używanych czcionek z Google Fonts które umieszczone są w zewnętrznych zasobach. Zanim jednak opiszę jak sobie z tym poradzić, warto nadmienić że w przypadku plików *.js pobieranych z zasobów zewnętrznych, zaraz po otwarciu tagu „<script” należy dodać async gdzie wywołanie będzie miało taką postać: <script async src=”http://serwer.zewnetrzny.com/skrypty/tenskryptjava.js”></scrip>

Co do Google Fonts, sprawa jest prosta ponieważ dostępna jest wtyczka, która wyłączy nam dostęp do Google Fonts i tym samym przyspieszy ładowanie strony. Wtyczka nazywa się Disable Google Fonts.

Wykorzystaj pamięć podręczną przeglądarki

W tym konkretnym przypadku, otrzymałem informację że nie ustalono czasu wygasania plików pobranych przez przeglądarkę. Ten problem możemy rozwiązać na dwa sposoby.

1. Edytujemy plik .htaccess znajdujący się w katalogu głównym naszej witryny i zadajemy cazsy trwania wszystkich zasobów, które mogą zostać pobrane przez przeglądarkę
2. Instalujemy wtyczkę która pomoże nam wybrać jakie zasoby i na jaki okres powinny zostać pobrane przez przeglądarkę. Ja do tego celu preferuję WP Super Cache. Wtyczka dodatkowo pomaga nam wykorzystać cache naszej strony aby ładować statyczne pliki zamiast dynamicznych, co znacznie przyspiesza ładowanie strony.

Zoptymalizuj obrazy

W przypadku gdy mamy na stronie jeden lub dwa obrazki, tak jak w moim przypadku, podmiana ich na bardziej skompresowane i szybciej ładujące się nie stanowi problemu. Dużo gorszą sytuacją jest gdy mamy setki czy tysiące obrazów w galeriach i nie tylko, ładowanych na stronie głównej. Takiego zabiegu się nie stosuje aczkolwiek np. w branży foto, galerie są kluczowe i część zdjęć prezentowana jest od razu. Ogólnie optymalizacja obrazów jest kluczowa w każdej dziedzinie w której wykorzystywana jest grafika, w celu ograniczenia zużycia cennych zasobów. Umiejętne magazynowanie danych to podstawa. Przy dużej ilości zdjęć warto użyć wtyczki. Przy niewielkiej można to zrobić ręcznie i cieszyć się przyspieszonym ładowaniem strony.

Zastosowane rozwiązania optymalizacyjne:

W przypadku bugslife.eu okazuje się że zastosowałem rozwiązania optymalizacyjne. Otóż, motyw z którego korzystam czyli TwentySeventeen jest na tyle dobrze przygotowany technicznie, że automatycznie nadaje priorytet treści widocznej na ekranie, co jest dobrze widoczne zwłaszcza na urządzeniach mobilnych, brakuje w nim przekierowań (ale to akurat nie dotyczy motywu), zastosowano kompresję Gzip (Tu raczej stawiam na serwer który robi to za mnie, ponieważ nie instalowałem wtyczek). Poniżej ilustracja:

Motyw zawiera również minifikowany skompresowany kod css, html oraz java script, dzięki czemu nie tracę milisekund przy ładowaniu tych plików.

PageSpeed Tools dają nam jeszcze jedną wisienkę, mianowicie automatycznie optymalizuje niektóre pliki, dzięki czemu możemy je samodzielnie podmienić i poprawić swój wynik.

Wynik testu PageSpeed po uwzględnieniu wszystkich zaleceń.

Żeby nie przedłużać, tutaj poniżej ilustracja z wynikiem jaki osiągnąłem podczas tworzenia tego artykułu i stosowania się do zasad które opisałem. Taki wynik jest solidny, i umożliwia nam osiągnięcie wyniku jakości reklam w AdWords na poziomie 10/10. Myślę że to dobry wynik, tanie reklamy i większe zyski.

Jeśli podobało się, proszę oceń artykuł. Na semsos.pl znajdziesz dodatkowe, podstawowe informacje i terminologię potrzebną do pełnego zrozumienia artykułu. Jeśli potrzebujesz dodatkowych informacji, proszę napisz do mnie.