Lehet, hogy eddig azt gondoltad, hogy nem kell tudnod semmit a weboldalak betöltődési sebessége témában. Ha szeretnél megtapasztalni a romló SEO pozíciók és csökkenő látogatottság nyomasztó érzését, akkor ne olvass tovább!
Ha szeretnéd megkímélni magad mindezektől a nyomasztó érzésektől, akkor olvass tovább és ismerd meg a tanulságokat, amelyeket nem 100 vagy 1000 weboldal elemzéséből nyertek ki a szerzők. Nem kevesebb, mint 5 millió oldalt elemeztek ki, amelyekből értékes következtetéseket lehet levonni.
Miért fontos téma a weboldalak betöltődési sebessége?
A Backlinko frissen publikált elemzésében 5.200.000 weboldalt vizsgált meg. Azt vizsgálták, hogy milyen tényezők vannak hatással a betöltési sebességre (pagespeed). Miért fontos ez?
Mert a pagespeed már rangsorolási tényező a keresőkben. Ha nem foglalkozunk az oldalunk betöltősédi sebességével, akkor nem csak keresőoptimalizálási fronton bukunk nagyot.
A látogatók frontján szintén pofont kapunk, mert a felhasználói élmény valahol ott kezdődik, hogy a felhasználó egyáltalán találkozzon az oldalunkkal.
Ha csigatempóban töltődik be az oldalunk, akkor a látogató köszöni szépen, nem kéri ezt a falhasználói élményt : fogja magát és bezárja az oldalt, mielőtt betöltődött volna.
Így már érthető, hogy miért fontos téma ez, miért kell foglalkoznunk egy olyan felméréssel, amely több millió oldal adataiból leszűrt tanulságokat tálalja.
A nagy websebesség-teszt
A Backlinko három méréshez határozott meg benchmark adatokat, így ezek lehetnek a későbbi elemzések viszonyítási alapjai.
- Az első bájt betöltődéséig eltelt idő (Time To First Byte [TTFB])
Ez teljesen backend folyamat, a látogató nem lát belőle semmit (csak várakozik a DNS, TCP, TLS kapcsolódásra) - Vizuálisan betöltődve (Visual Complete)
Ez már a vizuális elemek betöltődése, tehát a felhasználó azt látja, hogy betöltődött az oldal a böngészőjébe. A látogató ebből ítéli meg, hogy milyen gyorsan töltődött be az oldal; nem foglalkozik azzal, hogy az interaktív elemek még nem töltődtek be: látja az oldalt, tehát betöltődött… - Teljes betöltődés (Fully loaded)
A vizuális elemek betöltődése után az interaktív elemek töltődnek be – így áll össze a teljes betöltődési idő.
A mérési metrikát nem ismertetném részletesen, mert felesleges – a lényeg sokkal inkább ott van, hogy milyen tanulságokkal szolgált az elemzés.
Főbb tanulságok
A következő adatok nyilván csak a vizsgált mintára értendők, nem a teljes webre.
Weboldalak TTFB betöltődési sebessége átlagosan:
desktop : 1.286 mp
mobil : 2.594 mp
Weboldalak ‘vizuálisan betöltődve’ sebessége átlagosan:
desktop : 8.225 mp
mobil : 21.608 mp
Weboldalak teljes betöltődési sebessége átlagosan:
desktop : 10.3 mp
mobil : 27.3 mp
Univerzális tanulság, hogy a mobilos betöltődés sokkal tovább tart, mint az asztali (+87.84%).
Ha szereted az egyszerű, egymondatos válaszokat, akkor kész is vagy, nem kell tovább kutatnod…
Ha érdekel, milyen mély a nyúl ürege, akkor olvass tovább!
Egyes tényezők hatása a weboldal sebességére
Kilenc beolyásoló faktorról vannak adatok, ezeket az érthetőség kedvéért csoportosítva tálalom:
- Tartalomkezelő és tartalom kiszolgáló rendszerek
- Weboldal méret, oldalméret
- Weboldal tömörítés, Javascript, hosting
Mindegyik tényező különböző súllyal telepszik rá a weboldal betöltési sebességre, ezért érdemes a helyén kezelni a megállapításokat.
Tehát hiába szerepelt rosszul a WordPress a tartalomkezelő rendszerek között – ez még közel sem jelenti azt, hogy ki kell dobnod a WP alapú oldaladal és elölről kellene kezdened Squarespace alapon…
NE maradj le az új cikkekről!
Add meg az email címed és az elsők között fogsz értesítést kapni az új cikkekről!
Tartalomkezelő és tartalom Kiszolgáló rendszerek
Tartalomkezelő rendszerek (CMS) hatása a sebességre
A tartalomkezelő rendszerek között a Squarespace és a Weebly szerepelt a legjobban.
A hazai pályán gyakrabban használt CMS rendszerek nem szerepeltek jól: a Drupal a mezőny közepén foglal helyet, a WordPress, a Joomla és a Wix a mezőny hátsó soraiba szorult.
Tartalom Kiszolgáló Hálózat (CDN) hatása a sebességre
A desktop betöltődési sebességre leginkább Tartalom Kiszolgáló Hálózat (Content Delivery Network [CDN]) használata van, mobilon pedig a HTML kérések mennyisége. Mi ez a CDN-dolog?
A CDN egy olyan megoldás, amivel (elméletben) azt lehet megoldani, hogy a nagy látogatottságú weboldalunk tartalmát gyorsabban megjelenítsük a látogatóknak. Hogyan?
Itt van a csavar: nem egy szerverről szolgáljuk ki a látogatókat, hanem szétszórjuk a világban a szervereket és akkor eloszlik a szerver terhelés, tehát nem lassul be és nem omlik össze a weboldalunk akkor sem, ha éppen a fél világ ott lóg rajta, mert Black Friday van…
Ez elméletben egy tökéletes megoldás, de a gyakorlat azt mutatja, hogy nem mindig működik úgy, ahogy várnánk…
Érdekes adat, hogy a CDN használat korrelál a legrosszabb pagespeed eredményekkel, ami elsősorban arra enged következtetni, hogy egyes CDN szolgáltatók nemhogy gyorsítják a betöltődést, hanem lassítják. A Cloudflare rosszul szerepelt, az GitHub Pages és Google Cloud pedig jól.
Weboldal méret, oldalméret
Weboldal méret hatása a sebességre
Pár szóban arról, hogy mit értünk a weboldal érete alatt. A weboldal méret a fájlok összesített mérete, amit a weboldal betölt (kód, stíluslapok, képek, videők, betűkészletek, scriptek). Tavalyi statisztika szerint az oldalméret átlagosan 1.7MB körül van. Összehasonlításképpen: 2010-ben még csak 0.43MB volt egy weboldal mérete – tehát az oldalak egész komolyan ‘híznak’ az évek során (több betűkészlet, több kép, több videó).
A pehelysúlyú weboldalak betöltődési sebessége 486%-al jobb volt, mint a nehézsúlyú weboldalaké.
Oldalméret hatása a sebességre
A weboldal méret és az oldalméret nem keverendő. Az oldal méret fogalmát úgy tudjuk legkönnyebben értelmezni, ha a átvesszük a profi box súlycsoportokat. Egy 10 mondatos szövegből álló főoldal a pehelysúlyú oldal, az 5000 szavas, képekkel és videőkkal tarkított elemzés pedig a nehézsúlyú oldal.
Az oldalméret komoly hatással van a ‘Vizuálisan betöltődve’ állapotra. A pehelysúlyú oldalakhoz képest a nehézsúlyú oldalaknak 318 százalékkal több időre volt szükségük ahhoz, hogy a weboldalak elérjék a ‘Vizuálisan betöltődve’ állapotot.
Képek hatása a sebességre
A legjobb eredményt reszponzív képek és a szakaszos (lazy load) kép-betöltés használatával lehet elérni. A WebP (by Google) formátumú képek használata nem igazán hatékony.
A weboldalon használt képek gzip tömörítése mind a mobilos, mint a desktop betöltődési sebességre jó hatással van.
Weboldal tömörítés, Javascript, hosting
Weboldal tömörítés hatása a sebességre
A weboldal tömörítés kétélű fegyvernek bizonyult, mert a nagyon sok tömörítést használó webodalak és a nagyon kevés tömörítést használó weboldalak is rosszul szerepeltek. Ha szénné tömörítjük a weboldalunkat, akkor ne legyünk elégedettek magunkkal, mert a böngészőnek adunk annyi munkát, hogy leizzad, mire kibontogatja a tömörített fáljainkat. Akkor ne foglalkozzunk a fájlok tömörítésével?
De igen! Csak ne vigyük túlzásba…
Javascript keretrendszerek hatása a sebességre
Nem mindegy melyik Javascript keretrendszert használjuk: a leggyorsabb Javascript keretrendszerek a Wink 213%-al gyorsabb, mint a leglassabb keretrendszer.
A külső (third party) scriptek meghívása szignifikánsan lassítja a betöltődési sebességet. Minden third party script meghívásával vágjunk magunk alatt a fát, tehát minén több scriptet hívunk meg, annál rosszabb lesz a betöltődési idő.
Hosting sebessége
A GitHub és a Weebly szolgáltatón futó weboldalak érték el a legjobb TTFB eredményt. A Wix és a Shopify desktopon a lista hátsó soraiban végeztek, mobilon jobban szerepeltek.
A nemzetközi verseny (egyre fokozódik)
Kína és Japán adta a legjobb TTFB eredményt produkáló weboldalakat.
Most, hogy már képbe kerültél a weboldalak betöltődési sebességének témájával kapcsolatban, iratkozz fel az blog-értkesítőre és mindig elküldjük neked a legújabb írásokat!
