Top 15 Free Website Speed Test Tools of 2018

Szybkość strony internetowej może być czynnikiem krytycznym dla jej sukcesu. Jak omówiono w naszym przewodniku po sieci dostarczania treści, szybciej ładujące się strony internetowe mogą korzystać z wyższych rankingów SEO, wyższych współczynników konwersji, niższych współczynników odrzuceń, dłuższego czasu przebywania odwiedzających na stronie, lepszego ogólnego doświadczenia użytkownika i zaangażowania. Dlatego tak ważne jest, aby skorzystać z wielu darmowych narzędzi do testowania szybkości stron internetowych dostępnych na rynku, aby osiągnąć optymalną wydajność. Google chce, aby Twoja strona ładowała się w czasie krótszym niż jedna sekunda.

Co może pomóc Ci przeanalizować test prędkości strony?

Oto tylko kilka z najczęstszych sposobów wykorzystania narzędzi do testowania szybkości stron internetowych:

• Pinpointing scripts, fonts, and plugins causing load time issues (HTML, JavaScript, CSS)
• Checking minification of your scripts
• Finding large images resulting in bottlenecks
• Determining if you have render-blocking JavaScript or CSS
• Testing Time to First Byte (TTFB)
• Analyzing total load times, page sizes, and # of requests
• Checking performance from different geographical locations
• Checking rendering speed in different browsers
• Analyzing HTTP Headers
• Measuring performance of your content delivery network
• Verifying that assets are loading correctly from your CDN

Website speed concepts

Before running a website speed test it is important to understand a few concepts behind how these tools work so that you can better analyze the data and then optimize your site accordingly. Nie tylko możesz przetestować prędkość swojego hosta, ale możesz również zmierzyć wydajność swojego CDN.

Czas do pierwszego bajtu (TTFB)

Czas do pierwszego bajtu (TTFB) jest pomiarem responsywności serwera www. Zasadniczo jest to czas, jaki potrzebuje Twoja przeglądarka, aby zacząć otrzymywać informacje po tym, jak zażąda ich od 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 w zmniejszeniu TTFB.

Przeczytaj więcej o czasie do pierwszego bajtu i czasie do ostatniego bajtu.

Render-blocking JavaScript i CSS

Render-blocking odnosi się do JavaScript i CSS, które nie pozwalają Twojej stronie ładować się tak szybko jak by mogła.

JavaScript

Google zaleca usunięcie lub odroczenie JavaScript, który przeszkadza w ładowaniu treści powyżej strony. Here is a great tutorial on how to properly defer JavaScript loading.

Example of deferring JavaScript by placing it just before your </body> tag.

