Blog Weboldal betöltési sebesség: avagy így keress 30-50%-kal többet pluszmunka nélkül
weboldal betölési sebesség
Írta:

Weboldal betöltési sebesség: avagy így keress 30-50%-kal többet pluszmunka nélkül

Amikor a 2010-es évben megjelent a Google PageSpeed Insights, úgy őriztem ezt az információt, mint valami féltve őrzött hadititkot… csakhogy évekkel később szembesüljek azzal, hogy az oldalsebesség mintha az égvilágon senkit se érdekelne. De nem adtam fel, és egyre komolyabb háttérkutatásokat végeztem, miközben beletörődtem, hogy ez még jó ideig nem lesz egy ajtónyitó szolgáltatás.

Eltelt egy évtized, és 2020 májusában a Google hivatalosan is bejelentette, hogy a felhasználói élmény rangsorolási faktor lesz azokban az esetekben, ahol a tartalmat nagyon hasonlónak érzékeli. Fontossá vált többek között a SEO-ban, hogy mobilbarát-e a honlap, milyen a weboldal betöltési sebesség, és a biztonság most már alapvetőnek tekintett követelményei teljesülnek-e. Elsősorban itt az SSL-ről vagy közismertebben a https:// előtagról van szó.

Miért fontos az oldalsebesség?

A világ felgyorsult. Mi is felgyorsultunk. Mindenki mindent azonnal akar. Néhányunk már lassulna, de azt is gyorsan, lehetőleg azonnal. Egy-másfél hét szabadsággal pihennénk ki egy évet, aztán vissza, gyorsan.

Az információk özöne olyan mértékben zuhan ránk, hogy jó ideje már nem azért folyik a küzdelem, hogy megtaláljunk valamit, hanem hogy szelektálni tudjunk a végtelen sok többé-kevésbé releváns tartalom között. Az, hogy ez mennyire igaz, az alábbi ábra mutatja a legjobban:

Az emberek nem várnak. A fenti statisztika azt jelenti, hogyha például 5 másodperc alatt tölt be a weboldalunk, akkor több mint 100%-kal nő a visszafordulási arány, azaz azoknak a látogatóknak a száma, akik úgy hagyják el a weblapunkat, hogy egyetlenegy oldalig jutottak, és ott sem történt semmilyen interakció, hanem bezárták. Tehát ha a visszafordulási arányunk 37% lenne az egy másodperces betöltési idő mellett, akkor öt másodpercnél ez átlagosan már 75% körül fog mozogni. A 150%-ot úgy kell értelmezni, hogy 22 másodpercnél ez már +150%, azaz 92.5% lenne.

Ez persze csak félig igaz. Egyszer egy amerikai-angol oldal betöltési idejét csökkentettük a töredékére, és nagy reményekkel vártam, hogy az optimalizálás során minden mutató nyílegyenesen javulni fog. Hát… nem így történt. Az oldalelhagyás nemhogy csökkent volna, de nőtt is! Napokig gondolkoztam, hogy mi okozhatja ezt a jelenséget, és milyen magyarázattal tudnék előrukkolni a megrendelőnek.

A megoldást a Google Analytics rejtette magában: bár az oldalelhagyás nőtt, a látogatásonként megtekintett oldalak száma is nőtt! Az történt ugyanis, hogy miután a weboldal betöltési ideje 1-2 másodperc körülire esett, azok a látogatók, akik arra vártak, hogy kiderüljön, számukra releváns-e a tartalom, nem kellett 7-10 másodpercig várjanak, hanem azonnal látták, amennyiben nem az volt, és gyorsabban elhagyták az oldalt. Ellenben azok, akik úgy érezték releváns olvasnivalót találtak, több oldalt is megnéztek a sebesség optimalizálás után.

Ennek az összefüggéseit nagyon jól mutatja a következő statisztika:

Ez azt jelenti, hogyha például eddig átlagban 2,3 oldalt néztek meg a látogatóink, és a weboldal betöltési ideje 5 másodpercről 1-re csökken, akkor átlagosan 3,6 oldalt fognak megnézni, azaz közel 60%-os javulást értünk el!

