Bezpłatna konsultacja

Jak sprawdzić szybkość strony internetowej i ją zwiększyć? Analiza szybkości strony

Kategoria: Pozycjonowanie

Nikt nie lubi czekać. Zwłaszcza wtedy, kiedy ma się alternatywę w postaci 9 pozostałych stron w wyszukiwarce i to tylko na jej pierwszej stronie. Jak ważna więc jest szybkość? Postaramy się przekonać Cię, że bardzo i podpowiemy, jak analiza szybkości strony powinna wyglądać.

SPIS TREŚCI:

Dlaczego warto przyspieszyć stronę?

Bo to, że warto, to więcej niż pewne. Ale jakie są konkretne powody, dla których optymalizacja sklepu internetowego powinna zawierać także poprawę szybkości strony?

Współczynnik konwersji i bounce rate

Twoi klienci mogą przecież szczególnie lubić Twój sklep i dlatego chętnie poczekają, aż strona w całości się załaduje. Mało prawdopodobne prawda? I co z nowymi klientami?

Wybrali Twoją stronę spośród wielu, Twoje szanse na to, że właśnie u ciebie znajdą to, czego szukają, są teraz naprawdę wysokie. Niestety, z każdą kolejną sekundą oczekiwania na załadowanie strony maleją. Aż w końcu potencjalny klient decyduje się szukać szczęścia u kogo innego. Klient - to właśnie najprostszy i najważniejszy powód, dlaczego warto zainteresować się tematem i wdrożyć rozwiązania przyspieszające stronę.

Szybkość strony może w dużej mierze wpłynąć na współczynnik konwersji, jak również na współczynnik odrzuceń. Także dlatego, że strona, która wolno się wczytuje, sprawia wrażenie… mało profesjonalnej. Zwłaszcza w sklepie internetowym, gdzie klient planuje dokonać płatności, obawa przed zawieszeniem się witryny w ważnym momencie procesu, może zadecydować o opuszczeniu naszego sklepu.

Ładowanie strony internetowej na mobile

Jakość przystosowania strony do urządzeń mobilnych to znacznie szerszy temat, skupmy się więc jedynie na prędkości. W przypadku smartfonów czy tabletów szybkość ładowania stron jest nawet istotniejsza niż dla wyników desktopowych. Badania wskazują, że dla sklepów internetowych już nawet jednosekundowe opóźnienie w ładowaniu urządzeń mobilnych może wpłynąć na konwersje mobilne nawet o 20%. Czy Twoja strona często odwiedzana jest z urządzeń mobilnych? To kolejny argument.

OHbJy.jpg

Z każdą kolejną sekundą ładowania witryny współczynnik konwersji e-commerce spada średnio o 0,3%. źródło: https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.html

Szybkość ładowania stron a indeksowanie

Co ciekawe, niecierpliwością cechują się również roboty indeksujące Google. Niska szybkość strony może bowiem powodować i opóźnienia w jej indeksowaniu. Z uwagi na crawl budget zbyt długo wczytujące się elementy strony mogą zostać nieprawidłowo zaindeksowane, a wyszukiwarka może nawet porzucić skanowanie, uznając Twoją stronę za małowartościową.

Prędkość strony a SEO

Czy pozycjonując stronę, warto zwrócić uwagę na jej prędkość? Zdecydowanie, jest to jeden z ważnych elementów, który może pomóc w promocji strony. Oczywistym jest, że przyspieszenie strony o sekundę czy dwie nie przykryje niedopracowanej treści, czy braku podstawowej optymalizacji, jednak przy zadbanej i zoptymalizowanej stronie może przesądzić o wyższości nad stroną konkurencyjną. Przygotowując lub zlecając audyt sklepu internetowego, warto zadbać, aby znalazły się w nim wskazówki dotyczące optymalizacji strony pod kątem szybkości.

Narzędzia do oceny prędkości strony

No dobrze, przekonaliśmy Cię, że warto. Czas na podpowiedź, jak sprawdzić szybkość ładowania strony i na co zwrócić uwagę. Przedstawiamy kilka narzędzi, które ułatwiają analizę szybkości strony:

Google PageSpeed Insights

Najpopularniejszy, darmowy test szybkości strony internetowej od Google. Analiza za pomocą narzędzia PageSpeed Insights jest dość szybka (w zależności od wielkości strony — może zająć kilka do kilkunastu sekund) i wymaga jedynie podania adresu strony, którą chcemy przebadać.

MQeoG.png

Narzędzie PageSpeed Insights

Po wygenerowaniu analizy otrzymujemy wynik szybkości strony dla wersji mobilnej i komputerowej wyrażony w 100-punktowej skali oraz ocenę jakości strony według podstawowych wskaźników internetowych. Nowa aktualizacja narzędzia pozwala nie tylko zbadać problemy z wydajnością, ale także wychwycić błędy w budowie strony czy braki w optymalizacji pod kątem SEO.

qqWOh.png