function downloadJSAtOnload() { var element = document.createElement("script"); 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

You will then also want to optimize your CSS delivery to keep it from causing delays on page load. Here are a few ways to fix this:

1. Properly call your CSS files
2. Lessen the amount of CSS files
3. Use less CSS overall

Here is a great article on render-blocking CSS by Ilya Grigorik, a web performance engineer at Google.

CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!

Minification of resources

Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as:

• Znaki białej spacji
• Znaki nowej linii
• Znaki ograniczające blok

Przyspiesza to czasy ładowania, ponieważ zmniejsza ilość kodu, który musi być żądany od serwera. Możesz użyć narzędzia takiego jak Dan’s CSS and JavaScript Minify, aby usunąć wszystkie niepotrzebne znaki. Lub jeśli używasz WordPressa, możesz użyć wtyczki takiej jak Autoptimize, która zminifikuje cały twój HTML, JavaScript i CSS dla ciebie.

Żądania HTTP

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

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

• Połączenie plików CSS i JavaScript
• Inline JavaScript (tylko jeśli jest bardzo mały)
• Używanie CSS Sprites
• Redukcja aktywów, takich jak wtyczki stron trzecich, które wykonują dużą liczbę żądań zewnętrznych

Lista narzędzi do testowania szybkości strony

Teraz, gdy masz już podstawowe zrozumienie koncepcji wydajności strony internetowej powyżej, sprawdź te 15 darmowych narzędzi poniżej do testowania szybkości witryny. Każde z nich oferuje własne, unikalne funkcje, raportowanie i różne sposoby analizowania wyników.

Jest również ważne, aby zdać sobie sprawę z tego, że pierwsze wyszukiwanie DNS będzie zazwyczaj wolniejsze. Jeśli porównujesz całkowite czasy ładowania, czasami lepiej jest przeprowadzić testy wiele razy i wyciągnąć średnią z wyników.

KeyCDN Website Speed Test

KeyCDN zbudował szybkie i lekkie narzędzie Website Speed Test, które możesz wykorzystać do uzyskania szczegółowych informacji na temat działania Twojej strony. Narzędzie oferuje 14 lokalizacji do wyboru z całego świata, a użytkownik ma możliwość uczynienia wyników testu prywatnymi lub publicznymi. Test zawiera podział na wodospady i wizualny podgląd strony na dole. Możesz szybko zobaczyć, ile żądań HTTP zostało wykonanych, pełny rozmiar żądanej strony i czas ładowania.

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

Google PageSpeed Insights

Google PageSpeed Insights to narzędzie do testowania szybkości stron internetowych, które ocenia Twoją stronę w skali od 1 do 100. Im wyższa liczba, tym lepiej zoptymalizowana jest Twoja strona. Wszystko powyżej 85 oznacza, że Twoja strona działa dobrze. PageSpeed daje Ci raporty zarówno dla wersji desktopowej jak i mobilnej Twojej strony. Możesz wyświetlić rekomendacje dotyczące ulepszeń, takich jak potrzeba minifikacji CSS lub optymalizacji obrazów.

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

• Czas do załadowania powyżej złożenia: Czas, który upłynął od momentu, gdy użytkownik zażąda nowej strony do momentu, gdy zawartość above-the-fold zostanie wyrenderowana przez przeglądarkę.
• Czas do pełnego załadowania strony: Czas, jaki upłynął od momentu, gdy użytkownik zażądał nowej strony do momentu, gdy strona jest w pełni renderowana przez przeglądarkę.

Raport mobilny zawiera dodatkową kategorię o nazwie „Doświadczenie użytkownika”, która jest uwzględniona w ocenie Twojej witryny. Obejmuje ona sprawdzenie konfiguracji rzutni, rozmiaru docelowych elementów tap (przycisków i linków), a także kwalifikujących się rozmiarów czcionek.

Zespół PageSpeed Insights uruchomił również niedawno nowe narzędzie do testowania szybkości stron internetowych, które warto sprawdzić we współpracy z Google. Jedną z fajnych funkcji są piękne raporty, które generuje. Mogą być świetne do wysyłania do klientów.

Pingdom Speed Test

Pingdom jest prawdopodobnie jednym z bardziej znanych narzędzi do testowania prędkości stron internetowych. Ich raporty są podzielone na cztery różne sekcje, które zawierają podział wodospadowy, ocenę wydajności, analizę strony i historię.

Analiza strony oferuje świetny przegląd z dodatkowymi informacjami, takimi jak analiza rozmiaru, rozmiar na domenę (można łatwo porównać rozmiar aktywów CDN z domeną), liczba żądań na domenę i jaki typ zawartości miał najwięcej żądań.

Narzędzie do testowania prędkości Pingdom pozwala również na testowanie prędkości Twojej strony z czterech głównych lokalizacji, w tym:

• Dallas, Texas, USA,
• Melbourne, Australia
• San Jose, California, USA
• Stockholm, Szwecja

Wyniki testu prędkości Pingdom dostarczają Ci wglądu w wydajność, podobnie jak Google PagesSpeed Insights, które pokazują, gdzie możesz wprowadzić ulepszenia. Wyniki rozkładają również rozmiar strony według typu zawartości, rozmiar strony według domeny, żądania według typu zawartości oraz żądania według domeny.

GTmetrix

GTmetrix wchodzi w szczegóły, ponieważ sprawdza zarówno PageSpeed jak i YSlow metryki, przypisując twojej stronie ocenę od F do A. Jego raporty są podzielone na pięć różnych sekcji, w tym PageSpeed, YSlow, rozkład wodospadowy, wideo i historia.

Przy darmowej rejestracji możesz testować z siedmiu różnych lokalizacji. Pozwalają również wybrać przeglądarkę, Chrome vs Firefox. Możesz testować i porównywać wydajność strony z różnymi typami połączeń (np. kabel vs dial-up), aby zobaczyć jak wpływa to na ładowanie strony. Inne zaawansowane funkcje obejmują odtwarzanie wideo, aby przeanalizować, gdzie występuje wąskie gardło, a także możliwość uruchomienia Adblock plus. Z wyłączonymi reklamami można zobaczyć, jak wpływają one na ładowanie witryny. Zalecane jest utworzenie darmowego konta, ponieważ otrzymasz dodatkowe opcje, takie jak te wymienione powyżej.

WebPageTest

WebPageTest jest bardzo podobny do niektórych z poprzednich wymienionych narzędzi, ale ma ponad 40 lokalizacji do wyboru i ponad 25 przeglądarek (w tym mobilne). Przypisuje Ci ocenę od F do A w oparciu o różne testy wydajności, takie 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ł treści i zrzuty ekranu.

Oferuje on również unikalne podejście do testu. Prowadzi to, co nazywają pierwszym widokiem i widokiem powtórzenia. Pomaga to zdiagnozować, co może być pierwszym opóźnieniem DNS lookup, jak wspomniano wcześniej. WebPageTest posiada również bardziej zaawansowane funkcje, takie jak przechwytywanie wideo, wyłączanie JavaScript, ignorowanie certyfikatów SSL i spoofing ciągów agenta użytkownika.

Varvy PageSpeed Optimization

Varvy PageSpeed Optimization to narzędzie opracowane i utrzymywane przez Patricka Sextona, który stworzył również GetListed.org, który jest teraz znany jako Moz Local.

Raporty są podzielone na 5 różnych sekcji, w tym schemat zasobów, dostarczanie CSS, użycie JavaScript, znalezione problemy z szybkością strony i używane usługi. Narzędzie to wykorzystuje bardziej graficzną reprezentację tego, co można naprawić w witrynie, np. blokowanie renderowania.

Patrick wykonuje świetną robotę, włączając również dokumentację dotyczącą dalszej optymalizacji witryny z samouczkami na temat krytycznej ścieżki renderowania, wykorzystania buforowania przeglądarki, odroczenia ładowania JavaScript i wielu innych.

Uptrends

Uptrends jest dość podstawowy, ale oferuje ponad 35 lokalizacji do wyboru podczas przeprowadzania testu prędkości. Ich raport jest podzielony na dwie sekcje, podział wodospadowy i grupy domen. Grupy domen oferuje unikalną perspektywę, jak to kategoryzuje zasoby do różnych źródeł: 1st party, statystyki, CDN, social, reklamy, first party overall i third party overall.

dotcom-monitor

dotcom-monitor oferuje 23 różne lokalizacje i siedem różnych przeglądarek, w których można przeprowadzić test prędkości strony. Ich unikalną cechą jest to, że można uruchomić wszystkie testy geograficzne jednocześnie. To może zaoszczędzić sporo czasu, jak każde inne narzędzie trzeba uruchomić je indywidualnie dla każdej lokalizacji. Możesz następnie kliknąć w każdy indywidualny raport lub rozkład wodospadowy.

Raporty są podzielone na pięć różnych sekcji, które zawierają podsumowanie, wydajność, wykres wodospadowy (rozkład), host i błędy.

PageScoring

PageScoring is all about offering a simple and easy to understand performance report with a minimalist design. They show your overall load time and then the following pieces of information:

• Domain lookups
• Connection Time
• Redirection Time
• Page Size
• Download Time

You can then see your assets and how long it took for each to load. If you are looking for a quick and easy website speed test tool, this works pretty good.

Yellow Lab Tools

Yellow Lab Tools is a newer web performance and frontend quality testing tool developed by Gaël Métais. This tool gives you a lot of information and some unique features not seen in other tools such as a view of when JavaScript interactions with the DOM during the loading of the page and other code validation issues. Get a global score based on the following qualifiers.

• Page weight
• Requests
• DOM
• Bad JavaScript
• Bad CSS
• Server Config

The JavaScript timeline shows you exactly how the DOM interacts during the loading of the page.

Google Chrome DevTools

And of course we can’t forget Google Chrome DevTools. It is a very easy to use tool (with advanced features) and you can quickly launch it at anytime in your Chrome broswer using the following shortcut keys.

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

Wraz z najnowszą aktualizacją narzędzi deweloperskich, dodali zagregowany panel szczegółów do osi czasu wodospadu. Pozwala to łatwiej zobaczyć, co kosztuje Cię najwięcej czasu, a następnie można go podzielić na domeny, subdomeny itp. Aby to uruchomić, kliknij w panelu „Oś czasu” i naciśnij Ctrl + RCmd + R), aby odświeżyć stronę. Następnie możesz kliknąć w panel „Podsumowanie” i panel szczegółów „Aggregated”.

