A 2018-as év 15 legjobb ingyenes weboldal sebességteszt eszköze

A weboldal sebessége kritikus tényező lehet a siker szempontjából. Amint azt a tartalomszolgáltató hálózatról szóló útmutatónkban tárgyaltuk, a gyorsabban betöltődő webhelyek előnyére válhat a magasabb SEO-rangsorolás, a magasabb konverziós arány, az alacsonyabb visszafordulási arány, a látogatók webhelyen töltött hosszabb időtartama, a jobb általános felhasználói élmény és az elkötelezettség. Ezért fontos, hogy kihasználja a számos ingyenesen elérhető webhelysebesség-tesztelő eszköz előnyeit, hogy optimális teljesítményt érhessen el. A Google azt szeretné, ha webhelye kevesebb mint egy másodperc alatt betöltődne.

Mit segíthet elemezni egy webhely sebességteszt?

Itt csak néhány a webhelyek sebességtesztelő eszközeinek gyakori felhasználási módjai közül:

• 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. Nemcsak a webtárhelye sebességét tesztelheti, hanem a CDN teljesítményét is mérheti.

Time to first byte (TTFB)

A Time to first byte (TTFB) a webszerver reakciókészségének mérése. Alapvetően az az idő, amely alatt a böngésző elkezdi fogadni az információt, miután azt a kiszolgálótól kérte. Egy CDN használatával drámaian csökkentheti az eredeti szerver terhelésének hatását, ami viszont segíthet csökkenteni a TTFB-t.

Az első bájtig és az utolsó bájtig eltelt időről bővebben olvashat.

Renderblokkoló JavaScript és CSS

A renderblokkolás olyan JavaScriptre és CSS-re utal, amelyek megakadályozzák, hogy az oldal olyan gyorsan töltődjön be, ahogyan lehetne.

JavaScript

A Google azt javasolja, hogy távolítsa el vagy halassza el az olyan JavaScriptet, amely akadályozza a weboldalak hajtás feletti tartalmának betöltését. 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:

• Fehér szóköz karakterek
• Új sor karakterek
• Blokkhatárolók

Ez felgyorsítja a betöltési időt, mivel csökkenti a szervertől lekérdezendő kód mennyiségét. Egy olyan eszközzel, mint a Dan’s CSS and JavaScript Minify, eltávolíthatja az összes felesleges karaktert. Vagy ha WordPress-t használsz, használhatsz egy olyan bővítményt, mint az Autoptimize, amely az összes HTML, JavaScript és CSS kódot minimalizálja helyetted.

HTTP-kérések

Amikor a böngésződ adatokat hív le egy szerverről, azt a HTTP (Hypertext Transfer Protocol) segítségével teszi. Ez egy kérés/válasz a kliens és a hoszt között. Általában minél több HTTP-kérést intéz a weboldal, annál lassabban töltődik be.

A kérések számát sokféleképpen csökkentheti, például:

• A CSS- és JavaScript-fájlok kombinálása
• Inline JavaScript (csak ha nagyon kicsi)
• CSS Sprite-ok használata
• A nagy számú külső kérést végző eszközök, például harmadik féltől származó bővítmények csökkentése

A weboldal sebességtesztelő eszközeinek listája

Most, hogy már alapvetően megértette a fenti webes teljesítményfogalmakat, nézze meg az alábbi 15 ingyenes eszközt a weboldal sebességének teszteléséhez. Mindegyikük saját egyedi funkciókat, jelentéseket és különböző módokat kínál az eredmények boncolgatására.

Az ilyen eszközök futtatásakor azt is fontos figyelembe venni, hogy az első DNS-keresés általában lassabb lesz. Ha a teljes betöltési időt hasonlítja össze, néha jobb, ha többször futtatja a teszteket, és az eredményekből átlagot vesz.

KeyCDN Website Speed Test

A KeyCDN egy gyors és könnyű Website Speed Test eszközt épített, amellyel részletes betekintést nyerhet weboldalának teljesítményébe. If 14 helyszín közül választhat a világ minden tájáról, és lehetősége van arra, hogy a teszteredményeket priváttá vagy nyilvánossá tegye. A teszt vízeséses bontást és vizuális weboldal-előnézetet tartalmaz az alján. Gyorsan láthatja, hogy hány HTTP-kérés történt, a kért oldal teljes méretét és a betöltési időt.

