Weboldal sebességmérés modern eszközökkel: Így működik a Sebességtesztem

A sebesség nem csak kényelmi szempont – az SEO és a felhasználói élmény egyik legfontosabb pillére. Megmutatom, hogyan építettem fel a saját Sebességteszt eszközömet, amely segít átlátni a weboldalak betöltési folyamatát.

Miért fontos a sebesség mérése?

A Google adatai szerint ha egy oldal betöltése 1 másodpercről 3-ra nő, a visszafordulási arány (bounce rate) 32%-kal ugrik meg. Ahhoz, hogy optimalizálni tudjunk, először mérnünk kell. Az eszközöm a szerveroldali lekérés közben méri az időket (performance.now()) és a ténylegesen átvitt bájtokat.

A mérési metódus: TTFB és Load Time

Az eszközöm két fő fázisra bontja a mérést:

1. TTFB (Time to First Byte): Ez azt méri, mennyi idő telik el a kérés elküldése és az első bájt megérkezése között. Ez kritikus a szerver válaszidejének megértéséhez.
2. Teljes letöltési idő: Amíg a teljes HTML dokumentum megérkezik, az esetleges átirányításokkal együtt.

// Elméleti példa a mérésre
const start = performance.now();
const response = await fetch(url);
const ttfb = performance.now() - start;
const html = await response.text();
const fullLoad = performance.now() - start;

Erőforrások feltérképezése

A letöltött HTML-ből az eszköz megszámolja a külső és inline szkripteket, a stíluslapokat, a képeket és az iframe-eket. Nem szimulál időzítéseket – csak valódi, mért adatokat mutat.

Ez segít felismerni, ha egy oldal túl sok szkriptet vagy képet tölt be, ami lassíthatja a megjelenítést.

Mérés a szerverünkről

A böngészők biztonsági szabályai (CORS) miatt egy másik weboldalt közvetlenül nem lehet lemérni, ezért a lekérést egy saját, védett végpont végzi: csak nyilvános címeket enged, szigorú idő- és méretkorláttal. Nem használ külső API-kat (mint a Lighthouse vagy a PageSpeed Insights), és semmit nem ment el.

Használd az eszközt a saját projekteden, és találd meg a szűk keresztmetszeteket!