10 narzędzi Page Speed, aby zobaczyć, jak szybko ładują się Twoje strony docelowe

Większość witryn traci połowę odwiedzających podczas ładowania strony. To szokująca rzeczywistość, w którą trudno uwierzyć, ale może nie, jeśli weźmie się pod uwagę, że średni współczynnik odrzuceń strony internetowej wynosi dzisiaj 58,18%. Co gorsza, średni współczynnik odrzuceń strony docelowej po kliknięciu wynosi od 60 do 90%.

Strony mobilne są w równym stopniu dotknięte niską szybkością stron. Badanie Google i SOASTA z 2016 r. wykazało, że średni czas ładowania witryny mobilnej w przypadku sesji odbitych był o około 2,5 sekundy wolniejszy niż w przypadku sesji nieodrzuconych.

Szybsze ładowanie stron internetowych zazwyczaj generuje niższe współczynniki odrzuceń, oprócz wyższych rankingów SEO, dłuższych wizyt w witrynie, większego zaangażowania i wyższych współczynników konwersji. Przy tak silnej korelacji między czasem ładowania a współczynnikiem odrzuceń marketerzy muszą korzystać z narzędzi do pomiaru szybkości strony, aby uzyskać maksymalne wyniki.

Zanim przeanalizujemy najbardziej zaufane narzędzia do testowania szybkości strony, przyjrzyjmy się najczęstszym czynnikom i elementom strony, które na nią wpływają.

Jak wpływa na szybkość strony?

Po wysłaniu żądania strony składniki po stronie frontonu i po stronie serwera muszą zakończyć swoje indywidualne operacje. Więc nawet po zoptymalizowaniu front-endu możesz jeszcze bardziej przyspieszyć czas ładowania, optymalizując stronę serwerową (w jaki sposób strona jest generowana przez serwer):

Ponieważ obie strony są sekwencyjne, ich łączny czas jest uważany za całkowity czas wczytywania strony.

Oto niektóre z najczęstszych czynników, które spowalniają szybkość strony na powyższym obrazku:

• Duże obrazy i grafika tekstowa
• Wideo
• Długość strony
• Skrypty, czcionki i wtyczki (HTML, JavaScript, CSS)
• Niepotrzebne przekierowania
• Geografia (kraj, miasto, organizacja, dostawca usług internetowych, prędkość sieci)
• Przepustowość łącza

Poniższe narzędzia pomagają w testowaniu różnych problemów, umożliwiając lepsze zrozumienie szybkości witryny.

10 najbardziej zaufanych narzędzi szybkości strony

Uwaga: każde z tych narzędzi oferuje własne unikalne funkcje, raportowanie i sposoby analizowania wyników, co oznacza, że ​​możesz otrzymywać różne wyniki czasu wczytywania strony. Istotną rolę odgrywa również odległość geograficzna między lokalizacją testową a serwerem, na którym hostowana jest Twoja witryna. Ponadto uruchomienie narzędzia po raz pierwszy może być wolniejsze, dlatego najlepiej przeprowadzać testy wiele razy i brać średnią wyników.

1. GTmetrix

GTmetrix analizuje Twoją witrynę, używając kombinacji 27 zaleceń dotyczących szybkości strony (test szybkości Google) i 19 zaleceń YSlow (test szybkości Yahoo). U góry raportu znajdują się oceny wydajności od A do F, a także szczegóły strony, w tym czas ładowania, rozmiar strony i żądania liczby.

Czas wczytywania jest domyślnie podawany jako „czas pełnego załadowania” (czas od początkowego przejścia użytkownika do strony do 2 sekund po braku aktywności w sieci). „Czas ładowania” jest opcjonalny (po zakończeniu przetwarzania strony internetowej i zakończeniu pobierania wszystkich zasobów na stronie, w tym obrazów, tekstu i skryptów). Pozostała część raportu jest podzielona na sześć różnych sekcji: PageSpeed, YSlow, wodospad, czasy, wideo i historia.