A PageSpeed mellett ez az egyetlen olyan eszköz, amely reszponzív és mobileszközökön is kiválóan működik.

Google PageSpeed Insights

A Google PageSpeed Insights egy weboldal sebességtesztelő eszköz, amely egy 1-100-ig terjedő skálán osztályozza a weboldalát. Minél magasabb a szám, annál jobban optimalizált a webhelye. Minden 85 feletti érték azt jelzi, hogy webhelye jól teljesít. A PageSpeed mind a webhelye asztali, mind a mobil verziójára vonatkozóan jelentéseket ad. Megtekintheti a fejlesztésekre vonatkozó ajánlásokat, például, hogy szükség van-e a CSS minimalizálására vagy a képek optimalizálására.

A PageSpeed Insights azt méri, hogyan javíthatja az oldal teljesítményét:

• Time to above-the-fold load: Az eltelt idő attól a pillanattól kezdve, hogy a felhasználó új oldalt kér és attól a pillanattól kezdve, hogy a böngésző megjeleníti az above-the-fold tartalmat.
• A teljes oldal betöltéséig eltelt idő: Az eltelt idő attól a pillanattól kezdve, amikor a felhasználó új oldalt kér, addig a pillanatig, amikor az oldalt a böngésző teljes egészében megjeleníti.

A mobil jelentés tartalmaz egy extra kategóriát, a “Felhasználói élmény” nevű kategóriát, amely szerepel a webhely pontozásában. Ez magában foglalja a nézetablak konfigurációjának ellenőrzését, a tap targetek (gombok és linkek) méretét, valamint a megfelelő betűméreteket is.

A PageSpeed Insights csapata nemrég egy új weboldal sebességteszt eszközt is elindított a Google-lal közösen, amelyet érdemes lehet megnézni. Az egyik szép funkciója a gyönyörű jelentések, amelyeket generál. Nagyszerű lehet az ügyfeleknek való elküldéshez.

Pingdom Speed Test

A Pingdom valószínűleg az egyik legismertebb weboldal sebességtesztelő eszköz. Jelentéseik négy különböző részre oszthatók, amelyek vízesés szerinti bontást, teljesítményfokozatot, oldalelemzést és előzményeket tartalmaznak.

Az oldalelemzés nagyszerű áttekintést nyújt olyan további információkkal, mint a méretelemzés, a domainenkénti méret (könnyen összehasonlíthatja a CDN-eszközök méretét a domainjével), a domainenkénti kérések száma és az, hogy milyen típusú tartalomra érkezett a legtöbb kérés.

A Pingdom sebességteszt eszközével négy fő helyszínről is tesztelheti webhelye sebességét, többek között:

• Dallas, Texas, USA,
• Melbourne, Ausztrália
• San Jose, Kalifornia, USA
• Stockholm, Svédország

A Pingdom sebességteszt eredményeiből a Google PagesSpeed Insights-hoz hasonlóan megismerheti a teljesítményt, amelyből kiderül, hol tud javítani. Az eredmények az oldalméretet tartalomtípusonként, az oldalméretet tartományonként, a lekérdezéseket tartalomtípusonként és a lekérdezéseket tartományonként is lebontják.

GTmetrix

AGTmetrix nagyon részletes, mivel a PageSpeed és az YSlow mérőszámokat is ellenőrzi, és F-től A-ig osztályozza webhelyét. A jelentések öt különböző részre vannak osztva, beleértve a PageSpeed, YSlow, vízesés szerinti bontást, videót és előzményeket.

Az ingyenes regisztrációval hét különböző helyről tesztelhet. Azt is lehetővé teszik, hogy kiválaszd a böngészőt, Chrome vs Firefox. Tesztelheti és összehasonlíthatja a webhely teljesítményét különböző kapcsolattípusokkal (például kábel vs. betárcsázás), hogy lássa, hogyan befolyásolja az oldalletöltéseket. Egyéb fejlett funkciók közé tartozik a videólejátszás, hogy elemezze, hol jelentkezik a szűk keresztmetszet, valamint az Adblock plus futtatásának lehetősége. A hirdetések letiltásával láthatja, hogy azok hogyan befolyásolják az oldal betöltését. Ajánlott ingyenes fiókot készíteni, mivel további, például a fent említett opciókat is megkapja.

WebPageTest