Mamy też świetny post o tym, co blokuje DOM i jak to naprawić. W narzędziach deweloperskich możesz zobaczyć dokładnie czas DOMContentLoaded i całkowity czas ładowania. Aby go uruchomić kliknij w panelu „Network”, kliknij na opcję „Show Overview” i naciśnij Ctrl + RCmd + R) aby odświeżyć stronę. Pojawi się niebieska linia dla DOMContentLoaded i czerwona linia dla całkowitego czasu ładowania. Zazwyczaj wszystko, co znajduje się po lewej stronie lub dotyka niebieskiej linii to zasoby blokujące DOM, lub określane również jako zasoby blokujące renderowanie.

Tester Czasu Wczytywania Sucuri

Tester Czasu Wczytywania Sucuri zapewnia szybki i łatwy sposób testowania wydajności Twoich stron z całego świata. W ten sposób otrzymasz globalną ocenę wydajności, od A do F. Test mierzy, jak długo trwa połączenie z Twoją witryną i pełne załadowanie 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 zajmuje przesłanie treści do przeglądarki, aby ta zaczęła przetwarzać stronę.

Pagelocity

Narzędzie Pagelocity oferuje inne unikalne podejście, jeśli chodzi o test prędkości strony. Daje całkowity 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 swoich konkurentów. Możesz zarejestrować się na darmowe konto, aby skorzystać z dodatkowych funkcji. Widok kodu jest szczególnie wyjątkowy, ponieważ pokaże Ci, czy Twoja strona działa przez HTTPS, jaki jest Twój TTFB i graficzny interfejs Twoich elementów DOM z wykresem słupkowym.

