Az oldalsebesség olyan konverziós tényező, amelyet a legtöbb bolt figyelmen kívül hagy, mert nem dizájnprobléma, nem marketingprobléma, sőt nem is termékprobléma. Infrastrukturális kérdés. A hatása viszont ugyanolyan egyértelmű, mint bármelyik másik konverziós gondé. Minden fél másodpercnyi késés mérhetően rontja a konverziós arányt, főleg mobilon, ahol az emberek eleve türelmetlenebbek, és gyakran lassabb a kapcsolat.
Hogyan hat az oldalsebesség a webshop konverziójára?
A sebesség és a konverzió kapcsolatát jól dokumentálják a Google, nagy online kereskedők és több független kutatás. Egy másodperc késés az oldal betöltésében hét százalékkal csökkenti a konverziót. Öt másodperc késés 40 százalékos vagy még nagyobb visszaesést okozhat. Mobilon a konverziós arány még meredekebben esik, mert a mobilos látogatók lassabb kapcsolaton vannak, és kevesebb türelmük van.
A hatás az egész boltodon végigmegy. Minden lassan betöltő oldal alkalmat ad arra, hogy a látogató bosszankodjon és elmenjen. A kezdőlapod, a termékoldalaid, a pénztár. Aki hét másodpercet vár egy termékoldalra, az bosszús, még mielőtt meglátná a termékképet. Sokan bezárják a lapot, és máshol keresik ugyanazt a terméket.
Az oldalsebesség a keresőmotoros helyezésre is hat. A Google rangsorolási tényezőként kezeli a sebességet az asztali és a mobilos keresésben is. Ugyanarra a kulcsszóra a lassabb bolt a gyorsabb versenytársai mögé kerül, vagyis eleve kevesebb látogató érkezik. A lassú oldalak miatti konverzióvesztés így a közvetlen látogatóknál és a keresőből érkező forgalomnál is összeadódik.
Mitől lassú egy webshop?
A legtöbb lassú bolt nem szándékosan lassú. Idővel lesz azzá, ahogy gyűlnek a képek, halmozódnak a bővítmények, vagy nincs optimalizálva a szerver. Ha érted az okokat, könnyebb eldönteni, mit javíts először. Arról, hogyan hat a bolt minden eleme a látogatói élményre, olvass itt: hogyan tervezz olyan pénztároldalt, amely csökkenti a lemorzsolódást, és hogyan tedd mobilbaráttá a webshopodat. Öt fő bűnös van.
Túl nagy képek
A képek általában a legnagyobb fájlok egy termékoldalon. Egy háromszáz kilobájt helyett három megabájtos termékfotó másodpercekkel növeli a betöltési időt. Sok bolt teljes felbontásban tölti fel a képeket, és nem csökkenti a fájlméretet a webhez. A kép jól néz ki, de kétszer annyi ideig tölt, mint kellene. A mobilos felhasználók járnak a legrosszabbul, mert lassabb a kapcsolatuk és kisebb a képernyőjük, így a nagy felbontású képek náluk pazarlók.
Optimalizálatlan kód és szkriptek
Ahogy a bolt újabb funkciókat, értékeléseket, csevegőmodulokat, analitikai követőket és marketingpixeleket kap, mindegyik újabb szkriptet tölt be. A szkriptek betöltés közben blokkolják az oldal megjelenítését. Egy 15 külső szkriptet futtató bolt másodpercekig csak azzal töltheti az időt, hogy mindet betöltse, mielőtt az oldal megjelenik. Néhány szkript nélkülözhetetlen. Sok viszont nem az, vagy várhatna addig, amíg az oldal már látszik a látogatónak.
Lassú tárhely vagy tartalomkézbesítés
Egyes tárhelyszolgáltatók gyorsabbak a többinél. Az a bolt, amely elavult infrastruktúrán fut, nem gyorsítótárazza a statikus elemeket, vagy távoli szerverekről szolgálja ki a tartalmat, lassabban válaszol a kérésekre, mint az, amely modern, földrajzilag elosztott infrastruktúrán működik. A különböző országokban élő látogatók eltérő sebességet tapasztalnak attól függően, milyen messze van tőlük a szerver.
Lassú szerverválaszok
Az, hogy a szerver mennyi idő alatt válaszol egy oldalkérésre, azon múlik, mennyire hatékonyan dolgozza fel a kéréseket és építi fel az oldalakat. A rosszul indexelt adatbázisok, a minden betöltésnél bonyolult lekérdezéseket futtató oldalak vagy a teljesítményre nem optimalizált szerverkód akár egy egész másodperccel vagy többel is megnövelhetik a betöltési időt, mielőtt bármi megjelenne. Ez kevésbé látványos, mint a képek optimalizálása, de gyakran nagy javulást hoz.
Megjelenítést blokkoló erőforrások
Azok a CSS- és JavaScript-fájlok, amelyek blokkolják az oldal megjelenítését, másodpercekkel késleltethetik, hogy a látogató meglássa az oldalt. Ha a boltod olyan CSS- vagy JavaScript-fájlokat tölt be, amelyeket fel kell dolgozni, mielőtt bármi megjelenne, a látogató üres képernyőt lát, amíg ezek be nem töltenek. Ha átrendezed, mely erőforrások blokkolnak, és melyek tölthetnek a háttérben, az érzékelt sebesség látványosan javul, akkor is, ha a teljes betöltési idő ugyanannyi marad.
Hogyan mérheted a webshopod oldalsebességét?
Amit nem mérsz, azt nem tudod javítani. Először állapítsd meg, milyen gyorsan tölt be most a boltod.
Google PageSpeed Insights
A Google PageSpeed Insights eszköze bármelyik URL-re sebességpontszámot ad, és felsorolja a talált konkrét hibákat. Az eszköz ingyenes, és nem kell beállítani. Nyisd meg a pagespeed.web.dev oldalt, írd be az URL-t, és megkapod a mobilos és az asztali pontszámot, konkrét javaslatokkal. A javaslatok a becsült hatás szerint vannak sorba rendezve. A legnagyobb hatásúakkal kezdd.
Részletes sebességmérő eszköz
Egy részletesebb sebességmérő eszköz vízesésdiagramot mutat arról, melyik erőforrás tölt a leghosszabb ideig, és hol keletkeznek a késések. Különböző földrajzi helyekről, eszköztípusokkal és hálózati sebességekkel is tesztelhetsz vele. Ebből kiderül, hogy a lassúság mindenhol jelentkezik-e, vagy csak bizonyos régiókban, illetve csak mobilon vagy csak asztali gépen.
Az analitikád
Az analitikai eszközödnek meg kell mutatnia az oldalak és a forgalmi források betöltési idejét. Hasonlítsd össze a legfontosabb oldalaid betöltési idejét. Ha a termékoldalaid jóval lassabban töltenek, mint a kezdőlapod, ezt érdemes külön megvizsgálni. Ha a mobilos oldalak lassabbak az asztaliknál, az kép- vagy megjelenítési problémára utal. A látogatói viselkedés analitikával való megértéséről teljes útmutatót találsz itt: hogyan használd az analitikát, hogy megértsd a látogatók viselkedését a boltodban.
Teszteld valódi eszközökön
Ne csak az eszközökre támaszkodj. Nyisd meg a boltodat egy valódi okostelefonon, normál 4G kapcsolaton, és nézd meg, mennyi ideig töltenek az oldalak. Így megtudod, milyen érzés a boltod egy valódi vásárlónak. Az eszközök konkrét mutatókat mérnek, de a felhasználó érzete többet számít. Az a bolt, amely azonnalinak tűnik, gyorsabb annál, amelyik elméletileg jó pontszámot kap, de a felhasználót érezhető késéssel bosszantja.
Melyek a leggyorsabb módszerek az oldalsebesség javítására?
Egyes javítások órákig tartanak. Másokhoz percek kellenek, és azonnal mérhető eredményt adnak.
Optimalizáld a képeket
A képek optimalizálása általában a legnagyobb hatású és legkisebb munkát igénylő javítás. Használj képtömörítő eszközt, hogy észrevehető minőségromlás nélkül csökkentsd a fájlméretet. Egy 3 MB-os termékfotó gyakran 300 KB-ra tömöríthető látható különbség nélkül. Minden képet feltöltés előtt tömörítsd, ne utána. Válaszd a megfelelő formátumot: JPEG fényképekhez, PNG átlátszóságot igénylő képekhez, WebP a legnagyobb tömörítéshez modern böngészőkben. Különböző méretű képeket szolgálj ki a különböző eszközökre. Egy mobiltelefonnak nem kell 4000x4000 pixeles kép. A technikailag is jól teljesítő termékképekről többet olvashatsz itt: hogyan tervezz olyan termékoldalakat, amelyek vásárlásra ösztönöznek.
Távolítsd el a felesleges bővítményeket és szkripteket
Nézd át a boltodon futó összes külső szkriptet. Analitika, csevegés, értékelések, marketingpixelek, modulok. Kapcsold ki azokat, amelyek nem járulnak hozzá aktívan az üzletedhez. Minden szkript súlyt ad az oldalhoz, és lassítja. Ha nem használod, töröld. Ha több eszközre van szükséged, érdemes összevonni őket. Öt különböző szolgáltatás helyett egy platform, amely több funkciót egyesít, gyorsabban tölt, mint öt külön.
Kapcsold be a gyorsítótárazást
A gyorsítótár a statikus elemeket a látogató böngészőjében vagy köztes szervereken tárolja, így nem kell újra letölteni őket minden látogatáskor. A böngészős gyorsítótár sok betöltési időt spórol a visszatérő látogatóknak. A szerveroldali gyorsítótár az oldalak elkészült változatát tárolja, így a szervernek nem kell minden kérésnél elölről felépítenie az oldalt. A legtöbb modern tárhely mindkettőt támogatja. Nézd meg a tárhelyszolgáltatód dokumentációját, vagy kérd meg őket, hogy kapcsolják be, ha még nincs bekapcsolva.
Kicsinyítsd a CSS- és JavaScript-fájlokat
A kicsinyítés (minification) felesleges karaktereket távolít el a kódfájlokból anélkül, hogy a működésük megváltozna. Egy megfelelően kicsinyített CSS- vagy JavaScript-fájl 20-30 százalékkal kisebb az eredetinél. Ha hozzáférsz a boltod kódjához, a kicsinyítés egyszerű. Ha nem, kérdezd meg a tárhelyszolgáltatódat vagy a fejlesztődet, be van-e már kapcsolva. Minden modern tárhelyen alapból be kell lennie.
Halaszd el a nem kritikus JavaScriptet
Az a JavaScript, amelyre az oldal betöltésekor nincs azonnal szükség, várhat. Csevegőmodulok, analitika, marketingpixelek. Ezeknek nem kell betölteniük, mielőtt az oldal megjelenik a látogatónak. Ha elhalasztod őket addig, amíg a fő oldal már látszik, az érzékelt sebesség jelentősen javul. Az oldal gyorsnak tűnik, akkor is, ha a teljes betöltési idő ugyanannyi marad, mert a látogató azonnal tartalmat lát, és nem egy üres képernyőt bámul, amíg a szkriptek töltenek.
Mennyi idő után látszanak a sebességjavítás eredményei?
Az oldalsebesség változásai azonnal hatnak. Aki holnap reggel meglátogatja a boltodat, már a gyorsabb oldalt fogja tapasztalni. A konverzió javulása a sebességváltoztatások után napokon belül látszik, ha elég nagy a forgalmad a méréshez, mert a változás minden látogatót egyszerre érint.
Az A/B tesztelésekkel ellentétben a sebességjavítást nem kell tesztként futtatnod. Ha a PageSpeed Insights talál egy hibát, és te kijavítod, a boltod gyorsabb lesz. A gyorsabb oldalnak nincs hátránya. Minden látogató azonnal profitál belőle.
Az egyetlen fenntartás, hogy a sebesség csak egy a sok konverziós tényező közül. Ha a pénztárad hibás, a termékoldalad zavaros, vagy alapvető bizalmi gondok vannak, a sebességoptimalizálás önmagában nem mozdítja meg látványosan a konverziót. A sebességjavítások akkor működnek a legjobban, ha egy szélesebb konverzióoptimalizálási stratégia részei. A konverziós arányt befolyásoló tényezők teljes áttekintését itt találod: mi a konverzióoptimalizálás, és miért fontos.
Másképp számít a sebesség mobilon, mint asztali gépen?
Mobilon az oldalsebesség jobban számít, mint asztali gépen. A mobilos látogatók lassabb kapcsolaton vannak, gyakran sietnek, és azonnal otthagyják az oldalt, ha nem tölt be gyorsan. A konverzióra gyakorolt hatás különbsége jelentős. Egy bolt, amely asztali gépen öt százalékot konvertál, mobilon lehet, hogy csak kettőt, és ebben a résben nagy része van a sebességnek.
A mobilos látogatók a nagy képfájlokra is érzékenyebbek. Egy három megabájtos termékkép, amely jó sávszélességű asztali kapcsolaton három másodperc alatt tölt be, 4G-s telefonon akár tíz másodpercig is tarthat. Teszteld a boltodat egy valódi mobileszközön, hogy reális képet kapj arról, milyen érzés használni.
Egy konkrét mobilos gond, amire figyelj: az asztali megjelenítésre optimalizált képek gyakran túl nagyok a mobil képernyőkhöz. Ha reszponzív képeket szolgálsz ki, amelyek az adott képernyőmérethez igazodnak, és nem erőltetsz egy asztali méretű képet a mobilra, csökken a fájlméret és a betöltési idő.
Hogyan hat az oldalsebesség a többi konverziós tényezőre?
Az oldalsebesség nem létezik elszigetelten. A bizalommal, a dizájnnal, a termékoldalakkal és a pénztárral együtt működik. Egy gyors oldal zavaros elrendezéssel is elveszíti a látogatókat. Egy lassú oldal szép dizájnnal még gyorsabban veszíti el őket. A kapcsolat szorzó jellegű, nem összeadó.
Az a bolt, amely gyors, bizalmat épít, és tiszta vásárlási utat kínál, jóval többet konvertál, mint amelyik csak gyors. A sebességjavulás az összes többi tényező környezetében hat. Ezért a konverzióoptimalizálás rendszerszintű folyamat, nem egyetlen javítás. Arról, hogyan segít az A/B tesztelés megtalálni, mi fogja vissza a konverziós arányodat, részletesen itt olvashatsz: hogyan A/B teszteld a webshopodat.
Hogyan segít a WEMASY az oldalsebességben és a konverzióban
A WEMASY e-kereskedelmi rendszerében a webshop oldalait a WEMASY weboldalépítőben építheted fel. A sebességgel kapcsolatos teendőket, például a képméretet és a betöltést, az oldalaid felépítésekor magad kezeled. A teljes funkciólistát a csomagoknál találod. Az Analitika & betekintések oldalon a webhelyed forgalmi adatairól olvashatsz.
Gyakran ismételt kérdések
Mi a jó oldalbetöltési idő egy webshopnak?
A legtöbb forrás azt javasolja, hogy az oldal első megjelenítése két másodperc alatt legyen kész, a teljes betöltés pedig minden képpel és erőforrással három másodperc alatt. A két másodperc alatti idő gyors élményt ad, amely minimalizálja a lemorzsolódást. A két és négy másodperc közötti idő elfogadható, de mérhetően rontja a konverziót. A négy másodperc feletti lassú, ezzel foglalkozni kell. Ezek irányelvek, nem szigorú szabályok. Az a bolt, amely 1,5 másodperc alatt betölt, jobban konvertál, mint amelyik 2,5 másodperc alatt, pedig mindkettő az elfogadható sávban van. A WEMASY weboldalépítőjében felépítheted a webshopod oldalait.
Befolyásolja az oldalsebesség a keresőmotoros helyezést?
Igen. A Google kifejezetten rangsorolási tényezőként kezeli az oldalsebességet az asztali és a mobilos keresésben is. Ha minden más egyenlő, a gyorsabb bolt a lassabb elé kerül ugyanarra a kulcsszóra. Ez azt jelenti, hogy az oldalsebesség két csatornán hat a konverziós arányodra: közvetlenül, mert a gyorsabb oldalak több látogatót alakítanak vevővé, és közvetetten, mert a jobb helyezés több látogatót hoz. A webshopok keresőoptimalizálásáról teljes képet kapsz itt: hogyan építs SEO-stratégiát a webshopodhoz.
Javíthatom az oldalsebességet fejlesztő nélkül?
Sok nagy hatású javításhoz nem kell kódolni. A képek optimalizálása, a felesleges bővítmények eltávolítása és a gyorsítótárazás bekapcsolása a legtöbb platform admin felületén elérhető. Néhány javításhoz, például a JavaScript elhalasztásához vagy a szerverválaszok módosításához fejlesztői hozzáférés vagy tudás kellhet. Ha a boltod modern platformon fut, ezek közül sok már alapból megvan. Ha egyedi boltod vagy régebbi platformod van, egy fejlesztő segíthet megtalálni a gyors nyereségeket, és megvalósítani őket.
Mi a különbség az első tartalmas megjelenés és az oldalbetöltési idő között?
Az első tartalmas megjelenés (first contentful paint) az a pillanat, amikor az első tartalmi elem (szöveg, kép stb.) megjelenik az oldalon. Az oldalbetöltési idő az a pillanat, amikor az összes fontos erőforrás betöltött. Az első tartalmas megjelenés történik előbb, és a látogató ezt érzékeli úgy, hogy "milyen gyors ez az oldal". Az az oldal, amelynek első tartalmas megjelenése két másodperc, a teljes betöltése viszont nyolc, gyorsnak tűnik a látogatónak, mert a tartalom hamar megjelenik, még ha a háttérben egyes erőforrások még töltenek is.
Az oldalsebességet vagy a dizájnt priorizáljam?
Mindkettő számít, de a sebesség többet, mert egy tíz másodperc alatt betöltő gyönyörű oldal gyorsabban veszít konverziót, mint egy egyszerű, két másodperc alatt betöltő. A helyes válasz a gyors és jól megtervezett oldal. Ha választanod kell, először a sebességet priorizáld. Egy gyors, egyszerű oldal jobban konvertál, mint egy lassú, gyönyörű. De ne fogadd el a hamis választást. A modern tervezőeszközök és platformok egyszerre szép és gyors oldalakat adnak.