15 najlepszych darmowych narzędzi do testowania szybkości witryn w 2018 roku

  1. Co może przyspieszyć test witryny?
  2. Koncepcje prędkości witryny
  3. Czas na pierwszy bajt (TTFB)
  4. Blokowanie renderowania JavaScript i CSS
  5. JavaScript
  6. CSS
  7. Żądania HTTP
  8. 1. KeyCDN Test prędkości witryny
  9. 2. Google PageSpeed ​​Insights
  10. 3. Test prędkości Pingdom
  11. 4. GTmetrix
  12. 5. WebPageTest
  13. 6. Varvy Pagespeed Optimization
  14. 7. Trendy
  15. 9. PageScoring
  16. 12. Tester czasu obciążenia Sucuri
  17. 13. Pagelocity
  18. 14. YSlow
  19. Test prędkości witryny z rozszerzeniami Chrome
  20. Test prędkości witryny mobilnej
  21. streszczenie

Brian Jackson

Zaktualizowano 4 marca 2019 r

Zaktualizowano 4 marca 2019 r

Szybkość strony internetowej może być czynnikiem decydującym o jej sukcesie. Jak omówiono w naszym Przewodnik po sieci dostarczania treści Szybsze ładowanie witryn może przynieść korzyści dzięki wyższym rankingom SEO, wyższym współczynnikom konwersji, niższym współczynnikom odrzuceń, dłuższemu czasowi odwiedzania witryny, lepszemu ogólnemu doświadczeniu użytkownika i zaangażowaniu. Dlatego ważne jest, aby skorzystać z wielu ** darmowych narzędzi do testowania szybkości witryn dostępnych na rynku, aby uzyskać optymalną wydajność .

Google chce załadować Twoją witrynę Mniej niż sekunda

Co może przyspieszyć test witryny?

Oto kilka typowych sposobów korzystania z narzędzi do testowania prędkości witryn:

  • Wskazywanie skryptów, czcionek i wtyczek powodujących problemy z czasem ładowania (HTML, JavaScript, CSS)
  • Sprawdzanie minifikacji twoich skryptów
  • Znajdowanie dużych obrazów powodujących wąskie gardła
  • Ustalenie, czy blokujesz JavaScript lub CSS
  • Czas testowania pierwszego bajtu (TTFB)
  • Analiza całkowitych czasów ładowania, rozmiarów stron i liczby żądań
  • Sprawdzanie wydajności z różnych lokalizacji geograficznych
  • Sprawdzanie szybkości renderowania w różnych przeglądarkach
  • Analiza nagłówków HTTP
  • Pomiar wydajności sieci dostarczania treści
  • Sprawdzanie, czy zasoby ładują się poprawnie z twojego CDN

Koncepcje prędkości witryny

Przed uruchomieniem testu szybkości witryny ważne jest zrozumienie kilku koncepcji działania tych narzędzi, dzięki czemu można lepiej analizować dane, a następnie odpowiednio zoptymalizować witrynę. Nie tylko możesz przetestować szybkość swojego hosta internetowego, ale możesz także zmierzyć swoją Wydajność CDN .

Czas na pierwszy bajt (TTFB)

Czas do pierwszego bajtu (TTFB) to pomiar reakcji serwera WWW . Zasadniczo jest to czas, w którym przeglądarka musi zacząć otrzymywać informacje po tym, jak zażądała tego z serwera. Używając CDN możesz znacznie zmniejszyć wpływ obciążenia na twój serwer źródłowy, co z kolei powinno pomóc zmniejszyć TTFB.

Przeczytaj więcej o czas do pierwszego bajtu i czas na ostatni bajt.

Blokowanie renderowania JavaScript i CSS

Blokowanie renderowania odnosi się do JavaScript i CSS, które uniemożliwiają załadowanie strony tak szybko, jak to możliwe.

JavaScript

Google zaleca usunięcie lub odroczenie JavaScript to przeszkadza w ładowaniu powyższej zawartości stron internetowych. Oto świetny poradnik na temat prawidłowego działania odroczenie ładowania JavaScript .

Przykład odroczenia JavaScript przez umieszczenie go tuż przed tagiem </body>.