Widok zasobów jest również dość interesujący, ponieważ możesz szybko zobaczyć, które aktywa składają się na całkowitą wagę strony. Jak widać w naszym teście obrazy są ponad 4x cięższe niż nasze zewnętrzne skrypty.

YSlow

YSlow jest projektem open source i narzędziem, które analizuje strony internetowe i pomaga dowiedzieć się dlaczego są powolne w oparciu o zasady Yahoo! dla stron o wysokiej wydajności. Jest on obecnie prowadzony 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 przeszukuje DOM w celu znalezienia wszystkich komponentów (obrazów, skryptów, itp.).
2. YSlow uzyskuje informacje o rozmiarze każdego komponentu (Gzip, wygaśnięcie nagłówków, 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ć, takie jak korzystanie z CDN i zmniejszenie liczby wyszukiwań DNS. GTmetrix oferuje narzędzie do analizy online, aby sprawdzić swój wynik YSlow. Upewnij się, że sprawdzisz nasz dogłębny poradnik jak poprawić swój wynik YSlow.

PerfTool

PerfTool jest narzędziem open source, hostowanym na GitHubie. Zbiera różne informacje o Twojej witrynie i wyświetla je w przystępny sposób na stronie raportów. Łączy w sobie trzy źródła danych w jednym: PageSpeed Insights, devperf i W3CJS. W sumie daje ci ponad 200 różnych wskaźników wydajności.

Jedną z największych zalet PerfTool jest to, że możesz uruchomić testy wielu stron w tym samym czasie dla raportu Google PageSpeed Insights. Następnie porównaj wyniki wydajności strony z poprzednich testów, ustaw próg punktowy i uzyskaj szczegółowy raport na temat swoich testów. This can actually save you a lot of time if you are benchmarking your entire site’s web performance, as you don’t have to test your pages one by one.

Website speed test with Chrome extensions

There are quite a few free Chrome extensions in which you can analyze website speed. Here are a couple of them. You can easily launch them from right within your browser.

• Page Load Time
• app.telemetry Page Speed Monitor
• Performance-Analyser
• LoadFocus Load Testing

Mobile website speed test

If you are needing to run a mobile website speed test a couple of the tools we mentioned above do include this:

• WebPageTest
• GTmetrix
• dotcom-monitor

Another way to simulate a speed test on a mobile device is to use Chrome developer tools in device mode. Aby przejść do trybu urządzenia, kliknij małą ikonę telefonu w Chrome DevTools lub naciśnij Ctrl + Shift + MCmd + Shift + M). Następnie możesz wybrać, jakie urządzenie chcesz emulować, orientację, a nawet rozdzielczość. Możesz także zmienić dławienie sieci, aby zobaczyć, jak twoja strona będzie wyglądać na zwykłym połączeniu 2G lub 4G.

Możesz użyć zakładki „Sieć” i rozkładu wodospadowego, aby przeprowadzić testy prędkości.

Podsumowanie

Jak widzisz, istnieje wiele narzędzi do testowania prędkości stron internetowych, z których możesz wybierać. Każde z nich ma swoje własne unikalne cechy, jak podkreślono powyżej. Dobrym pomysłem jest regularne testowanie swojej strony i ustalenie punktu odniesienia, aby z czasem móc wprowadzać ulepszenia.

Gdy już wiesz, gdzie znajdują się wąskie gardła, możesz zacząć je naprawiać. Prawie wszystkie z powyższych narzędzi zawierają listę zaleceń. Some of the most common fixes include:

• Compressing your images and files
• Picking a fast web host
• Optimizing your code and scripts
• Using a content delivery network
• Caching
• Reducing the number of HTTP requests