A WebPageTest nagyon hasonlít az előzőekben említett néhány eszközhöz, de több mint 40 helyszín és több mint 25 böngésző (köztük mobil) közül választhat. A különböző teljesítménytesztek, például az FTTB, a tömörítés, a gyorsítótárazás, a CDN hatékony használata stb. alapján F-től A-ig terjedő osztályzatot ad. A jelentés hat részre oszlik, amelyek tartalmaznak összefoglalót, részleteket, teljesítményértékelést, tartalmi bontást és képernyőképeket.

Egyedülálló megközelítést is kínál a teszthez. Lefuttat egy úgynevezett első nézetet és egy ismételt nézetet. Ez segít diagnosztizálni, hogy mi lehet a korábban említett első DNS-keresési késedelem. A WebPageTest további fejlett funkciókkal is rendelkezik, mint például a videófelvétel, a JavaScript letiltása, az SSL-tanúsítványok figyelmen kívül hagyása és a felhasználói ügynöksztringek meghamisítása.

Varvy PageSpeed Optimization

A Varvy PageSpeed Optimization egy Patrick Sexton által kifejlesztett és karbantartott eszköz, aki a GetListedet is létrehozta.org-ot, amely ma már Moz Local néven ismert.

A jelentések 5 különböző részre vannak bontva, beleértve az erőforrás diagramot, a CSS szállítást, a JavaScript használatot, a talált oldalsebességi problémákat és az igénybe vett szolgáltatásokat. Ez az eszköz inkább grafikus ábrázolást használ arról, hogy mit lehetne javítani a webhelyén, például a renderelés blokkolását.

Patrick nagyszerű munkát végez, és dokumentációt is tartalmaz arról, hogyan optimalizálhatja tovább a webhelyét a kritikus renderelési útvonalról, a böngésző gyorsítótárának kihasználásáról, a JavaScript halasztott betöltéséről és sok másról szóló útmutatókkal.

Uptrends

Az Uptrends meglehetősen egyszerű, de több mint 35 helyszín közül választhat a sebességteszt futtatása során. A jelentésük két részre van bontva, vízeséses bontásra és domain csoportokra. A domaincsoportok egyedi perspektívát kínálnak, mivel különböző forrásokba sorolja az erőforrásokat: 1. fél, statisztikák, CDN, közösségi oldalak, hirdetések, első fél összességében és harmadik fél összességében.

dotcom-monitor

dotcom-monitor 23 különböző helyet és hét különböző böngészőt kínál, amelyekben lefuttathatja a weboldal sebességtesztjét. Egyedülálló tulajdonságuk, hogy az összes földrajzi tesztet egyszerre futtathatja. Ezzel rengeteg időt takaríthat meg, mivel minden más eszközt helyenként külön-külön kell futtatnia. Ezután rákattinthat az egyes jelentésekre és a vízesés szerinti bontásra.

A jelentéseik öt különböző részre vannak osztva, amelyek közé tartozik az összefoglaló, a teljesítmény, a vízesésdiagram (bontás), a hoszt és a hibák.

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

A legutóbbi fejlesztői eszközfrissítéssel egy összesített részletpanelt adtak hozzá a vízesés idővonalához. Így könnyebben láthatja, hogy mi kerül a legtöbb időbe, és ezt domainekre, aldomainekre stb. lebonthatja. Ennek futtatásához kattintson az “Idővonal” panelre, és nyomja meg a Ctrl + RCmd + R) gombot az oldal frissítéséhez. Ezután rákattinthatsz az “Összegzés” panelre és az “Összesített” részletek panelre.

Egy nagyszerű bejegyzésünk is van arról, hogy mi blokkolja a DOM-ot és hogyan javíthatod. A fejlesztői eszközökben pontosan láthatod a DOMContentLoaded időt és a teljes betöltési időt. Ennek futtatásához kattintson a “Hálózat” panelre, kattintson az “Áttekintés megjelenítése” opcióra, és nyomja meg a Ctrl + RCmd + R) gombot az oldal frissítéséhez. Megjelenik egy kék vonal a DOMContentLoaded és egy piros vonal a teljes betöltési időre vonatkozóan. Általában minden, ami a kék vonaltól balra van, vagy azt érinti, a DOM-ot blokkoló eszközök, vagy más néven renderelést blokkoló erőforrások.

Sucuri Load Time Tester