Legalább ilyen fontos a többi mutató változása is.

A weboldal sebesség optimalizálás után a mutatókat mindig összefüggéseiben kell értelmezni!  

Hatása mobilra

A weboldal betöltési sebesség hatása a mobil látogatókra

A mobileszközökről érkező forgalmat egy nehezebb weboldal még érzékenyebben érint. A mobilinterneten keresztül a nagy fájlok hatványozottan lassabban töltődnek be, mint egy szélessávú kapcsolatra csatlakoztatott asztali gépnél, és a mobil használók türelme ezzel egyáltalán nem arányos. 5 másodpercnél már majdnem a duplájára emelkedik a lemorzsolódás, ami iszonyatosan nagy.

Hogy ez miért fontos a mobil esetében, azt a következő ábrán láthatjuk igazán:

2019 második felétől az internetet, ha nem is aránytalanul nagy mértékben, de egyértelműen átvette a mobileszközökről történő böngészés. Ezen felül a Google felmérése szerint a világon létező weboldalak átlagosan 22 másodperc alatt töltenek be mobil eszközön, ezzel szemben a látogatók 53%-a elhagyja az oldalt, ha az több mint 3 másodperc alatt tölt be.

Tehát ha 54,8% a mobilról jövő látogatások aránya, és a weblapunk 3 másodpercnél lassabban tölt be, amivel elveszítjük a mobilról érkezők 53%-át, az azt jelenti, hogy az összes látogatónk 29%-át elveszítjük.

Pénzügyi hatás

Hogyan hat ez a pénztárcánkra?

Röviden és tömören: rosszul. Nagyon. Öt másodperces betöltési idő felett már a konverzió közel felét elveszíthetjük (lásd az alábbi ábrát), ami hosszútávon igen tetemes veszteséget okozhat.

Ráadásul jellemzően a legkevesebb idővel rendelkező vevők teszik ki a vásárlóerő nagyobb hányadát. Van pénzük, hogy megvegyék, amit kínálunk, de nagyon elfoglaltak.

Nemrég olvastam egy ismerősöm LinkedIn posztját, ahol megosztotta, hogy szeretett volna venni egy speciális, magasabb árkategóriában fekvő italt. 10 releváns oldalt talált, de ebből mindössze egyetlenegyen lehetett online fizetéssel azonnal rendelni. Így azt választotta, mert se ideje, se kedve nem volt időt tölteni azzal, hogy először levelet írjon a kapcsolat menüponton keresztül, majd további köröket fusson.

A mai napig találkozom nemcsak olyan igényekkel, de olyan hirdetésekkel is, amelyek nagyobb forgalmat ajánlanak, azt sejtetve, mintha ettől valami mágikus módon egyenes arányban növekedne a bevételünk is. Összefüggés van, de ez így önmagában rendkívül messze áll a teljes igazságtól.

Tegyük fel, hogy van egy honlapunk, amin van 50 cikk, és a blogunk már kellő forgalmat generál. A betöltési idő 6 másodperc, tehát a konverzió 40%-át elveszítjük a lassú weboldal betöltési sebesség miatt. Ahhoz, hogy közel megduplázzuk a bevételünk, két dolgot tehetünk:

  1. Írunk még 40-50 blogbejegyzést, hogy megduplázzuk a webhelyünkre érkező forgalmat tartalmi SEO-val.
  2. Egy egyszeri befektetéssel 1 másodperc alá vagy környékére csökkentjük a betöltési időt.

Vajon melyik a költséghatékonyabb?

A nap végén az fog számítani, hogy mennyi pénz van a bankszámlánkon.

Mindig azt érdemes nézni, hogy mi az, ami valóban bevételt hoz, méghozzá a lehető legnagyobb megtérüléssel. A konverzió szerepéről az online marketingben itt olvashatunk bővebben.

