skip to Main Content
+48 606 628 628 info@zgred.pl
Predkosc Serwisu Popciag

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

obrazek-2

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

obrazek-3

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

obrazek-4

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:

obrazek-5

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

obrazek-6

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:

 obrazek-7

NARZĘDZIE: Mobile Website Speed Testing Tool

obrazek-8

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

obrazek-9

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

obrazek-10

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

obrazek-11

 

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:

obrazek-12

 

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

obrazek-13

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

obrazek-14

 

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”

obrazek-15

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:

obrazek-16

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:

obrazek-17

Zakładka PageSpeed

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

obrazek-18

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

obrazek-19

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.

obrazek-20

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:

obrazek-21

Zakładka History

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

obrazek-37

NARZĘDZIE: Pingdom

obrazek-22

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

obrazek-23

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

obrazek-24

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.

obrazek-25

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:

obrazek-26

Response code

obrazek-27

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

Content size by content type

obrazek-28

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

Requests by content type

obrazek-29

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

File requests

obrazek-30

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ą.

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:

obrazek-31

 

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)

obrazek-39

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/seo.zgred.pl

obrazek-38

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ę)

obrazek-32

 

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

obrazek-33

obrazek-34

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) !!!

obrazek-35

 

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)

obrazek-36

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:

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/

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (17 głosów, średnia: 4,18 z 5)

Paweł Gontarek

Paweł Gontarek - Zgred - pasjonat SEO, staram się zrozumieć czym jest i jak działa SEM oraz UX.

