Jak zbadać szybkość ładowania strony internetowej i na co zwrócić uwagę?

Przy ustalaniu rankingu stron w swojej wyszukiwarce Google bierze pod uwagę masę czynników, które według niego mają znaczący wpływ na miejsce w serpach. Właściciele serwisów internetowych często jednak pomijają jeden z elementów, który w niedalekiej przyszłości może okazać się kluczowy. Chodzi tutaj o szybkość ładowania strony. Google chce doprowadzić do takiej sytuacji, w której na najwyższych miejscach w wynikach wyszukiwania będą serwisy , które będą zoptymalizowane pod kątem szybkości ładowania. W ten sposób Google chce wyjść naprzeciw użytkownikom, którzy bardzo często narzekają na szybkość wczytywania stron internetowych prezentowanych w płatnych wynikach wyszukiwania oraz na pierwszej stronie wyników organicznych.

Jak sprawdzić szybkość ładowania strony internetowej?

W sieci możemy znaleźć bardzo dużo darmowych narzędzi, które w rzeczowy sposób przedstawią nam co należy usprawnić, aby strona zdecydowanie szybciej się wczytywała. Przedstawię te, z których korzystam ja w swojej codziennej pracy.

NARZĘDZIE: Google PageSpeed Insights

Google PageSpeed Insights jest to jedno z dwóch w pełni darmowych narzędzi udostępnione przez Google. Narzędzie te analizuje podaną witrynę w celu znalezienia wszystkich błędów, które wpływają na szybkość ładowania strony na urządzeniach mobilnych oraz deskoptowych. Poza ogólnym wynikiem (który jest przedstawiony w formie punktów w skali od 1 do 100) narzędzie pokazuje nam kwestie, które należy poprawić, aby podwyższyć swój wskaźnik ładowania.

Jak przeprowadzić test szybkości przy pomocy Google PageSpeed Insights?

1. Wchodzimy na stronę Google PageSpeed Insight

2. W polu, które się ukazało wpisujemy stronę, którą chcemy przeanalizować i klikamy analizuj

3. Odczekujemy chwilę, aż narzędzie przeanalizuje wpisaną stronę (trwa to zwykle około 20 sekund)

4. Po skończonej analizie narzędzie wyświetli krótki, lecz bardzo treściwy raport odnośnie tego co należy poprawić. Narzędzie generuje raport szybkości ładowania strony jednocześnie dla wersji mobilnej jak i deskoptowej:

5. Wyświetlamy raport dla urządzenia, które nas interesuje. W tym przypadku będzie to raport dla wersji mobilnej:

Raport dzieli się na dwie grupy: to co należy poprawić, aby przyspieszyć ładowanie strony (oznaczone kolorem czerwonym, wysoki priorytet) oraz warto poprawić (oznaczone kolorem pomarańczowym, nie są to aspekty kluczowe). Przy każdej uwadze daje nam szczegółowe informacje jak daną to rozwiązać. Po naciśnięciu ?Pokaż, pokaż jak to naprawić? wyświetla nam sposoby na pozbycie się wykrytego problemu, który wpływa na szybkość ładowania strony:

[vcex_divider style=”solid” icon_color=”#000000″ icon_size=”14px” margin_top=”20px” margin_bottom=”20px”]

NARZĘDZIE: Mobile Website Speed Testing Tool

Mobile Website Speed Testing Tool to kolejne narzędzie, które udostępnia nam Google do przetestowania szybkości ładowania strony. Jest to stosunkowo nowy twór, gdyż swoją premierę miał 2 czerwca 2016 roku. Narzędzie łączy w sobie funkcjonalności Google PageSpeed Insights oraz Mobile Friendly Websites, dzięki czemu za pomocą jednego narzędzia możemy sprawdzić nie tylko jak szybko ładuje się nasza strona, ale również czy nasz serwis jest przystosowany na urządzenia mobilne. Co ciekawe czasami może się tak zdarzyć, że wyniki podane w raporcie tego narzędzia będą zupełnie inne niż te podane w PageSpeed Insights.

Jak przeprowadzić test szybkości przy pomocy Mobile Website Speed Testing Tool?

1. Wchodzimy na stronę Mobile Website Speed Testing Tool

2. W polu, które się ukazało wpisujemy stronę, którą chcemy przeanalizować i klikamy przetestuj

3. Odczekujemy chwilę, aż narzędzie przeanalizuje wpisaną stronę (poniżej żółtego paska narzędzie co jest aktualnie przedmiotem analizy)

4. Po krótkiej chwili narzędzie sprawdzi szybkość ładowania naszej strony i wyświetli raport.

Raport jest podzielony na 3 części:

• W pierwszym okienku widzimy wynik, jaki osiągnęła analizowana witryna pod względem przystosowania do urządzeń mobilnych
• W drugim okienku widzimy wynik, jaki osiągnęła analizowana witryna pod względem szybkości ładowania na urządzeniach mobilnych
• W trzecim okienku widzimy wynik, jaki osiągnęła analizowana pod względem szybkości ładowania na urządzeniach deskoptowych

Tak jak w przypadku Google PageSpeed Insights tak i w Mobile Website Speed Testing Tool otrzymujemy wytyczne, których wprowadzenie pozwoli nam zwiększyć szybkość ładowania strony. Aby wyświetlić wyświetlić listę rzeczy, które należy poprawić wystarczy, że zjedziemy nieco w dół strony i klikniemy na link, który jest usadowiony obok wyniku danego testu:

Po kliknięciu w dany link naszym oczom ukaże się okienko wraz z wytycznymi:

Jest tylko jedna istotna różnica pomiędzy dwoma narzędziami Google. Otóż w PageSpeed Insight przy każdym punkcie, niezbędnym do poprawy szybkości ładowania strony otrzymujemy wyjaśnienie oraz linki do poradników Google, mających na celu prawidłowe wdrożenie zmian usprawniających poprawę szybkości. W przypadku Mobile Website Speed Testing wspomniane opcje otrzymujemy dopiero gdy pobierzemy pełny raport.

NARZĘDZIE: GTMetrix

GTMetrix to chyba najpopularniejsze narzędzie do sprawdzania szybkości ładowania stron internetowych. Łączy ono w sobie funkcjonalności dwóch innych narzędzi ? Yslow oraz PageSpeed Insight od Google. Osoby korzystające z GTMetrix?a upodobały sobie to narzędzie prawdopodobnie z dwóch powodów:

• Narzędzie nawet w wersji darmowej oferuje bardzo szczegółowy raport wygenerowany dla analizowanej strony
• Bardzo przejrzysty interfejs oraz sposób prezentowania wyników testu szybkości

Jak przeprowadzić test szybkości przy pomocy GTMetrix?

1. Wchodzimy na stronę GTMetrix

2. W polu, które się ukazało wpisujemy stronę, którą chcemy przeanalizować i klikamy „Analyze”

3. Odczekujemy chwilę, aż narzędzie przeanalizuje wpisaną stronę

4. Po krótkiej chwili narzędzie sprawdzi szybkość ładowania naszej strony i wyświetli raport. Raport możemy podzielić na dwie części:

Część podsumowująca, w której widzimy m.in.

• Przy użyciu jakiej przeglądarki narzędzie wykonało test szybkości
• Gdzie znajdował się serwer, który wysyłał żądanie
• Łączny wynik uzyskany za pomocą PageSpeed Insight
• Łączny wynik uzyskany za pomocą YSlow
• Czas ładowania strony
• Wielkość strony
• Ilość wysłany zapytań

Część szczegółowa, która jest podzielona na 5 zakładek:

Zakładka PageSpeed

W tej zakładce znajdziemy szczegółowy raport, który został wygenerowany przy pomocy API narzędzia PageSpeed Insight.

Tak jak w narzędziu od Google?a tak i w GTMetrix?e mamy możliwość rozwinięcia danej uwagi. Wówczas ujrzymy bardziej rozbudowane wytyczne

Zakładka YSlow

W tej zakładce znajdziemy szczegółowy raport, który został wygenerowany przy pomocy API narzędzia Yahoo. Możemy zauważyć, że kilka aspektów, które warto poprawić, aby strona działała szybciej, jest takich samych jak w przypadku raportu z zakładki PageSpeed (np. unikanie niepotrzebnych przekierowań). Jednakże występują tutaj również wytyczne, których nie znajdziemy w poprzedniej zakładce.

Zakładka Waterfall

W zakładce Waterfall znajdziemy wykres, który pokazuje zachowanie ładowania strony w wybranej przeglądarce. Świetnie sprawdza się w przypadku, gdy chcemy dowiedzieć się jaka rzecz umieszczona w kodzie źródłowym pochłania najwięcej czasu przy ładowaniu. Narzędzie może być stosowane do wykrywania prostych kwestii, takich jak np. kod odpowiedzi serwera lub bardziej złożonych zagadnień, takich jak blokowanie zasobów renderowania. Wszystko jest przedstawione na prostym i czytelnym wykresie:

Zakładka History

Bardzo ciekawy „ficzer” – pomocny przy nadzorowaniu historii poszczególnych testów.

[vcex_divider style=”solid” icon_color=”#000000″ icon_size=”14px” margin_top=”20px” margin_bottom=”20px”]

NARZĘDZIE: Pingdom

Ostatnie narzędzie do mierzenia szybkości ładowania strony, którego używam w codziennej pracy ? Pingdom. Dzięki temu narzędziu jesteśmy w stanie w szybki sposób znaleźć informacje na temat tego jak szybko ładuje się strona oraz ile ?waży?. To co jest warte odnotowania to to, że w darmowej wersji narzędzia możemy ustawić skąd ma pójść zapytanie do naszej strony. W darmowej wersji mamy do dyspozycji 4 lokalizacje:

• Dallas, Texas, USA
• Melbourne, Australia
• New York City, New York, USA
• Stockholm, Sweden

Jak przeprowadzić test szybkości przy pomocy Pingdom?

1. Wchodzimy na stronę Pingdom

2. W polu, które się ukazało wpisujemy stronę, którą chcemy przeanalizować, wybieramy jedną z dostępnych lokalizacji, które oferuje narzędzie i klikamy start test

3. Odczekujemy chwilę, aż narzędzie przeanalizuje wpisaną stronę

4. Po krótkiej chwili narzędzie sprawdzi szybkość ładowania naszej strony i wyświetli raport. Raport prezentuje się następująco:

Summary

Jest to ogólne podsumowanie testu szybkości strony. Widać w nim między innymi ogólny wynik szybkości (Pingdom wykorzystuje API PageSpeed Insight), ile zajęło wczytywanie strony, wielkość serwisu, ilość wysłanych zapytań.

Performance insights

W tym okienku znajdziemy wszystkie wytyczne, do których powinniśmy się zastosować, aby nasza strona działała szybciej.

W Pingdom?ie również możemy rozwinąć dane zalecenie. Wówczas zobaczymy bardziej szczegółowe informacje na temat tego jak poprawić daną niedogodność. Na samym dole każdego rozwiniętego zalecenia znajdziemy link do tutorialu Google:

Response code

W tym miejscu wyświetlą nam się wszystkie kody odpowiedzi jakie otrzymał serwer.

Content size by content type

W tej części raportu dowiemy się ile zajmuje zawartość kodu źródłowego analizowanej strony.

Requests by content type

W tym okienku znajdziemy informacje na temat tego jak rozkładały się wszystkie zapytania na daną sekcję kodu źródłowego.

File requests

Z tą funkcjonalnością mieliśmy do czynienia przy zakładce Waterfall w GTMetrixie. Uważam jednak, że sposób prezentacji wyników jest tutaj zdecydowanie bardziej czytelny. Zauważcie też kolejnośc przekierowań – któś chyba nie zapanował nad poprawną kolejnością.

[vcex_divider style=”solid” icon_color=”#000000″ icon_size=”14px” margin_top=”20px” margin_bottom=”20px”]

Uwagi końcowe:

a). Narzędzia Google mają problem z poprawnym odczytywaniem serwisów pod kątem sprawdzania czy jest włączona kompresja GZIP. Dla wyżej wymienionej instytucji finansowej Google pokazuje napis aby naprawić problemy z kompresją. Tymczasem sprawdzając serwis (bez www, z www, bez ssl i z ssl) za pomoca chociażby http://checkgzipcompression.com/ pojawia się napis:

b). Optymalizując serwisy nalezy zauważyć, że testery badają serwisy z jakiejś lokalizacji – niestety są one poza Polską więc prędkośc ładowania serwisu może wynieść nawet kilka sekund a tymczasem na terenie Polski serwis ładuje się niespełna 2 sekundy.

c). Nie należy minimalizowac plików CSS i JS „na siłę” – jeśli minimalizacja nie jest możliwa należy popracować nad innymi elementami