Nyilvánvalóan értékes tartalmak írása nélkül, amelyek a felhasználók más-más szegmensét célozzák, illetve más-más kulcsszavakra érnek el helyezést, nem lehet márkahitelességet építeni, sem oktatni a jövőbeni vásárlókat és összességében hatékonyan terjeszkedni. Ha mi nem frissítjük a régi és kínáljuk az új tartalmainkat, majd a konkurencia megteszi. Nem véletlenül a tartalmi SEO az egyik legfontosabb elem. A fenti példa mindössze azt szemlélteti, hogy ezek akkor érik el igazán a céljukat, ha stabil alapra vannak építve.

ROI kalkulátor

Oldalsebesség megtérülés (ROI) kalkulátor

Számoljuk ki, pontosan mennyit is kereshetünk a honlap optimalizálás során egy jobb oldalsebesség elérésével.

Itt kipróbálhatod a kalkulátort. Csak írd át az értékeket és működik is automatikusan.

Jelenlegi oldal

Optimalizált oldal

Honlapsebesség A honlap betöltési sebessége. Ezt az adatot a Google Analytics >> Viselkedés >> Webhelysebesség menüpont alatt tudhatjuk meg, vagy a GTmetrix.com oldalon végzett mérés alapján.

Optimalizált oldal:1 mp

Látogatásonként megtekintett oldalak száma A látogatásonként megtekintett oldalak száma azt mutatja meg, hogy amikor egy felhasználó a honlapra érkezik, és elkezd egy munkamenetet, akkor hány oldalt néz meg azon belül. Ezt az adatot a Google Analytics >> Közönség >> Áttekintés menüpont alatt találjuk az „Oldal / munkamenet” címszó alatt.

Optimalizált oldal:

Visszafordulási arány A visszafordulási arány azt jelenti, amikor egy felhasználó az oldalra érkezik, és csak egy oldalt néz meg, és ott nem tesz semmit, azaz azok az egyoldalas munkamenetek, ahol nem történt interakció az oldallal, és a felhasználó azonnal elhagyja az oldalt. Ezt az adatot a Google Analytics >> Közönség >> Áttekintés menüpont alatt találjuk a „Visszafordulási arány” címszó alatt.

Optimalizált oldal:

Konverzió A konverzió azt jelenti, hogy a honlapra érkezőkből hány lesz vásárló („puha” konverzió mérése esetén hány lesz email feliratkozó stb.). Tehát ha 1000 látogatónk van havonta és abból 30 ember vásárol, akkor 3%-os a konverziós arányunk. Ezt az adatot vagy a Google Analytics >> Konverziók >> Célok >> Áttekintés menüpont alatt tudhatjuk meg, ha be vannak állítva ilyen célok, illetve egyszerűen a számlázó programunkból vagy webshopunkból.

Optimalizált oldal:300.000.000 Ft

Honlapból származó árbevétel / hó A honlapból származó árbevétel az árbevételnek az a hányada, amely befolyását a honlapnak köszönhetjük. Így az is honlapon keresztüli árbevételnek minősül, ha a kapcsolat menüponton keresztül megkeresnek minket, majd abból az azt követő személyes találkozók során lesz üzlet.

Optimalizált oldal:
Havi többletbevétel:
Éves többletbevétel:
5 éves többletbevétel:

A honlapoptimalizálás megtérülése

Honlap optimalizálás költsége A holnap optimalizálás a technikai SEO része. Ennek a költsége a webfejlesztés és annak kapcsolódó kiadásai.

Optimalizálás utáni profit / hó

A(z) 1.500.000 Ft-ra eső profit A honlapból származó havi árbevételre eső profit az az összeg, amely tiszta nyereség a cég számára. Például, ha egy kerékpárt értékesítünk, ami 350.000 Ft és a mi beszerzési költségünk 250.000 Ft, valamint a rárakodó költségek, így például raktározás, bérek 30.000 Ft, akkor a tiszta profit az 350.000 Ft – 250.000 Ft – 30.000 Ft = 70.000 Ft.