Ten wpis ma 35 komentarzy
  1. Warto wspomnieć o HTTP2, w Twoim wypadku sama aktywacja tego protokołu poprawiła by czas ładowania dla użytkowników Chrome/Firefox/Opera/IE11+ 2-3-krotnie jak nie więcej. ( Wymaga to https:// ale certyfikat już masz, kwestia użycia nowoczesnych serwerów WWW lub aktualizacji modułów )

    +/- w opisie GTMetrix – „Connecting” widać ten problem(Stalled w Chrome). Przeglądarka pobiera do 8 plików jednocześnie na protokole HTTP/1.1. Kolejne pobierane są gdy wcześniejszy plik będzie już pobrany i zwolni slot pobierania.

    W wypadku HTTP/2 wszystkie pliki pobierane są jednocześnie. Na szybkich łączach różnica jest ogromna.
    Nie ma konieczności nawiązywania kolejnych połączeń dla każdego pliku. ( HTTP1.1 oferuje co najwyżej keepalive )

    Kilku blogerów SEO ma to wdrożone na swoich blogach, „wskakują” one na ekran.

      1. np. linuxpl w pakiecie PRO (serwer Litespeed)
        Na dobrą sprawę wszystkie hostingi co reklamują się z litespeed / nginx

        Pamiętaj, że potrzeba do tego certyfikatu SSL( wymusza przejście na https:// )

        Zawsze też można przekierować ruch na obecny hosting z użyciem Cloudflare, nawet w wersji darmowej obsługuje HTTP/2 & SSL ( bez starych IE na winXP ), Zmiana DNSów 2 kliknięcia, 1 dzień odczekać i gotowe.
        Pozostaje jedynie upewnienie się, że wszystkie adresy wewnętrzne ( ładowanie grafik, js, css ) są wykonane z użyciem HTTPS://

        1. HTTPS mam więc to akurat nie jest problem. Będę musiał dokładniej przyjrzeć się tematowi.
          Dzięki za sugestie ;)

  2. a czy nas szybkosc ladaowania strony ma rowniez wplyw serwer? Pisze tu np o zmiane na serwer gdzie reklamuja firmy ze jest ultra szybki?

  3. Dużym plusem jest hosting SSD, chociażby w seohost różnica w cenie jest niewielka w porównaniu do normalnego hostingu, ale jeśli chodzi o szybkość później to różnica ogromna.

  4. Dlatego warto od czasu do czasu przekazać stronę programiście aby dokonała optymalizacji. Ja tak robię przynajmniej raz w roku i dokonała te podstawowe problemy.
    Dodam, że największy zysk na ładowaniu odnotowałem po zmianie hosting z dzielonego na VPS.

  5. Nooo powiem Ci że wpis bomba! Bardzo bardzo przydatny dla każdego użytkownika. Wszystkie metody warto przeanalizować, bo naprawdę widać efekty w szybkości. Poprawiłem wydajność swojego komputera poprzez wymiany dysku na ssd i wtedy zauważyłem że min. strony o wiele szybciej się otwierają, generalnie wszystko szybciej zaczęło śmigać. Szczerze byłem pewien że prędkość z jaką otwierają się moje strony jest spoko, staram sie dbać o komputer i wszystko robić jak należy, aby wszystko chodziło jak należy. Przyznam że po przeczytaniu Twojego wpisu zastosowałem kilka rad wyżej umieszczonych i zauważyłem znaczną poprawę szybkości otwierania, także jeszcze raz wielkie dzięki.

  6. ŚWIETNY ARTYKUŁ
    muszę przedstawić kilka usprawnień szybkości mojemu klientowi.
    Obecnie pracuje na wersją mobilną jego strony i w testach nie wypadło to najlepiej

    artykuł bardzo przydatny

  7. Świetny wpis, czasami 2 pierwsze sekundy na stronie wpływają na to czy ktoś na niej zostanie dłużej czy nie. Tutaj właśnie liczy się chwytliwy nagłówek oraz szybkość ładowania strony. Powiedzmy sobie szczerze, nikt z nas nie lubi czekać.

  8. A czy ktoś zauważył, żeby czas ładowania wpływał w WYRAŹNY sposób na pozycję? Bo od jakiegoś czasu optymalizujemy naszych klientów pod tym kątem i specjalnej poprawy nie widzę.

    1. Tak. Ale muszą to być duże problemy np ładowanie 5-10 sekund lub więcej. Wtedy widac skoki.

      Natomiast jesli przyspieszysz serwis to duże skoki mozesz zaobserwować na mobilce

  9. Sporo ciekawych narzędzi, kilku nie znałem, jednak lepiej przepuścić stronę przez kilka testerów i porównać wyniki.

  10. Fajnie opracowane, bardzo dokładnie, dzięki. Bywało, że robiłem testy na GTmetrix, ale nie do końca rozumiałem wszystkie opcje. Pomogłeś :)

  11. Szybkość na pewno ma znaczenie – wgrałem u siebie AMP i prędkość wczytywania na mobile polepszyła się. Te AMP z waszych obserwacji to Mit czy hit?

  12. Nie mowie o Tobie Pawle, lecz napisze niebawem artykuł na blogu prywatnym co moim zdaniem znaczy SEOmwiec :-) Bo pojęcie coraz częściej przechodzi mi przez głowę :P

  13. Podobno przy tworzeniu strony dobrym rozwiązaniem jest korzystanie z narzędzi, które mają wbudowane funkcje przyspieszające ładowanie się strony. Planuję niedługo utworzenie własnej witryny, ale póki co zbieram na ten temat informacje. Nie znam się na kodowaniu, nie chcę też wszystkiego zlecać innym (ze względu na koszta), dlatego skłaniam się ku skorzystaniu z jakiegoś kreatora. Znalazłem stronę http://kreatorystronwww.pl/ z polskimi kreatorami. Czy w Pana opinii korzystanie z takich narzędzi może wpłynąć pozytywnie/negatywnie na szybkość ładowania się utworzonych tam stron?

    1. Z reguły kreatory stron bardzo rzadko są dostosowane do SEO – w tej tabeli 4/5 i 5/5 to, moim zdaniem, gruba przesada. Tym bardziej, że w przypadku WIXa najlepszym zalecanym seopodejsciem jest postawić wszystko od zera na CMSie.

  14. Sprawdzanie kilku podstron to podstawa. Na pewno każdy zauważy różnice wyników we wspomnianych w artykule narzędziach. Np. jak mamy sklep internetowy to warto sprawdzić stronę główną, strony kategorii, strony produktowe czy strony statyczne jeśli występują. Fajny artykuł :)

  15. Faktycznie pozostałe strony poza główną mają dobrą szybkość, a główna „poor”.
    Czasem to wina motywu np WordPress zakupionego w promocji :) .
    Dzięki za naprawdę dogłębne zbadanie tego tematu.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Back To Top
Przeczytaj poprzedni wpis:
seo-link-building
Ile procent naturalnych linków jest w naturalnym linkowaniu

Wielokrotnie są opisywane różne propozycje związane z pozycjonowaniem serwisu skupiające się na przedstawieniu  aspektów pozyskiwania odnośników. Wielokrotnie dostaję pytania typu...

mistrzostwa-polski-content-marketing
Mistrzostwa Content Marketingu – pierwsze w Polsce !

Magazyn „Marketing&Biznes” organizuje pierwsze w Polsce Mistrzostwa Content Marketingu. Celem imprezy jest nie tylko wyłonienie najlepszego w Polsce autora treści,...

Zamknij