A Sucuri Load Time Tester gyors és egyszerű módot biztosít a webhelyek teljesítményének tesztelésére a világ minden tájáról. Egy globális teljesítményosztályzatot ad Önnek, A-tól F-ig. A teszt azt méri, hogy mennyi időbe telik a webhelyéhez való csatlakozás és egy oldal teljes betöltése. Nagyon fontos érték, amelyre érdemes odafigyelni, az “első bájtig tartó idő”, amely megadja, hogy mennyi időbe telt, amíg a tartalom visszakerült a böngészőhöz, hogy az elkezdje feldolgozni az oldalt.

Pagelocity

A Pagelocity eszköz egy másik egyedülálló megközelítést kínál, amikor a webhely sebességének teszteléséről van szó. Egy 100-as összpontszámot ad, amely olyan tényezőkből áll, mint a közösségi oldal, a SEO, az erőforrások és a kód. Az eszköz lehetőséget kínál a versenytársak nyomon követésére is. Ingyenes fiókot regisztrálhat, hogy kihasználhassa a további funkciókat. A kód nézet különösen egyedi, mivel megmutatja, hogy webhelye HTTPS-en keresztül fut-e, mennyi a TTFB-je, és egy grafikus felületet biztosít a DOM-elemekről egy oszlopdiagrammal.

A források nézet is nagyon érdekes, mivel gyorsan láthatja, hogy mely eszközök alkotják az oldal teljes súlyát. Ahogy a tesztünkben látható, a képek több mint 4x akkora súlyt képviselnek, mint a külső szkriptek.

YSlow

A myslow egy nyílt forráskódú projekt és eszköz, amely elemzi a weboldalakat, és segít kitalálni, hogy miért lassúak a Yahoo! nagy teljesítményű webhelyekre vonatkozó szabályai alapján. Jelenleg Marcel Duran gondozza, aki a WebPageTest projektben is részt vesz. Az YSlow három lépésben működik, hogy megkapja a teljesítményteszt eredményeit:

2. AYSlow átnézi a DOM-ot, hogy megtalálja az összes komponenst (kép, szkriptek stb.).
3. AYSlow információt kap az egyes komponensek méretéről (Gzip, lejáró fejlécek stb.)
5. YSlow veszi az adatokat, és minden egyes szabályhoz egy osztályzatot generál, ami viszont egy általános osztályzatot ad.

YSlow-nak 23 különböző szabálya van, amelyekkel szemben lefuttatja a webhelyét, hogy osztályozza azt, például CDN használata és a DNS-lekérdezések csökkentése. A GTmetrix online elemző eszközt kínál az YSlow pontszámának ellenőrzéséhez. Nézze meg részletes útmutatónkat arról, hogyan javíthatja YSlow pontszámát.

PerfTool

A PerfTool egy nyílt forráskódú kliensoldali teljesítményeszköz projekt, amely a GitHubon található. Különböző információkat gyűjt a weboldaladról, és könnyen emészthető módon megjeleníti azokat egy jelentésoldalon. Három adatforrást egyesít egyben: PageSpeed Insights, devperf és W3CJS. Összesen több mint 200 különböző teljesítménymutatót ad meg.

A PerfTool egyik nagy előnye, hogy a Google PageSpeed Insights jelentéshez egyszerre több oldal tesztjét is lefuttathatja. Ezután összehasonlíthatja a weboldal teljesítményének eredményeit a korábbi tesztekkel, beállíthatja a ponthatárt, és részletes jelentést kaphat a tesztjeiről. 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. Az eszköz üzemmódba való belépéshez kattintson a Chrome DevToolsban a kis telefon ikonra, vagy nyomja meg a Ctrl + Shift + MCmd + Shift + M) gombot. Ezután kiválaszthatja, hogy milyen készüléket szeretne emulálni, a tájolást és még a felbontást is. Megváltoztathatja a hálózati fojtást is, hogy lássa, hogyan jelenne meg a webhelye valójában mondjuk egy normál 2G vagy 4G kapcsolaton.

Azután a “Hálózat” fül és a vízesés szerinti bontás segítségével sebességteszteket futtathat.

Összefoglaló

Amint láthatja, számos webhely sebességtesztelő eszköz közül választhat. Mindegyiknek megvan a maga egyedi jellemzője, ahogy azt fentebb kiemeltük. Jó ötlet rendszeresen tesztelni a webhelyét, és létrehozni egy viszonyítási alapot, így idővel javíthat rajta.

Ha már tudja, hol vannak a szűk keresztmetszetek, elkezdheti kijavítani őket. A fenti eszközök szinte mindegyike ajánlásokat sorol fel. 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