Megtérülési idő A megtérülés számítása úgy történik, hogy az optimalizált honlapból származó többletprofitot vetítjük rá a befektetésre. Azaz az egyszeri ráfordítás költsége osztva a havi többlethozammal, tehát a jelenlegi és jövőbeli várt nyereség különbségével. A számláló él azzal az egyszerűsítéssel, hogy a profit egyenesarányosan nő az árbevétellel. A valóságban a fix költségek értékesítésre vetíthető aránya a volumennövekedéssel csökken, így a megtérülés gyorsabb lesz.

3 hónap

Az eredmények letöltése:

Az iparági sajátosságok és a tartalom minősége természetesen befolyásolni fogja a végső eredményt, amikor javítjuk a weboldal teljesítményét. Azt is vegyük figyelembe, hogy a jobb oldalbetöltési sebesség miatt várhatóan a Google helyezéseink is javulni fognak, amely többletforgalmat fog eredményezni az elért konverziós nyereségen felül. A SEO is sokkal hatékonyabb tud lenni egy jó alapozással.

Optimalizálás a gyakorlatban

Weboldal sebesség optimalizálás a gyakorlatban

Amikor a GTmetrix mérésében egy ilyen eredményt lát az ember a saját weboldalára, akkor a boldogsághormonok csak úgy rohangálnak fel-alá a testében. 🙂

De ezt nem csak a konverzió miatt tartom fontosnak, ez egy branding eszköz is: az az üzenete, hogy ez az a minőség, amire számíthatsz.

A minőség egy olyan dolog, ami sosem megy ki a divatból.

Ami érdekes, hogy ez egy teljesen sima, hazai osztott szerveren futó oldal, tehát nem feltétlenül kell rendszergazdai tudás egy jó technikai SEO alapjainak a lerakásához, és a weboldal sebesség optimalizálás eredményességéhez. A tartalommenedzsment rendszer (CMS, content managemet system) ennél már jóval izgalmasabb. Egy kevésbé ismert, ám annál több díjat nyert megoldást választottam, a ProcessWire-t. Ez egyben CMS és CMF (content management framework, tartalommenedzsment keretrendszer) is. Rettentően gyors és biztonságos weboldalakat lehet építeni vele.

Egy másik érdekesség, hogy nincs az oldalban Google Analytics. Ööö… tessék? Ez most komoly?

Igen, az! Méghozzá marketing megfontolásból! Na jó, most már biztos viccelek… De nem. Ez teljesen komoly. Az üzleti modellem nem a nagy forgalomból érkező konverzióra épül, hanem ajánlásokra, közvetlen megkeresésekre. Legfeljebb 3-5 ügyféllel dolgozok együtt, hogy magasan tudjam tartani a minőséget. Ezért a felhasználói élmény – ezen belül az oldalam betöltési ideje – egyelőre fontosabb nekem, mint az a többletinformáció, amit a Google Analytics-ből nyernék. A forgalmat amúgy meg tudom nézni a szerveroldali statisztikáknál cPanel-en belül.

Merjük megkérdőjelezni a status-quo-t! Gondoljuk át, a mi üzleti modellünkhöz mire van igazán szükség? Ha valaki bébiételt értékesít, valószínűleg felesleges a LinkedIn Insights statisztikai kódjának beágyazása, míg egyes speciális B2B szegmensekben a Facebook Pixel irreleváns.

Az online marketing az eredményekről szól és nem a statisztikákról.

Mindig tegyük fel a kérdést, hogy ez az új adat vagy funkció hozna-e olyan többletbevételt, amiért megéri feláldozni adott esetben a felhasználói élmény és oldalsebesség párosát?

Némi kitekintés: felhasználói élmény

A Google Core Web Vitals report-járól itt volt szó korábban részletesen. Amikor technikai SEO-val foglalkozunk a keresőoptimalizálás részeként, alapvetően az is a felhasználói élmény javítását célozza.