d). Najwredniejsza do optymalizacji jest grafika. Nierzadko użytkowicy nieświadomie wstawiają obrazki o bardzo dużych rozmiarach i wadze. Potem dziwią się, że wynik w dowolnym testerze Google to 0/100.

e). Warto zwrócić uwagę na liczbę plików ładowanych z zewnętrznych serwisów. Niejednokrotnie można trafić na serwisy oddane przez deweloperów (sklepy) gdzie zdjecia produktów ładują się z … serwera testowego lub bezpośrednio od producenta. Wychwycicie to narzędziem Pingdom – ale od razu uwaga, iż nie wszystko da się przenieść na własny serwer (ot uroki skryptów)

f). Ciekawym narzędziem jest https://performance.sucuri.net/- pokazuje prędkośc połączenia dla kilku róznych serwerów i krajów

URL: https://performance.sucuri.net/domain/zgred.pl

[vcex_divider style=”solid” icon_color=”#000000″ icon_size=”14px” margin_top=”20px” margin_bottom=”20px”]

Przykłady optymalizacyjne:

a). GTMetrix – zredukowano liczbę ładowanych obrazków na stronie głównej, zmniejszono liczbę wywołań różnego rodzaju skryptów (i zmniejszono ich liczbę i wagę)

b). GTMetrix – serwis „skopany” technologicznie (Javascript, Meteor), escape_fragments i tak dalej – wydruk przed i po optymalizacji (serwer stoi w Kanadzie)