funkcja downloadJSAtOnload () {var element = document.createElement ("skrypt"); element.src = "defer.js"; document.body.appendChild (element); } if (window.addEventListener) window.addEventListener ("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent ("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;

CSS

Będziesz wtedy również chciał zoptymalizować dostarczanie CSS, aby uniknąć opóźnień w ładowaniu strony. Oto kilka sposobów rozwiązania tego problemu:

  1. Właściwie dzwoń do plików CSS
  2. Zmniejsz ilość plików CSS
  3. Użyj ogólnie mniej CSS

Oto świetny artykuł na ten temat blokowanie renderowania CSS Ilya Grigorik, inżynier ds. wydajności sieci w Google.

CSS to zasób blokujący renderowanie, sprowadź go do klienta jak najszybciej i jak najszybciej, aby zoptymalizować czas na pierwsze renderowanie!

Minifikacja zasobów oznacza usunięcie niepotrzebnych znaków z HTML, JavaScript i CSS, które nie są wymagane do załadowania, takich jak:

  • Białe znaki
  • Nowe znaki linii
  • Komentarze
  • Ograniczniki bloków

Przyspiesza to czas ładowania, ponieważ zmniejsza ilość kodu wymaganego od serwera. Możesz użyć narzędzia takiego jak CSS Dana i JavaScript Minify aby usunąć wszystkie niepotrzebne znaki. Lub jeśli używasz WordPressa, możesz użyć wtyczki takiej jak Autoptymalizuj co spowoduje zminimalizowanie całego kodu HTML, JavaScript i CSS.

Żądania HTTP

Gdy przeglądarka pobiera dane z serwera, robi to za pomocą protokołu HTTP (Hypertext Transfer Protocol). Jest to żądanie / odpowiedź między klientem a hostem. Ogólnie, im więcej żądań HTTP Twoja strona internetowa, tym wolniej się ładuje .

Istnieje wiele sposobów zmniejszenia liczby żądań, takich jak:

  • Łączenie plików CSS i JavaScript
  • Wstaw swój JavaScript (tylko jeśli jest bardzo mały)
  • Używanie spritów CSS
  • Redukcja zasobów, takich jak wtyczki innych producentów, które generują dużą liczbę żądań zewnętrznych

Teraz, gdy już masz podstawową wiedzę na temat powyższych koncepcji wydajności internetowej, zapoznaj się z poniższymi 15 darmowymi narzędziami do testowania szybkości swojej witryny. Każdy z nich oferuje własne unikalne funkcje, raportowanie i różne sposoby analizowania wyników.

Uwaga: Ważne jest również, aby uświadomić sobie, że podczas uruchamiania takich narzędzi takie wyszukiwanie DNS po raz pierwszy będzie zazwyczaj wolniejsze . Jeśli porównujesz całkowite czasy ładowania, czasami lepiej jest przeprowadzić testy wielokrotnie i wziąć średnią wyników.

1. KeyCDN Test prędkości witryny

KeyCDN zbudował szybki i lekki narzędzie do testowania prędkości witryny które możesz wykorzystać, aby uzyskać szczegółowe informacje na temat działania Twojej witryny. Jeśli oferuje 14 lokalizacji do wyboru z całego świata, masz możliwość uczynienia wyników testu prywatnymi lub publicznymi. Test obejmuje analizę wodospadu i wizualny podgląd strony na dole. Możesz szybko sprawdzić, ile złożono żądań HTTP, pełny rozmiar żądanej strony i czas ładowania .

Jest to również jedno z niewielu narzędzi oprócz PageSpeed, które reaguje i działa świetnie na urządzeniach mobilnych.

2. Google PageSpeed ​​Insights

Google PageSpeed ​​Insights to narzędzie do testowania prędkości witryny, które ocenia Twoją witrynę w skali od 1 do 100. Im wyższa liczba, tym lepiej jest zoptymalizowana witryna. Wszystko powyżej 85 wskazuje, że witryna działa dobrze. PageSpeed ​​udostępnia raporty zarówno dla wersji desktopowej, jak i mobilnej witryny. Możesz przeglądać zalecenia dotyczące ulepszeń, takich jak konieczność zminimalizowania CSS lub zoptymalizuj swoje zdjęcia .

PageSpeed ​​Insights mierzy, w jaki sposób strona może poprawić swoją wydajność na:

  • czas do obciążenia powyżej zakładki: czas, który upłynął od momentu, gdy użytkownik zażąda nowej strony i do momentu, w którym powyższa zawartość jest renderowana przez przeglądarkę.
  • czas do pełnego załadowania strony: czas, który upłynął od momentu, gdy użytkownik zażąda nowej strony do momentu pełnego wyświetlenia strony przez przeglądarkę.

Raport mobilny zawiera dodatkową kategorię o nazwie „Doświadczenie użytkownika”, która jest uwzględniana w ocenie witryny. Obejmuje to sprawdzenie konfiguracji rzutni, rozmiaru docelowych celów (przycisków i linków), a także odpowiednich rozmiarów czcionek.

Zespół PageSpeed ​​Insights również niedawno wprowadził nowe narzędzie do testowania prędkości witryn w „ pomyśl z Google ”, Które warto sprawdzić. Jedną z ciekawych funkcji są piękne raporty, które generuje. Może być świetny do wysyłania do klientów.

3. Test prędkości Pingdom

Pingdom jest prawdopodobnie jednym z bardziej znanych narzędzi do testowania szybkości witryn. Ich raporty są podzielone na cztery różne sekcje, w tym podział na wodospady, ocenę wydajności, analizę strony i historię.

Analiza strony oferuje świetny przegląd z dodatkowymi informacjami, takimi jak analiza rozmiaru, rozmiar w domenie (można łatwo porównać rozmiar zasobów CDN w porównaniu z domeną ), liczbę żądań w domenie i typ treści, który ma najwięcej żądań.

Narzędzie do testowania prędkości Pingdom pozwala również przetestować szybkość witryny z czterech głównych lokalizacji, w tym:

  • Dallas, Teksas, USA,
  • Melbourne, Australia
  • San Jose, Kalifornia, USA
  • Sztokholm, Szwecja

Wyniki testu prędkości Pingdom zapewniają wgląd w wydajność, podobny do Google PagesSpeed ​​Insights, który określa, gdzie można dokonać ulepszeń. Wyniki dzielą również rozmiar strony według typu treści, rozmiar strony według domeny, żądania według typu treści i żądania według domeny.

4. GTmetrix

GTmetrix idzie bardzo szczegółowo, ponieważ sprawdza zarówno PageSpeed, jak i YSlow metryki , przypisywanie Twojej witryny oceny od F do A. Raporty są podzielone na pięć różnych sekcji, w tym PageSpeed, YSlow, podział na wodospady, wideo i historię.

Dzięki bezpłatnej rejestracji możesz testować z siedmiu różnych lokalizacji. Pozwalają także wybrać przeglądarkę Chrome vs Firefox. Możesz przetestować i porównać wydajność strony internetowej z różnymi typami połączeń (np. Cable vs dial-up), aby zobaczyć, jak wpływa to na obciążenie strony. Inne zaawansowane funkcje obejmują odtwarzanie wideo w celu przeanalizowania, gdzie występuje wąskie gardło, a także możliwość uruchomienia Adblock plus. Gdy reklamy są wyłączone, możesz zobaczyć, jak wpływają one na ładowanie Twojej witryny.

Uwaga: Zaleca się utworzenie bezpłatnego konta, ponieważ otrzymasz dodatkowe opcje, takie jak te wymienione powyżej.

5. WebPageTest

WebPageTest jest bardzo podobny do niektórych wymienionych wcześniej narzędzi, ale ma ponad 40 lokalizacji do wyboru i ponad 25 przeglądarek (w tym mobilnych). Przypisuje ci ocenę od F do A na podstawie różnych testów wydajności, takich jak FTTB, kompresja, buforowanie, efektywne wykorzystanie CDN itp. Raport jest podzielony na sześć sekcji, które zawierają podsumowanie, szczegóły, przegląd wydajności, podział zawartości, i zrzuty ekranu.

Oferuje również unikalne podejście do testu. Działa to, co nazywają pierwszym widokiem i widokiem powtórzenia . Pomaga to zdiagnozować opóźnienie wyszukiwania DNS po raz pierwszy, jak wspomniano wcześniej. WebPageTest ma również bardziej zaawansowane funkcje, takie jak przechwytywanie wideo, wyłączanie JavaScript, ignorowanie certyfikatów SSL i fałszowanie ciągów agenta użytkownika.

6. Varvy Pagespeed Optimization

Varvy Pagespeed Optimization to narzędzie opracowane i utrzymywane przez Patricka Sextona, który stworzył także GetListed.org, który jest obecnie znany jako Moz Local.

Raporty są podzielone na 5 różnych sekcji, w tym diagram zasobów, dostarczanie CSS, użycie JavaScript, znalezione problemy z szybkością stron i używane usługi. To narzędzie wykorzystuje więcej ** ** graficznej reprezentacji tego, co można naprawić w witrynie, na przykład blokowanie renderowania .

Patrick wykonuje świetną robotę, włączając w to dokumentację dotyczącą dalszej optymalizacji witryny za pomocą samouczków dotyczących ścieżki renderowania krytycznego, wykorzystując buforowanie przeglądarki, odroczenie ładowania JavaScript i wiele więcej.

7. Trendy

Zwyżki jest dość prosty, ale oferuje ponad 35 lokalizacji do wyboru podczas przeprowadzania testu prędkości. Ich raport jest podzielony na dwie sekcje, podział na wodospady i grupy domen. Grupy domen oferują unikalną perspektywę, ponieważ kategoryzują zasoby na różne źródła : 1st party, statystyki, CDN, social, reklamy, pierwsza strona ogólna i ogólnie strona trzecia.

monitor dotcom oferuje 23 różne lokalizacje i siedem różnych przeglądarek, w których można uruchomić test prędkości witryny. Ich unikalną cechą jest możliwość jednoczesnego uruchamiania wszystkich testów geograficznych . Pozwala to zaoszczędzić dużo czasu, ponieważ każde inne narzędzie trzeba uruchamiać indywidualnie dla każdej lokalizacji. Następnie możesz kliknąć na każdy raport i / lub podział na wodospady.

Ich raporty są podzielone na pięć różnych sekcji, które zawierają podsumowanie, wyniki, wykres wodospadu (podział), hosta i błędy.

9. PageScoring

PageScoring polega na oferowaniu prostego i łatwego do zrozumienia raportu o wydajności w minimalistycznym stylu . Pokazują ogólny czas ładowania, a następnie następujące informacje:

  • Wyszukiwanie domen
  • Czas połączenia
  • Czas przekierowania
  • Rozmiar strony
  • Czas pobierania

Następnie możesz zobaczyć swoje zasoby i czas ładowania każdego z nich. Jeśli szukasz szybkiego i łatwego narzędzia do testowania prędkości witryny, działa to całkiem nieźle.

Żółte narzędzia laboratoryjne jest nowszym narzędziem do testowania wydajności stron internetowych i testowania jakości Gaël Métais . To narzędzie zapewnia wiele informacji i unikalnych funkcji, których nie widać w innych narzędziach, takich jak widok interakcji JavaScript z DOM podczas ładowania strony i inne problemy z weryfikacją kodu. Uzyskaj wynik globalny na podstawie następujących kwalifikatorów.

  • Waga strony
  • Upraszanie
  • DOM
  • Zły JavaScript
  • Zły CSS
  • Konfiguracja serwera

Oś czasu JavaScript pokazuje dokładnie, jak DOM współdziała podczas ładowania strony.

I oczywiście nie możemy zapomnieć Google Chrome DevTools . Jest to bardzo łatwe w użyciu narzędzie (z zaawansowanymi funkcjami) i można je szybko uruchomić w dowolnym momencie w przeglądarce Chrome, używając następujących klawiszy skrótów.

  • Windows: F12 lub Ctrl + Shift + I
  • Mac: Cmd + Opt + I

Z najnowszym aktualizacja narzędzi programistycznych , dodali zagregowany panel szczegółów do osi czasu wodospadu. Dzięki temu możesz łatwiej zobaczyć, co kosztuje Cię najwięcej czasu, a następnie możesz podzielić je według domen, subdomen itp. Aby uruchomić to kliknięcie na panelu „Oś czasu” i nacisnąć Ctrl + R (Cmd + R ), aby odświeżyć stronę. Następnie możesz kliknąć panel „Podsumowanie” i panel szczegółów „Zagregowane”.

Mamy też świetny post co blokuje DOM i jak to naprawić. W narzędziach programistycznych można dokładnie zobaczyć czas DOMContentLoaded i całkowity czas ładowania. Aby uruchomić to kliknięcie w panelu „Sieć”, kliknij opcję „Pokaż przegląd” i naciśnij Ctrl + R (Cmd + R), aby odświeżyć stronę. Niebieska linia pojawi się dla DOMContentLoaded i czerwona linia dla całkowitego czasu ładowania. Zwykle wszystko, co pozostało z niebieskiej linii lub jej dotyka, to zasoby blokujące DOM lub nazywane także blokującymi zasoby.

12. Tester czasu obciążenia Sucuri

The Tester czasu obciążenia Sucuri zapewnia szybki i łatwy sposób testowania wydajności witryn z całego świata. Zapewni to ogólną ocenę wydajności od A do F. Test mierzy czas potrzebny do połączenia się z witryną i do pełnego załadowania jednej strony. Bardzo ważną wartością, na którą należy zwrócić uwagę, jest „czas do pierwszego bajtu” , który określa, ile czasu zajęło wysłanie treści do przeglądarki, aby rozpocząć przetwarzanie strony.

13. Pagelocity

The Narzędzie Pagelocity oferuje inne unikalne podejście do testu prędkości witryny. Daje to łączny wynik na 100, składający się z czynników takich jak social, SEO, zasoby i kod. Narzędzie oferuje również możliwość śledzenia konkurencji. Możesz zarejestrować się na darmowe konto, aby skorzystać z dodatkowych funkcji. Widok kodu jest szczególnie wyjątkowy, ponieważ pokazuje, czy witryna działa przez HTTPS, czym jest TTFB, oraz interfejs graficzny elementów DOM z wykresem słupkowym.

Widok zasobów jest również bardzo interesujący, ponieważ można szybko sprawdzić, które aktywa tworzą całkowitą wagę strony. Jak widać na naszych testowych obrazach jest ponad 4x więcej niż w naszych zewnętrznych skryptach.

14. YSlow

YSlow to projekt i narzędzie open source, które analizuje strony internetowe i pomaga dowiedzieć się, dlaczego są powolne w oparciu o zasady Yahoo! Obecnie jest utrzymywany przez Marcela Durana, który jest również zaangażowany w projekt WebPageTest. YSlow działa w trzech krokach, aby uzyskać wyniki testu wydajności:

  1. YSlow indeksuje DOM, aby znaleźć wszystkie składniki (obraz, skrypty itp.).
  2. YSlow pobiera informacje o każdym rozmiarze komponentu (Gzip, nagłówki wygasające itp.)
  3. YSlow pobiera dane i generuje ocenę dla każdej reguły, co z kolei daje ogólną ocenę.

YSlow ma 23 różne reguły, które uruchamia twoją stronę internetową, aby ją ocenić, na przykład używając CDN i redukując wyszukiwania DNS. GTmetrix oferuje narzędzie do analizy online, aby sprawdzić wynik YSlow. Koniecznie zapoznaj się z naszym szczegółowym samouczkiem na temat jak poprawić swój wynik YSlow .

PerfTool jest projektem narzędzia wydajności po stronie klienta open source, hostowanym na GitHub. Gromadzi różne informacje o Twojej stronie i wyświetla je w łatwy do strawienia sposób na stronie raportów. Łączy w sobie trzy źródła danych w jednym: PageSpeed ​​Insights, devperf i W3CJS. W sumie daje ponad 200 różnych wskaźników wydajności.

Dużą zaletą narzędzia PerfTool jest możliwość jednoczesnego przeprowadzania testów wielu stron w raporcie Google PageSpeed ​​Insights. Następnie porównaj wyniki wydajności witryny z poprzednich testów, ustaw próg punktacji i uzyskaj szczegółowy raport na temat testów. Może to rzeczywiście zaoszczędzić dużo czasu, jeśli porównujesz wydajność całej witryny, ponieważ nie musisz testować stron jeden po drugim.

Test prędkości witryny z rozszerzeniami Chrome

Istnieje kilka darmowych rozszerzeń Chrome, w których możesz analizować szybkość witryny. Oto kilka z nich. Możesz łatwo uruchamiać je bezpośrednio w przeglądarce.

Test prędkości witryny mobilnej

Jeśli potrzebujesz uruchomić test prędkości witryny mobilnej, kilka narzędzi, o których mowa powyżej, obejmuje to:

  • WebPageTest
  • GTmetrix
  • monitor dotcom

Innym sposobem symulowania testu prędkości na urządzeniu mobilnym jest użycie Narzędzia dla programistów Chrome w trybie urządzenia . Aby wejść w tryb urządzenia, kliknij małą ikonę telefonu w Chrome DevTools lub możesz nacisnąć Ctrl + Shift + M (Cmd + Shift + M). Następnie możesz wybrać urządzenie, które chcesz emulować, orientację, a nawet rozdzielczość. Możesz również zmienić ograniczanie sieci, aby zobaczyć, w jaki sposób Twoja strona internetowa rzeczywiście powie na przykład zwykłe połączenie 2G lub 4G.

Następnie można użyć karty „Sieć” i podziału wodospadu, aby przeprowadzić testy prędkości.

streszczenie

Jak widać, dostępnych jest wiele narzędzi do testowania szybkości witryn. Każdy z nich ma swoje unikalne cechy, jak podkreślono powyżej. Dobrym pomysłem jest regularne testowanie witryny i ustanowienie testu porównawczego, aby z czasem można było ulepszać.

Kiedy już wiesz, gdzie są wąskie gardła, możesz je naprawić. Prawie wszystkie narzędzia wymienione powyżej zawierają rekomendacje. Niektóre z najczęstszych poprawek to:

  • Kompresowanie obrazów i plików
  • Wybór szybkiego hosta internetowego
  • Optymalizacja kodu i skryptów
  • Używać Sieć dostarczania treści
  • Buforowanie
  • Zmniejszenie liczby żądań HTTP

Co może przyspieszyć test witryny?