Ocena wydajności strony, dostępności, stosowaniu sprawdzonych metod tworzenia stron internetowych oraz optymalizacji.

Wraz z wynikami otrzymujemy także sugestie rozwiązań, które mogą pomóc przyśpieszyć wczytywanie strony. Na czerwono zaznaczone są uwagi, których wdrożenie może mieć duży wpływ na prędkość strony. Pomarańczowym kolorem oznaczono wskazówki, których wpływ jest umiarkowany.

Wpływ wartości poszczególnych wskaźników na ocenę prędkości strony sprawdzisz w kalkulatorze Lighthouse.

GTmetrix

Narzędzie GTmetrix to kolejny test szybkości strony. W darmowej wersji otrzymujemy dostęp do oceny wydajności strony pod kątem poprawności budowy strony oraz podstawowych wskaźników internetowych (tylko wersja desktop, dla testu mobile wymagane jest konto PRO).

r1NmU.png

Analiza szybkości strony narzędziem GTmetrix.

Dodatkowo otrzymujemy wizualizację szybkości wczytywania poszczególnych elementów strony, żądanie po zadaniu w postaci wykresu wodospadowego.

Jak czytać wykres wodospadowy waterfall GTmetrix?

fz2ID.png

Wykres wodospadowy w GTmetrix

Wykres wodospadowy przedstawia wczytywanie witryny internetowej żądanie po żądaniu. Tutaj wyświetlany jest każdy skrypt czy plik graficzny, który ładuje Twoja strona.

Dzięki wykresowi kaskadowemu możesz zaobserwować co i w jakiej kolejności zostało załadowane, a także jak długo trwało przetwarzanie każdego żądania. W pierwszej kolumnie znajdziesz nazwy plików i zasobów, a co istotniejsze, ich rozszerzenia, które wskażą Ci, z jakim typem zasobów masz problem. W drugiej kolumnie znajdują się statusy odpowiedzi HTTP z informacją, czy żądanie się powiodło. Trzecia i czwarta kolumna zawierają informacje o pochodzeniu pliku i jego rozmiarze. Na tym etapie szczególnie zwróć uwagę na poszczególne wartości — jeśli któryś z plików znacząco wyróżnia się wielkością, to znak, czym należy zająć się w pierwszej kolejności.

Piąta, najistotniejsza kolumna przedstawia określony czas trwania wymagany do załadowania każdego żądania.

Zwróć uwagę na kolory poziomych pasków.

  • Brązowy – blokowanie (czas oczekiwania żądania w kolejce)
  • Niebieski — DNS Lookup (ile czasu zajmuje przekształcenie nazwy hosta na adres IP)
  • Zielony — łączenie (czas wymagany do utworzenia połączenia TCP między serwerem a hostem)
  • Czerwony — wysyłanie (czas potrzebny na wysłanie żądania do serwera)
  • Fioletowy — czekanie (czas oczekiwania na wygenerowanie odpowiedzi przez serwer)
  • Szary — odbieranie (czas potrzebny przeglądarce na pobranie odpowiedzi)

Na wykresie znajdziemy również pionowe linie, które sygnalizują osiągnięcie określonych kamieni milowych podczas wczytywania strony. Oto co oznacza każdy kolor:

  • Zielona linia – First Contentful Paint (moment, kiedy renderuje się pierwszy element na stronie)
  • Niebieska linia – DOM Loaded (moment kiedy objekt DOM zostaje całkowicie załadowany)
  • Czerwona linia – Onload (witryna i jej elementy zostały pobrane i są przetwarzane przez przeglądarkę)
  • Fioletowa linia – strona w pełni załadowana

Jaka szybkość strony jest odpowiednia?

No dobrze, znasz już podstawowe narzędzia, zapewne Twoja analiza szybkości strony jest już gotowa i wiesz, z jaką prędkością wczytuje się Twoja witryna. A jak szybko powinna się wczytywać?

Ogólnie mówiąc, zaleca się, by prędkość ładowania strony nie przekraczała 2 sekund.

Więcej mówią nam jednak w tym temacie podstawowe wskaźniki internetowe, czyli Core Web Vitals, które dokładniej określają:

Podstawowe wskaźniki internetowe

  • Largest Contentful Paint (LCP)
    – wskaźnik mierzący wydajność ładowania witryny. Aby zapewnić użytkownikom jak najlepsze wrażenia, LCP nie powinno przekraczać 2,5 sekundy od momentu kliknięcia linku.
  • First Input Delay (FID)
    – wskaźnik mierzący interaktywność i responsywność strony. FID obrazuje, jak szybko użytkownik może zacząć korzystać ze strony- zakładek czy linków i powinien wynosić maksymalnie 100 milisekund.
  • Cumulative Layout Shift (CLS)
    – wskaźnik służący do pomiaru stabilności wizualnej strony. CLS pozwala określić, jak często użytkownicy doświadczają nagłych przesunięć elementów witryny. Zalecane jest utrzymywanie wskaźnika na poziomie do 0,1.
  • Inne ważne wskaźniki
    • First Contentful Paint (FCP)
      – określa czas potrzebny od rozpoczęcia ładowania strony do momentu, kiedy treść jest widoczna dla użytkownika. Zaleca się, aby pierwsze zobrazowanie treści trwało maksymalnie 1,8 sekundy.

    • Time to First Byte (TTFB)
      – wskaźnik mierzący czas od wysłania żądania HTTP do pierwszej odpowiedzi serwera. Pozwala zidentyfikować, kiedy nasz serwer jest zbyt wolny. Przyjmuje się, aby dążyć, by czas do pierwszego bajtu wynosił do 0,8 sekund.

    • Interaction to Next Paint (INP)
      – eksperymentalny wskaźnik mierzący responsywność strony i problemy z interakcją na podstawie zliczania wszystkich kliknięć wykonanych przez użytkownika. Dobrą responsywność oznacza INP do 200 milisekund.