Ten sam serwis – przykład „waterfall” – obrazki były ładowane z CDN w Amazonie (!!!) – zwróćcie uwgaę, że niektóre z obrazków ładowały się po kilka sekund (od 1,5 do prawie 8 sekund) !!!

c). GTMetrix – waterfall dla podstrony z blogiem. Problemem jest nie rozmiar obrazków ile ich nagromadzenie oraz czas oczekiwania na odpowiedź od serwera (oznaczone kolorem zielonym)

[vcex_divider style=”solid” icon_color=”#000000″ icon_size=”14px” margin_top=”20px” margin_bottom=”20px”]

Podsumowanie

W przykładach powyżej sprawdzana była zazwyczaj strona główna. Można pokusić się o wyrywkowe sprawdzenie kilku podstron – nierzadko podstrony są lepiej zoptymalizowane niż strona główna, która jest najczęściej przeładowana np. grafiką. Warto zawsze sprawdzić stronę bloga, gdyż (w przypadku dwóch różnych skryptów) można nieco się zdziwić w przypadku ładowania takiej strony.

Wiemy już, że szybkość ładowania strony będzie miała realny wpływ na wyniki wyszukiwania, dlatego już teraz warto zadbać o to, aby serwisy, którymi się opiekujemy działały szybciej. Zanim przystąpicie do poprawy szybkości Waszych stron pamiętajcie o jednym ? nigdy nie należy wprowadzać wszystkich zaleceń, które pokazuje dane narzędzie. Powód? Witryna może stać się nieatrakcyjna pod względem wizualnym oraz może? działać wolniej 😉

Ponieważ jest wiele opisów tego typu narzędzi podaję możliwe źródła do przeczytania:

• http://howfreelance.com/blog/2015/07/top-10-website-speed-testing-tools-2015/
• http://www.mobiletrends.pl/ranking-10-najlepszych-narzedzi-to-testowania-predkosci-i-optymalizacji-twojej-witryny/
• https://www.keycdn.com/blog/website-speed-test-tools/

Obrazki: screeny własne, screeny z narzędzi oraz zaczerpnięte z witryny Google, pixabay: https://pixabay.com/pl/shinkansen-punktor-poci%C4%85g-kolejowe-468035/