Az oldalsebesség mellett legalább olyan fontos a weboldalon töltött idő: ha értékes a tartalom, akkor a látogató nyilván több időt fog ott tölteni, amit a Google is érzékel és értékel. Ezért hiába a kattintásra ösztönző „click-bait” cím: ha utána nem marad ott a felhasználó, akkor azzal többet ártunk, mint használunk SEO szempontból is.

Értelmetlen varázstrükkökön gondolkozni, egyszerűen tényleg jó tartalmat kell írni. Még ha sikerülne is átmenetileg a Google találati listáján előre kerülni, gondoljunk bele, milyen ügyfeleket vonzana be egy összecsapott tartalom?

A keresőoptimalizálás (SEO) és ezen belül a weboldal sebesség optimalizálás célja, hogy minél gyorsabban azt kapja a látogató, magas minőségben, amit találni szeretne. Egy landing page képzés keretében egyébként minden további nélkül elégséges tudást el lehet sajátítani egy igényes oldal elkészítéséhez.

Néhány tipp a weboldal sebesség optimalizálás elkezdéséhez

A sebesség tesztelésére az alábbi eszközöket vehetjük igénybe:

  • GTMetrix – talán az egyik legelterjedtebb eszköz. Arra érdemes figyelni, hogy a tesztelés helye alapértelmezetten Vancouver, Kanada és egy európai ország esetén érdemesebb Londont választani, mint kiindulási pont. Ezt egy egyszerű email-es regisztráció után térítésmentesen megtehetjük, több más hasznos sebesség teszt beállítást is elérve.
  • Google PageSpeed Insights – a keresőóriás saját tesztje, ami alapján az oldalakat értékeli. Mindig azt a változatot jeleníti meg a mobil és desktop közül, ahol több javítási lehetőség van. Érdemes azért megnézni a másik értéket is.
  • Google Mobile site speed – ez kifejezetten a mobil sebesség optimalizálás terén nyújt javaslatokat, konkrét statisztikákkal is motiválva a döntést.

Ha bármelyik tesztet lefuttatjuk, hamar szembesülni fogunk vele, hogy az optimalizált képek jelenthetik az egyik legnagyobb ugrási lehetőséget. Ennek megvalósításához részletes tippeket találhatunk a képek átméretezése és szerkesztése cikkben.

A másik érdekes csoport egy sebesség teszt során a külső forrásból behívott kódok, analitikák, hőtérkép, email feliratkozási űrlap stb., amelyek be vannak ágyazva. Ami nem ad konkrét segítséget a bevételünk növeléséhez, átmenetileg vegyük ki. Ha valami fontos, de nagyon lassítja az oldalt, írjunk a szolgáltatónak. Ha sokan írnak, fontos lesz nekik is.

A szerversebesség fontos is meg nem is. Egy kódolási oldalról nagyon jól megírt kisebb méretű oldalnál kevésbé releváns, egy nagyobb esetében kulcsfontosságú lehet.

Mindegyikre van számos haladóbb technikai megoldás is. Ilyen például a lazy load, super cache, CDN (content delivery network). Még ezeket meghaladóan is sok izgalmas trükköt találtunk ki az évek során, hogy elérjük az oldalaink betöltési sebességének a lehetséges felső határát. Idővel, kiforrott módszertanként ezt beadtuk a Szabadalmi Hivatalba is.

Azonban nem kell feltétlenül azonnal a nulláról újraépíteni mindent. Lépésről lépésre is sokat tehetünk a honlap optimalizálás során a felhasználók számára legfontosabb oldalakkal kezdve.

Először vegyük sorra a számunkra üzletileg legfontosabb oldalakat. A főoldalt, illetve azt a 4-5 aloldalt, ami a bevételünk legnagyobb hányadáért felel, például azokat a blog bejegyzéseket, ahonnan a legnagyobb konverzió jön, vagy ahova a legnagyobb forgalom esik.

Második körben a Google Analytics-ben az „Oldalidők” menüpont alatt könnyedén ki lehet listázni, hogy mely oldalak teljesítenek a legjobban, és melyek azok, ahol a betöltési sebesség optimalizálása a legfontosabb lenne. Itt is kijelölhetjük azt a kritikus 20%-ot, aminek a sebességét javítani szeretnénk.