GTmetrix umożliwia testowanie i porównywanie wydajności witryny z różnymi typami połączeń, aby zobaczyć, jak wpływa to na szybkość ładowania strony. Oferuje funkcję ograniczania połączeń, aby symulować możliwe typy połączeń internetowych, z których mogą korzystać odwiedzający witrynę: kablówka, DSL, telefon komórkowy 3G, telefon komórkowy 2G i modem 56K. Możesz także wybrać Chrome lub Firefox jako możliwą przeglądarkę.

To narzędzie ma 7 lokalizacji testowych, ale zapewnia łącznie 28 dedykowanych serwerów testowych: 11 w Vancouver w Kanadzie; 5 w Dallas, USA; 7 w Londynie, Wielka Brytania; 2 w São Paulo w Brazylii; 1 w Sydney w Australii; 1 w Bombaju w Indiach; i 1 w Hongkongu w Chinach.

GTmetrix obsługuje protokół HTTP/2, który ładuje strony internetowe szybciej niż HTTP/1.1, próbując rozwiązać wiele niedociągnięć i ograniczeń protokołu HTTP/1.1. Zalety HTTP/2 obejmują:

• Multipleksowanie i współbieżność (kilka żądań może być wysyłanych w krótkich odstępach czasu na tym samym połączeniu TCP)
• Zależności strumieniowe
• Kompresja nagłówka
• Serwer push

Ponadto GTmetrix jest jednym z niewielu narzędzi do pomiaru szybkości strony, które oferuje również testowanie wydajności mobilnej. Wykorzystuje dwa telefony Samsung Galaxy Nexus, dzięki czemu użytkownicy mogą generować raporty wydajności na podstawie rzeczywistych wczytań stron na tych urządzeniach.

2. Pingdom

Pingdom pozwala przetestować szybkość witryny z 3 głównych lokalizacji:

• Dallas, Teksas
• Melbourne, Australia
• San Jose, Kalifornia

Zapewnia ocenę wydajności na podstawie zaleceń Google PageSpeed ​​dla wersji bezpłatnej i zaleceń YSlow dla wersji płatnej. Pingdom wyświetla również czas ładowania, rozmiar strony, liczbę żądań i sposób testowania witryny w porównaniu z innymi witrynami. Dodatkowe informacje obejmują podział rozmiaru strony według typu zawartości, rozmiaru strony według domeny, żądań według typu zawartości i domeny.

Jedną z głównych zalet testu prędkości Pingdom jest to, że użytkownicy otrzymują informacje o wydajności, określające, gdzie można wprowadzić ulepszenia. Jednak w przeciwieństwie do GTmetrix, Pingdom oferuje tylko czas ładowania (nie w pełni załadowany), nie oferuje ograniczania połączeń i nie obsługuje protokołu HTTP/2.

3. Google PageSpeed ​​Insights

PageSpeed ​​Insights to test szybkości Google, który podaje zalecenia dotyczące ulepszeń i ocenia Twoją stronę od 0 do 100 punktów na podstawie dwóch parametrów:

1. Czas do wczytania w części strony widocznej na ekranie (całkowity czas potrzebny na wyświetlenie treści w części strony widocznej po przewinięciu przez użytkownika)
2. Czas do wczytania całej strony (czas potrzebny przeglądarce na pełne wyrenderowanie strony po zażądaniu jej przez użytkownika)

Im wyższy wynik, tym lepiej zoptymalizowana jest Twoja witryna, a wszystko powyżej 85 oznacza, że ​​Twoja strona działa dobrze.

PageSpeed ​​Insights udostępnia raporty dla wersji strony na komputery i urządzenia mobilne. Pobiera adres URL dwukrotnie — raz za pomocą mobilnego klienta użytkownika i raz za pomocą klienta użytkownika na komputerze. Raport na urządzenia mobilne zawiera dodatkową kategorię o nazwie „Wrażenia użytkownika”, która obejmuje konfigurację widocznego obszaru, rozmiar elementów dotykowych (przycisków i linków) oraz rozmiary czcionek.