Musimy też zaznaczyć, że powyższe pomiary i wskaźniki obrazują sytuację idealną, nierzadko trudną do osiągnięcia. Zależy to od typu strony, jej rozmiaru czy użytych rozwiązań. Przykładowo sklep internetowy o szerokim asortymencie i rozbudowanym menu uzyska niższą ocenę niż statyczna strona usługowa z kilkoma zakładkami. Warto więc włączyć do swojej analizy także analizę konkurencji i przyjrzeć się ocenie szybkości ładowania konkurencyjnych witryn. To może znacząco zweryfikować wymogi i dać Ci realny cel, do którego warto dążyć.

Jak przyspieszyć ładowanie strony? Najczęstsze błędy z analizy szybkości strony

Teraz kiedy masz już pełen obraz tego, jaka jest idealna szybkość ładowania dla poszczególnych funkcji, warto zastanowić się, dlaczego strona długo się ładuje. Oprócz powodów wynikających ze specyfiki strony, o których wspomnieliśmy wyżej, możesz zadbać o kilka kwestii, które z pewnością ułatwią ładowanie. Będzie to z pewnością wybór odpowiedniego hostingu i serwera, aktywacja Google AMP, rezygnacja z ozdobników i zbędnych dodatków na stronie (wyskakujące okienka, banery czy ozdobny padający śnieg), a także ogólne uproszczenie strony. Warto wyeliminować także nadmierne przekierowania zawarte na stronie — usuwając puste podstrony czy nieaktywne linki wychodzące.

Dodatkowo omawiane narzędzia mogą wskazać nam konkretne podpowiedzi, jak przyspieszyć ładowanie strony. Oto kilka z nich:

HtoOc.png

Sugestie, jak poprawić szybkość ładowania strony.

  • Włącz kompresję
    Pliki CSS, HTML i JavaScript powyżej 150 kB warto zmniejszyć za pomocą Gzip, aplikacji do kompresji plików.
  • Wyeliminuj zasoby blokujące renderowanie
    Umieść krytyczny kod JS/CSS w kodzie strony i opóźnij ładowanie wszystkich niekrytycznych plików JS i stylów.
  • Ogranicz nieużywany JavaScript
    Ogranicz nieużywany JavaScript i opóźnij ładowanie skryptów do momentu, aż będą wymagane.
  • Wyświetlaj obrazy w formatach nowej generacji
    Zamień formaty plików graficznych z PNG lub JPEG na WebP i AVIF, które umożliwiają lepszą kompresję.
  • Skróć wstępny czas reakcji serwera
    Zadbaj, by czas reakcji serwera dla głównego dokumentu na stronie był jak najkrótszy.
  • Ogranicz nieużywany kod CSS
    Ogranicz nieużywane reguły z arkuszy stylów i opóźnij ładowanie kodu CSS.
  • Minifikuj JavaScript
  • Unikaj wyświetlania starszych skryptów JavaScript w nowoczesnych przeglądarkach

Zastosuj nowoczesną strategię wdrażania skryptów JavaScript opartą na wykrywaniu ich atrybutów „module” i „nomodule”.

Podsumowanie

Optymalizując stronę internetową, nie można zapominać o zadbaniu o szybkość ładowania strony. Niezależnie więc czy zajmujesz się tym osobiście, czy Twoja witryna jest pod opieką agencji, warto mieć na uwadze, że powinna być ona przede wszystkim przyjazna dla użytkowników. Warto więc zadbać, aby potencjalny klient nie tylko znalazł na naszej stronie to, czego poszukuje, ale także by nie zraził się zbyt długim czekaniem.

Należy również pamiętać, żeby analizować osobno każdy rodzaj podstron osobno jak: strona główna, kategorie, produkty czy wpisy blogowe. Najczęściej każdy rodzaj podstron korzysta z innych szablonów i może mieć inne problemy.

Traffic Trends Sp. z o.o.

NIP 7773174094
e-mail: bok@traffictrends.pl
tel. 888 211 157

Znajdź nas również tu:

Zapisz się na newsletter

Wysyłamy go raz w tygodniu i nie spamujemy!