Összességében ezzel a pár lépéssel már egész komoly eredményeket érhetünk el. Amikor készen vagyunk, nézzük meg a Google Analytics-ben a Webhelysebesség eredményeket és az új konverziókat, hogy lássuk mit értünk el. Az a tapasztalatom, hogy szó szerint napok alatt megtörténik a változás az érintett minőségi mutatókban, tehát ez egy elég hálás munka, azonnali sikerélménnyel.

Ahogy az élet legtöbb területére igaz, itt is a megelőzés a legköltséghatékonyabb

  • Már a webfejlesztés megkezdése előtt olyan árajánlatot és szerződést kérjünk, amelyben szerepelnek a weboldal betöltési sebesség értékeire vonatkozó célkitűzések. Azt természetesen vegyük figyelembe, hogy egy lassú szerverkörnyezet nem a fejlesztő felelőssége. Élete legjobb kódját írhatja, akkor is lassú lesz az oldal.
  • A képek mérete jellemzően meghatározó az oldalsebesség kapcsán. Azt tapasztaltam, hogy meglepően nagy erőfeszítést kell fordítani az ezirányú oktatásra. Ennek egy drasztikusabb, de 100%-os hatékonyságú megoldása, ha az előzőn felül még kódból is korlátozzuk a JPG, PNG stb. képformátumok fájlfeltöltési méretét. Egy 150-170 KB-os limit ésszerű lehet. Ebben a cikkben az összes kép 52 KB alatt van, és láthatóan jó minőségűek. Meg lehet csinálni. Ha ehhez a megoldáshoz folyamodunk, arra mindenképpen figyeljünk, hogy jól látható legyen a hibaüzenet egy esetlegesen sikertelen képfeltöltés esetén, hogy a felhasználó értse mi történt.

Összefoglaló

  • A weboldal betöltési sebesség kulcsfontosságú. Egy lassú oldal megöli a konverziónkat, és így a profitunkat.
  • Nem kell feltétlenül az egész oldalt azonnal újraírni, elsőnek érdemes lehet akár lépésről lépésre végigmenni a 4-5 leglassabb vagy legfontosabb oldalon, és ott optimalizálni a képek méretét.
  • Hosszútávon, de akár már középtávon is megérheti újraírni a weblap egészét, ha rossz minőségű a kód vagy nem a számunkra optimális CMS-ben készült. Érdemes utánaolvasni a ProcessWire-nek.
  • Az online marketing lényege végsősoron nem a technikák, hanem a pénztárcánk. A keresőoptimalizálás, linképítés, weblap optimalizálás mind ugyanazt a célt kell szolgálja: nagyobb profitot termeljen.
  • Értelmetlen trükkökön gondolkozni: egyszerűen rá kell szánni az időt igényes tartalmak írására, hogy a konverzió és a helyezéseink is jók legyenek.

Minden területen vannak olyan lehetőségek, ahol egy egyszeri viszonylag kisebb befektetéssel nagyságrendekkel nagyobb tartós eredmény érhető el.

Ahogy újabb és újabb hasonló megoldásokat fedeztem fel a marketingben és azon túl is, rájöttem, hogy ezeknek a megtalálásában vagyok igazán jó, és erre alapítottam az Innobloom growth szolgáltatásait is.

Emellett mindig azt tapasztaltam, hogy a kezdeti lelkesedés néhány gyors és látványos eredménnyel a nagyobb figyelmet igénylő feladatokon is könnyebben át tudja lendíteni a csapatokat.

Így idővel önálló szolgáltatásként is bevezettem a weblap sebesség optimalizálást.

aron lukacs
Lukács Áron

Strategic Growth Specialist, 10X enthusiast, Record Breaker @Innobloom


Hozzászólások

Moderáld magad – vagy mi fogunk. :)
Na jó, nem fogunk, szóval csak ésszel!