Zespół PageSpeed ​​Insights uruchomił również niedawno nowe narzędzie do pomiaru szybkości strony w „Think with Google”, które jest następne na liście.

4. Think with Google: Przetestuj moją witrynę

Różnica polega na tym, że testuje tylko szybkość stron mobilnych.

U góry strony z wynikami znajdują się czas ładowania i szacowana utrata odwiedzających (odzwierciedlająca procent odwiedzających utraconych z Twojej strony z powodu czasu ładowania):

„Czas ładowania” to indeks prędkości (nie jest to czas pełnego załadowania), mierzący, jak długo widoczna zawartość strony pojawia się w przeglądarce Chrome na urządzeniu Moto G4 w sieci 3G. (Uwaga: do testowania używana jest sieć 3G, ponieważ do 2020 r. 70% połączeń sieci komórkowych na całym świecie będzie się odbywać z prędkością 3G lub mniejszą).

Środkowa część wyników to porównanie branżowe, obliczone na podstawie wewnętrznego badania Google obejmującego ponad 5 milionów stron internetowych:

Na koniec narzędzie Testuj moją witrynę pokazuje, ile czasu można zaoszczędzić, wprowadzając kilka poprawek na swojej stronie, wraz ze szczegółowym raportem poprawek zalecanych przez PageSpeed ​​Insights:

5. Karta wyników szybkości Google

Speed ​​Scorecard zawiera w swojej bazie danych tysiące witryn w 12 różnych krajach i umożliwia porównanie do 10 domen, aby zobaczyć, jak wypada Twoja witryna mobilna. Możesz także porównać szybkość ładowania strony zarówno w przypadku połączeń 3G, jak i 4G.

Skoro omówiliśmy, jak powolne wczytywanie strony może wpływać na współczynniki odrzuceń i współczynniki konwersji, co z przychodami? Aby dać Ci wyobrażenie, Google dołączył również Kalkulator Wpływu, aby oszacować kwotę potencjalnych przychodów marek, które mogą tracić na wolno ładujących się stronach:

Aby zobaczyć szacunkowe straty, wypełnij pola kalkulatora: domena, aktualna prędkość, średnia miesięczna liczba odwiedzających, średnia wartość zamówienia i współczynnik konwersji (wiele z nich można znaleźć w panelu Google Analytics).

6. Klucz CDN

KeyCDN to kolejne narzędzie do szybkości strony, które działa dobrze na urządzeniach mobilnych. KeyCDN oferuje 16 lokalizacji testowych do wyboru z całego świata z opcją, aby wyniki testów były prywatne lub udostępniane publicznie.

Wyniki obejmują podział kaskadowy z podglądem witryny na dole. W wynikach możesz zobaczyć, ile wykonano żądań HTTP, pełny rozmiar żądanej strony i czas ładowania.

7. Test strony internetowej

WebPagetest zawiera ponad 40 różnych lokalizacji testowych do wyboru i ponad 25 przeglądarek — w tym 14 urządzeń mobilnych. Dostępnych jest tak wiele lokalizacji testowych, ponieważ każdy może hostować lokalizację testową dla WebPagetest, o ile spełnia ona minimalne wymagania systemowe.

Testy można przeprowadzać z funkcją ograniczania połączeń, aby symulować potencjalne połączenia internetowe, z których mogą korzystać odwiedzający witrynę: Cable, DSL, 3G Slow, 3G, 3G Fast, 4G, LTE, Mobile Edge, 2G, 56K dial-up, FIOS, Native Connection i prędkości niestandardowe.

Oferuje unikalne podejście do testowania, uruchamiając „pierwszy widok” i „powtórz widok”. Zapewnia również bardziej zaawansowane funkcje, takie jak przechwytywanie wideo, transakcje wieloetapowe, blokowanie treści, wyłączanie JavaScript, ignorowanie certyfikatów SSL i fałszowanie ciągów agenta użytkownika.

