Vegyél két weboldalt, amely ugyanazt árulja. Nyisd meg őket egymás mellett. Az egyik betölt, mielőtt az ujjad elhagyná a trackpadet. A másiknál négy másodperc telik el, mire egyetlen elem megjelenik. A különbségnek, amelyet épp megtapasztaltál, neve van: oldalbetöltési idő. De a szám, amelyet a sebességtesztelő eszközön látsz, csak a kép része. Az oldalbetöltési idő nem egyetlen mérés. Mérések gyűjteménye, amelyek mindegyike a betöltési sorozat egy másik pillanatát rögzíti, és mindegyik mást mond arról, mit él meg valójában a látogató. Ez a cikk bemutatja, mit mér az oldalbetöltési idő, mely mutatók számítanak és mit mondanak, miért különbözik a mobil és az asztali gép, és hogyan olvashatod a saját oldalad teljesítményadatait anélkül, hogy fejlesztő fordítaná le neked.
Az oldalbetöltési idő az az idő, amely a látogató oldalkérése és aközött telik el, hogy az oldal teljesen használhatóvá válik a böngészőjében. Azért mérik többféleképpen, mert a „betöltött” mást jelent attól függően, mit akarsz megérteni. Egy oldal megjeleníthet tartalmat, mielőtt minden elemét betöltené. Interaktívnak tűnhet, mielőtt valóban reagálna a kattintásokra. Ha megérted, a betöltési sorozat melyik része lassú, a sebességadatok hasznosak lesznek, nem csak ijesztők. Arról, hogy ez miért számít a vállalkozásodnak és a keresési helyezéseidnek, a weboldal sebességének fontosságáról szóló cikkben olvashatsz.
Mit mér valójában az oldalbetöltési idő?
Az „oldalbetöltési idő” kifejezést lazán használják egyetlen számra, de a gyakorlatban egy több ellenőrzőpontos idővonalat jelöl. Mindegyik ellenőrzőpont más kérdésre felel arról, mit él meg a látogató, miközben az oldal betölt.
A betöltési sorozat
- A böngésző kérést küld a szervernek
- A szerver feldolgozza a kérést, és választ küld vissza
- A böngésző megkezdi az oldal fogadását és megjelenítését
- A szöveg és a képek fokozatosan jelennek meg, ahogy letöltődnek
- A szkriptek lefutnak, és az oldal interaktívvá válik
- Az utolsó elem is betöltődik
A különböző mutatók a sorozat különböző pontjait rögzítik. A jó oldalbetöltési idő pontszám attól függ, mely ellenőrzőpontokat méred, nem csak egyetlen eltelt időtől.
Melyek az oldalbetöltési idő mérésére használt konkrét mutatók?
Time to First Byte (TTFB)
- Mit mér: mennyit vár a böngésző, mielőtt megkapja az első bájtnyi adatot a szerveredtől
- Jó pontszám: 800 ezredmásodperc alatt
- Miért számít: a lassú TTFB mindent késleltet, ami utána jön. A böngésző nem kezdheti el megjeleníteni semmit, amíg meg nem érkeznek az adatok. A lassú TTFB általában a szerver teljesítményére, a tárhely minőségére vagy az optimalizálatlan adatbázis-lekérdezésekre utal
First Contentful Paint (FCP)
- Mit mér: azt a pillanatot, amikor a böngésző megjeleníti az első tartalmat, legyen az szöveg, kép vagy háttér
- Jó pontszám: 1,8 másodperc alatt
- Miért számít: ekkor látja a látogató először, hogy történik valami. A gyors FCP azt jelzi, hogy az oldal reagál, még ha nem is töltött be teljesen
Largest Contentful Paint (LCP)
- Mit mér: mikor töltődik be teljesen a legnagyobb látható elem (általában egy nyitókép vagy nagy címsor)
- Jó pontszám: 2,5 másodperc vagy gyorsabb
- Miért számít: az LCP a három Core Web Vitals mutató egyike, amelyet a keresési rangsorolásban használnak. Ez áll a legközelebb ahhoz, hogy „mikor érződik használhatónak az oldal”, mert a legnagyobb elem általában a legfontosabb vizuális elem az oldalon
Time to Interactive (TTI)
- Mit mér: mikor válik az oldal teljesen interaktívvá, és megbízhatóan reagál a kattintásokra és a billentyűbevitelre
- Jó pontszám: 3,8 másodperc alatt
- Miért számít: az oldal betöltöttnek tűnhet, miközben a JavaScript még a háttérben fut. A TTI azt a rést rögzíti, amely aközött van, hogy az oldal késznek látszik, és hogy valóban kész
Total Blocking Time (TBT)
- Mit mér: azt az összidőt, amely alatt a főszál le van blokkolva, és nem tud reagálni a bevitelre az FCP és a TTI között
- Jó pontszám: 200 ezredmásodperc alatt
- Miért számít: a TBT azt tükrözi, mennyi nehéz JavaScript-feldolgozás késlelteti az interaktivitást. A magas TBT azt jelenti, hogy a látogatók gombokat nyomnak, és nem történik semmi, ami a bizalmat rontja akkor is, ha az oldal vizuálisan betöltöttnek látszik
Teljes oldalbetöltés
- Mit mér: mikor töltődik be teljesen az oldal minden egyes erőforrása, beleértve a képeket, szkripteket, betűtípusokat és harmadik féltől származó beágyazásokat
- Jó pontszám: 5 másodperc alatt mobilon
- Miért számít: ez az a mutató, amelyre a legtöbb ember gondol, amikor azt mondja, „oldalbetöltési idő”. Hasznos az oldalad teljes súlyának megértéséhez, de a látogatói élmény szempontjából kevésbé fontos, mint az LCP és a TTI, mert a látogatók jellemzően jóval azelőtt elkezdenek foglalkozni az oldallal, hogy minden elem betöltött volna
Miért különbözik a mobilos oldalbetöltési idő az asztalitól?
A mobil és az asztali gép ugyanarra az oldalra különböző oldalbetöltési idő pontszámokat ad, még ha a tartalom azonos is.
Okok, amiért a mobil következetesen lassabb
- A mobilkapcsolatok átlagosan lassabbak a vezetékes szélessávnál, még 4G és 5G hálózaton is
- A mobil processzorok kevésbé erősek, mint az asztali CPU-k, ami azt jelenti, hogy a JavaScript lassabban fut
- A mobil böngészőknek kevesebb szabad memóriájuk van, ami korlátozza, mennyit tudnak gyorsítótárazni az oldalak között
- A hálózati körülmények mobilon jobban ingadoznak, ami következetlen teljesítményt okoz a látogatások között
Miért nagyobb súlya van a mobilos pontszámoknak
- A keresők mobil-első indexelést használnak, vagyis az oldalakat a mobilváltozatuk alapján járják be és rangsorolják
- A mobilos Core Web Vitals pontszámok nagyobb rangsorolási súlyt kapnak, mint az asztaliak
- A mobil adja a webes forgalom többségét világszerte, így a mobilteljesítmény a látogatóid legnagyobb részét érinti
Mindig futtass külön mobil és asztali teszteket. Az az oldal, amely asztali gépen jól pontoz, mobilon még lehet jelentős problémákkal, és a mobil az, ahol a helyezésekre gyakorolt hatás a legnagyobb.
Mi okozza a lassú oldalbetöltést?
Nagy, tömörítetlen képek
- Az oldalsúly és a lassú betöltés leggyakoribb oka
- Egy közvetlenül telefonról feltöltött fotó lehet 4 és 8 megabájt közötti
- Ugyanez a kép, megfelelően tömörítve, látható minőségkülönbség nélkül lehet 100 kilobájt alatt
- Minden tömörítetlen kép másodperceket ad hozzá az FCP-hez és az LCP-hez
Megjelenítést blokkoló szkriptek és stíluslapok
- A böngészők szüneteltetik a megjelenítést, amikor olyan JavaScript- vagy CSS-fájlokba ütköznek, amelyeket a folytatás előtt fel kell dolgozniuk
- A dokumentum fejlécében betöltött szkriptek blokkolják, hogy az oldal bármit megjelenítsen, amíg be nem fejeződnek
- A nem kritikus szkriptek halasztása kiveszi őket a kritikus útvonalból, és gyorsítja az FCP-t és az LCP-t
Lassú szerverválasz (magas TTFB)
- Minden oldalbetöltés szerverkéréssel kezdődik. Ha a szerver lassú, minden, ami utána jön, késik
- A megosztott tárhelykörnyezetek sok oldal között osztják meg a CPU-t és a memóriát, ami kiszámíthatatlan válaszidőt okoz
- Az optimalizálatlan adatbázisok és a gyorsítótárazás nélküli szerveroldali megjelenítés gyakori közreműködők
Túl sok harmadik féltől származó szkript
- A csevegő modulok, a követőpixelek és az analitikai eszközök mind külső kapcsolódási kéréseket adnak hozzá
- Ha bármelyik külső szerver lassan válaszol, az oldalad várakozásra kényszerül
- A harmadik féltől származó szkriptek jelentősen hozzájárulhatnak a TBT-hez a JavaScript-végrehajtási idő növelésével
Nincs gyorsítótárazás
- Gyorsítótárazás nélkül minden látogatás az oldal teljes szerveroldali újraépítését váltja ki
- Gyorsítótárazással a visszatérő látogatók egy eltárolt változatot töltenek be, ami jelentősen csökkenti a szerver válaszidejét
- A böngésző-gyorsítótárazás azt is lehetővé teszi, hogy az ismételt látogatók kihagyják az általuk már betöltött elemek letöltését
Hogyan mérheted a saját oldalbetöltési idődet?
Mit mérnek a sebességtesztelő eszközök
- A sebességtesztelő eszközök egy rögzített helyről és kapcsolatról szimulálnak egy oldalbetöltést, és minden mutatót szabványos küszöbökhöz mérnek
- Ezeket laboratóriumi eredményeknek hívják: egységes körülmények között futtatott, ellenőrzött tesztek
- A laboratóriumi eredmények hasznosak az egyes problémák diagnosztizálásához, de nem rögzítik, hogyan élik meg az oldaladat a valódi látogatók különböző kapcsolatokon és eszközökön
Laboratóriumi adatok kontra terepi adatok
- Laboratóriumi adatok: ellenőrzött környezetben végzett szimulált tesztek. Gyorsan futtathatók, és jók az egyes problémák elkülönítésére
- Terepi adatok: az oldaladra érkező valódi látogatók tényleges mérései, időben összesítve. Ezt használják a keresők a Core Web Vitals pontozásához
- Az oldal jól pontozhat laboratóriumi tesztben, de rosszul a terepi adatokban, ha a valós körülmények, a lassabb eszközök, a gyengébb kapcsolatok vagy a szervertől való földrajzi távolság más eredményeket adnak a tényleges látogatóknak
Mire figyelj a sebességjelentés olvasásakor
- Először az LCP-t nézd: ez a legfontosabb mutató a látogatói élmény és a keresési helyezések szempontjából is
- Nézd a TTFB-t, hogy megállapítsd, a probléma a szerveroldalon vagy a frontenden van-e
- Nézd a TBT-t, hogy kiderüljön, a JavaScript blokkolja-e az interaktivitást
- Futtass külön teszteket mobilra és asztali gépre
- Hasonlítsd össze a pontszámaidat azokkal az oldalakkal, amelyek a célkulcsszavaidra előtted szerepelnek, ne csak absztrakt mércékkel
A Core Web Vitals küszöbértékeinek áttekintéséhez, és ahhoz, hogyan pontozzák a keresők az oldalakat ezek alapján, olvasd el a Core Web Vitals mutatókról szóló cikket.
Hogyan kezeli a WEMASY az oldalbetöltési időt
A WEMASY weboldalépítőjét úgy építették, hogy az oldalbetöltési idők műszaki beállítás nélkül is gyorsak maradjanak. A platformon keresztül feltöltött képeket kiszolgálás előtt automatikusan tömöríti és átméretezi. A tárhelyinfrastruktúra minden csomagban benne van, így az oldalak nem kerülnek megosztott, kiszámíthatatlan válaszidejű környezetbe. A gyorsítótárazás alapból be van kapcsolva, a WEMASY-ban épített oldalakat pedig úgy strukturálják, hogy a megjelenítést blokkoló erőforrások minimálisak maradjanak.
A Core Web Vitals pontszámok, köztük az LCP, az INP és a CLS, közvetlenül a WEMASY vezérlőpultján láthatók a valódi látogatók terepi adataival. Így külső tesztek futtatása nélkül ellenőrizheted, hogyan teljesítenek az oldalaid azokhoz a küszöbökhöz képest, amelyek a keresési helyezésekhez számítanak.
Nézd meg, mi tartozik hozzá, a WEMASY weboldalépítőnél, vagy nézd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Mi számít jó oldalbetöltési időnek?
A Core Web Vitals esetében a kulcsküszöb a Largest Contentful Paint 2,5 másodperc alatt. A gyakorlatban a mobilkapcsolaton három másodpercen belüli teljes interaktivitás célzása lefedi a valós használati esetek többségét. A mobilon öt másodperc alatti teljes oldalbetöltés észszerű mérce a legtöbb kisvállalkozási weboldalnál. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon is beállíthatod.
Mi a különbség az oldalbetöltési idő és a Core Web Vitals között?
Az oldalbetöltési idő az első szerverkéréstől az utolsó elem betöltéséig tartó mérések teljes sorozatát jelenti. A Core Web Vitals három konkrét mutató ebben a sorozatban: a Largest Contentful Paint, az Interaction to Next Paint és a Cumulative Layout Shift, amelyeket a keresők rangsorolási jelekként használnak. A Core Web Vitals az oldalbetöltési idő méréseinek egy részhalmaza, kifejezetten a betöltési élmény azon részeire összpontosít, amelyek a legjobban befolyásolják a látogatókat.
Miért különbözik az oldalbetöltési időm mobilon és asztali gépen?
A mobil és az asztali gép azért ad különböző pontszámokat, mert a mobil eszközök lassabb processzorokat használnak, változó hálózati kapcsolaton működnek, és kevesebb memóriájuk van, mint az asztali számítógépeknek. Az az oldal, amely egy szélessávú asztali kapcsolaton két másodperc alatt betölt, egy átlagos mobilhálózaton lévő mobil eszközön négy vagy több másodpercig is tarthat. A keresők külön pontozzák a mobilteljesítményt, és nagyobb súllyal veszik figyelembe, mert a webes forgalom többsége mobil eszközökről érkezik.
Mi a különbség a laboratóriumi és a terepi adatok között a sebességtesztekben?
A laboratóriumi adatok egy szimulált tesztből származnak, amelyet ellenőrzött körülmények között, rögzített helyről és eszközről futtatnak. A terepi adatok az oldaladra érkező valódi látogatóktól származnak, a tényleges eszközeiken, helyeiken és kapcsolataikon mérve. A keresők a Core Web Vitals pontozásához terepi adatokat használnak, nem laboratóriumi eredményeket. Az oldal gyorsnak tűnhet laboratóriumi tesztben, de rosszul pontozhat terepi adatokban, ha a valódi látogatók lassabb kapcsolaton vagy eszközön vannak, vagy földrajzilag messze vannak a szervertől.
Mit jelent a Time to First Byte?
A Time to First Byte (TTFB) az az idő, amely aközött telik el, hogy a böngésző kérést küld a szerverednek, és megkapja az első bájtnyi adatot. A szerver válaszsebességét méri. A lassú TTFB a betöltési sorozat minden további lépését késlelteti, mert a böngésző nem kezdheti el megjeleníteni semmit, amíg el nem kezdi fogadni az adatokat. A 800 ezredmásodperc feletti TTFB általában szerverteljesítmény-problémákra, lassú tárhelykörnyezetre vagy optimalizálatlan háttérfeldolgozásra utal.
Befolyásolja az oldalbetöltési idő az SEO-helyezéseket?
Igen. A keresők a Core Web Vitals mutatókat, amelyek az oldalbetöltési idő méréseiből származnak, rangsorolási jelekként használják. A Largest Contentful Paint, az Interaction to Next Paint és a Cumulative Layout Shift pontszámát valós látogatói adatok alapján számítják, és az oldalélmény értékelésére használják. A jó tartományba eső pontszámú oldalak rangsorolási előnyt élveznek a rosszul pontozókkal szemben, különösen, ha a versengő oldalak tartalmi minősége hasonló.