Gdy WebPagetest udostępnia swoje wyniki, przypisuje Twojej witrynie ocenę literową od A do F, domyślnie na podstawie czasu pełnego załadowania, z opcjonalnym czasem włączenia. Inne parametry punktacji obejmują FTTB, kompresję, buforowanie, efektywne wykorzystanie CDN i inne. Raport jest podzielony na sześć sekcji — podsumowanie, szczegóły, przegląd wydajności, podział treści i zrzuty ekranu — które zawierają szczegółowe informacje diagnostyczne z wykresami kaskadowymi, sprawdzaniem optymalizacji Page Speed ​​i sugestiami ulepszeń.

Ostatnią uwagą jest to, że HTTP/2 jest obsługiwany przez WebPagetest.

8. Dotcom-monitor

Dotcom-Monitor oferuje 20 różnych lokalizacji testowych na całym świecie i siedem przeglądarek, w tym mobilne i oparte na chmurze. Unikalną cechą tego narzędzia jest to, że możesz uruchomić wszystkie testy geograficzne jednocześnie, a następnie kliknąć każdy raport, aby dowiedzieć się o nich więcej.

Raporty są podzielone na pięć sekcji — podsumowanie, wydajność, podział kaskadowy, host i błędy, pod którymi można znaleźć:

• Podsumowanie według lokalizacji
• Testowanie czasu ładowania wszystkich elementów strony w oparciu o przeglądarkę
• Wykrywanie wolnych/brakujących elementów
• 10% najszybszych elementów
• 10% najwolniejszych elementów
• Kompleksowy wykres kaskadowy
• Podział według elementu hosta (w tym DNS, połączenie, SSL, żądanie, pierwszy pakiet i pobieranie)
• Kontrola błędów i diagnostyka

9. Pagelocity

Narzędzie Pagelocity jest dostępne i responsywne zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Przypisuje użytkownikom łączny wynik na 100 punktów na podstawie takich elementów, jak stan treści, struktura strony i kodowanie. Raport zawiera:

• Podsumowanie treści: cenne informacje na temat treści tekstowej Twojej strony (słowa kluczowe, linki do nagłówków, tekst alternatywny dla obrazów itp.)
• Podział zasobów: informacje dotyczące struktury strony — liczba obrazów, skryptów lub plików stylów, które zawiera, a także zawartość blokująca renderowanie oraz sposób, w jaki te czynniki mogą wpływać na czas wczytywania strony
• Wskazówki i spostrzeżenia dotyczące kodu: sugestie dotyczące aktualizacji kodu, aby był łatwiejszy w utrzymaniu i rozszerzalny dzięki przydatnym danym na temat znaczników (klasy/identyfikatory, tagi, Google PageSpeed, Time to First Byte itp.)

Unikalną cechą Pagelocity jest analiza konkurencji z dodatkowymi wskaźnikami, które dostarcza, pokazując Twoją przewagę nad konkurencją i wszelkie słabości, jakie mogą mieć.

10. YSlow

YSlow to projekt open source, który analizuje strony internetowe w oparciu o 23 z 34 reguł Yahoo! dotyczących witryn o wysokiej wydajności. Aby wygenerować wyniki testu wydajności, należy wykonać trzy kroki:

• Indeksuje DOM, aby znaleźć wszystkie komponenty (obraz, skrypty itp.)
• Pobiera informacje o każdym rozmiarze komponentu (gzip, nagłówki wygaśnięcia itp.)
• Wykorzystuje dane do wygenerowania oceny dla każdej reguły, dając Ci ocenę ogólną

YSlow oferuje również podsumowanie strony ze statystykami, sugestiami ulepszeń i narzędziami do analizy wydajności (w tym Smush.it i JSLint).

Aby uruchomić narzędzie szybkości strony YSlow, możesz użyć rozszerzenia YSlow chrome lub uzyskać wyniki YSlow z GTMetrix.

Należy zauważyć, że wyniki, spostrzeżenia i informacje zwrotne, które zapewnia każde z tych narzędzi, są zaleceniami — a nie sztywnymi regułami lub wymaganiami, które muszą zostać spełnione. Pamiętaj też, że być może już robisz to, co sugeruje raport, i być może narzędzie tego nie wychwyciło.

Jeśli zdecydujesz, że musisz wprowadzić zmiany, aby Twoje strony internetowe ładowały się szybciej i zapewniały lepsze wrażenia użytkownika, istnieje kilka typowych sposobów.

Jak marki mogą przyspieszyć swoje strony internetowe?

Powyższe narzędzia są bardzo przydatne do sprawdzania głównych problemów ze stroną, które można łatwo naprawić. Poświęćmy więc chwilę, aby omówić tutaj kilka z tych poprawek.

Optymalizuj obrazy

Upewnij się, że obrazy nie są większe niż powinny, mają prawidłowy format pliku i są skompresowane do użytku w internecie. 25% stron może zaoszczędzić ponad 250 KB dzięki kompresji obrazów i tekstu, a 10% może zaoszczędzić ponad 1 MB. Jeśli chodzi o wideo, pomiń go lub umieść plik na innej platformie (np. YouTube lub Vimeo), a nie na swoich serwerach.

Załaduj asynchronicznie

Wybranie ładowania asynchronicznego umożliwia ładowanie elementów jednocześnie, a nie sekwencyjnie, aby zapobiec opóźnieniom w szybkości ładowania strony.

Zminimalizuj CSS, JavaScript i HTML

Zoptymalizuj swój kod, eliminując spacje, przecinki i inne niepotrzebne znaki, usuwając komentarze w kodzie i minimalizując formatowanie.

Zmniejsz przekierowania

Zmniejszenie przekierowań robi dużą różnicę, ponieważ za każdym razem, gdy strona jest przekierowywana na inną stronę, odwiedzający musi czekać jeszcze dłużej na zakończenie cyklu żądanie-odpowiedź HTTP.

Buforuj swoje strony

Buforowanie przeglądarki oznacza, że ​​przeglądarka nie musi ponownie ładować całej strony, gdy ktoś ponownie odwiedzi Twoją witrynę. Buforując informacje, takie jak arkusze stylów, obrazy i pliki JavaScript, zmniejszasz liczbę żądań do serwera, znacznie przyspieszając czas ładowania strony.

Popraw czas reakcji serwera

Na czas odpowiedzi serwera wpływa wiele czynników: natężenie ruchu, zasoby wykorzystywane przez każdą stronę, oprogramowanie używane przez serwer i rozwiązanie hostingowe. Aby skrócić czas odpowiedzi serwera, poszukaj wąskich gardeł wydajności, takich jak powolne zapytania do bazy danych i routing oraz brak odpowiedniej pamięci.

Wybierz narzędzie szybkości strony, które odpowiada Twoim potrzebom

Decyzja, którego narzędzia użyć, ostatecznie sprowadza się do danych, które chcesz śledzić i mierzyć w swojej witrynie. Pomimo różnic w funkcjonalności każdy z nich zapewnia dużą wartość w identyfikowaniu obszarów, w których Twoja witryna może działać wolno, oraz dostarczaniu informacji i zaleceń dotyczących jej przyspieszenia.

Projektując szybko ładujące się strony docelowe po kliknięciu, nic nie może się równać z AMP. Dzięki unikalnej strukturze i minimalnemu kodowi HTML strony docelowe AMP po kliknięciu mogą wczytywać się natychmiast, co zapewnia doskonałe wrażenia użytkownika. Zobacz, jak kreator Instapage AMP umożliwia marketingowcom cyfrowym szybkie i łatwe tworzenie i publikowanie szybko ładujących się plików, prosząc o demo już dziś.