Okosodjunk! - Az e-kereskedelem nagy SEO kihívása: az oldalsebesség
Okosodjunk 😊
Az e-kereskedelem nagy SEO kihívása: az oldalsebesség
Köszönet: Kosárérték.huSzerző: Kiss Mónika
#bitbuybithu, #webáruház, #webshop, #seo,
A vásárlók elvárják, hogy a webshop nem csupán jól használható, esztétikus és biztonságos legyen, hanem gyors is. Az online vásárló számára a várakozás kidobott idő, a türelmetlen online vásárlók bosszankodnak amikor várni kell az oldalak betöltésére, ugyanúgy, ahogy bosszankodnak a bevásárlóközpontban amikor sorban kell állni a kasszánál.
A felesleges várakozás rossz felhasználói élményhez, így a webshop elhagyásához vezet, ami a webshop tulajdonosnak jelentős bevételkiesést okozhat.
A webshop teljesítménye és a bevétel kapcsolata
Az Amazon, a Yahoo, a Google, a Walmart és a Mozilla jó példák azokra az online vállalkozásokra, ahol csak ezredmásodpercnyi különbség drámai hatást gyakorolt az eladásokra:- Az Amazon kiszámította, hogy az oldalának lassulása csak egyetlen másodperccel évente 1,6 milliárd dollárba kerülhet.
- A Walmart és az Amazon egyaránt 1 százalékos bevételnövekedést ért el miután javítottak az oldaluk sebességén 100 milliszekundummal.
- A Yahoo 9 százalékos forgalomnövekedést mutatott az oldalsebesség csökkentése után 400 milliszekundummal.
- A Google 20%-ot veszít minden oldalbetöltéshez használt 100 milliszekundumon.
- A Mozillának évi 60 millióval több letöltése volt, miután az oldaluk 2,2 másodperccel gyorsabb lett.
A lassú webshop nem csupán pénzt veszít, hanem a márkanevet is károsíthatja. A wpengine.com tanulmányaszerint az ügyfelek 66%-a azt mondta, hogy a webhely teljesítménye befolyásolja a vállalkozásról szerzett első benyomásukat és a válaszadók 33%-ában kifejezetten negatív benyomást keltett az a vállalat, akinek lassú volt a weboldala.
Sebesség optimalizálás
A PageSpeed Insights eszközben a webhely URL megadása után gyorsan ellenőrizhetjük a sebesség-pontszámot mobil és desktop esetén is. A pontszám 0-100 között van, a 0 gyakorlatilag csak akkor fordulhat elő, ha hiba lép fel elemzés közben. A Page Speed Score adatok nemcsak a webhely tényleges sebességétől, hanem a felhasználók csatlakozási sebességétől és eszközeitől is függnek.
Ez utóbbi adatok a Chrome felhasználói élmény (CrUX) adatbázisából származnak, amely a felhasználók valós interakciós adatait tartalmazza a webhelyekkel. A PageSpeed Insights konkrét javaslatokat ad a teljesítmény optimalizálására a “Javaslatok” és “Diagnosztika” pontok alatt.
Néhány tipp a sebesség javítása érdekében:
1. Képek optimalizálása
Képek kiterjesztéseA leggyakoribb probléma, ami befolyásolja az oldal sebességét a képeknél keresendő. A JPEG SEO szempontból általában jobb mint a PNG, különösen akkor, ha nem szükséges az áttetsző háttér, mivel jobban tömöríthető. A logók vagy más nagy felbontású grafikai elemeknél vektor alapú SVG használata is megfelelő, ezeknél ne felejtsük el a gyorsítótárazást, illetve ugyanúgy kicsinyíthetünk és tömöríthetünk. A GIF formátum általában olyan egyszerű animációkra használható, amik nem igényelnek nagy színskálát, ezek ugyanis 256 színre korlátozódnak.
Képek mérete
A dimenziók (képmagasság és szélesség) tekintetében figyeljünk arra, hogy a weboldalon használt képek méretei ne legyenek nagyobbak a legnépszerűbb asztali felbontásnál (ez 2560 px szélesség), a túl széles képeket szükségtelenül méretezik át a böngészők. A különböző képernyőfelbontásra a kép különböző változatait használjunk (mobil, tablet, desktop), így csak a szükséges, optimális méretű képet kell a böngészőnek betöltenie.
Képek tömörítése
A Google PageSpeed Insights ajánlásai között szerepel a képek tömörítésére a legújabb generációs formátumokba, mint a JPEG 2000, JPEG XR, vagy a WebP. Ezek nem feltétlenül kompatibilisek minden böngészővel, tehát körültekintően kell használni. (A WebP alkalmazása nekem eddig mindig bevált.)
2. Gyorsítótárazás
A weboldal gyorsítótárazása jelentősen javítja az oldal betöltési idejét a visszatérő látogatóknál. Ha engedélyezve van a gyorsítótárazás, akkor az oldal statikus elemei (pl. képek, HTML dokumentumok) a látogató számítógépén tárolódnak egy ideiglenes fájlban. Amikor egy visszatérő látogató újra felkeresi a webhelyet, ezek a fájlok azonnal betöltődnek, nem kell őket egy távoli gépről lekérni. Ezzel nagyon sokat tehetünk az oldal sebességének javítása érdekében.
3. Kód optimalizálása
A nagyra duzzadt kód is jelentősen csökkentheti a webhelyek betöltési idejét. Minél nagyobb a kód, annál nagyobb a terhelés. Időről-időre nézzük át a kódot, hiszen minden módosítással, kiegészítésel, továbbfejlesztéssel nő a kódunk, ami a végén egy óriás-fájllá duzzadhat.
Távolítsuk el az inline css-eket, üres sorokat, felesleges megjegyzéseket. Nyílt forráskódú rendszereknél téma választásnál ne csupán ár alapján döntsünk, nézzük meg mennyire átgondolt a téma. Lehet hogy az átgondolt témáért valamivel többet kell fizetnünk, de a betöltési idő tekintetében megéri a kezdeti plusz költség.
Minifikálás
A minifikálás gyakorlatilag a felesleges karakterek eltávolítását jelenti. Ezek üres helyek, sortörések, megjegyzések, blokk határolók, amelyek hasznosak a kódon dolgozó emberek számára de a számítógépek számára szükségtelenek.
Így néz ki egy CSS részlet minifikálás előtt:
És így minifikálás után:
A fenti példa csak egy pici részlet, képzeljük el, mennyi helyet lehet megtakarítani egy több ezer sort tartalmazó kódban. A minifikálást szerencsére nem kell manuálisan elvégezni, számtalan ingyenes eszköz létezik ami jól elvégzi a feladatot.
Így néz ki egy CSS részlet minifikálás előtt:
És így minifikálás után:
A fenti példa csak egy pici részlet, képzeljük el, mennyi helyet lehet megtakarítani egy több ezer sort tartalmazó kódban. A minifikálást szerencsére nem kell manuálisan elvégezni, számtalan ingyenes eszköz létezik ami jól elvégzi a feladatot.
Elemek számának optimalizálása
Az logikus, hogy a nagyméretű fájlok lassítják az oldalbetöltést, de nem csak a méretük számít, hanem a darabszámuk is. A webhely minden eleme, függetlenül attól milyen kicsi, egy-egy lekérést jelent a kiszolgálótól. Tehát minden social megosztás gomb, minden kép, minden JS fájl, minden CSS fájlt egy kérés alapján lesz kiszolgálva. A kiszolgáló korlátozott mennyiségű kérést tud teljesíteni másodpercenként. Képzeljük el, hogy a weboldalon 35 elem található, és 35 fájlkérést kap a kiszolgáló gép minden alkalommal amikor valaki meglátogatja az oldalt.
Tételezzük fel, hogy ezt egyszerre megteszi 250 ember. A kiszolgáló 250 különböző forrásból kap kérést 35 fájl betöltésére, ami 8750 betöltést jelent egyidőben. Egy kis gép nem fogja tudni lekezelni ezt a terhelést, a látogatók pedig nem fognak várni.
Tegyük fel a kérdést: tényleg feltétlenül szükséges minden egyes elem az oldalon?
4. Hosting
Teljesen mindegy, mennyire optimalizáljuk a weboldal kódját, ha a szerver lassú, a weboldal is az lesz. Egy rosszul konfigurált, teljesítmény problémákkal rendelkező kiszolgáló válaszideje sosem lesz jó, ha ezzel a problémával találkozunk, át kell gondolni a hosting kérdéskörét.A legkedvezőbb hosting ajánlat nem jelenti azt, hogy ezzel járunk a legjobban. Az olcsó tárhely sok veszteséget okozhat a későbbiekben. Tipikus eset a megosztott tárhely, ahol sok webhely egy szervert használ. Lehet hogy 100.000 forintot megtakarítunk, de eközben több tízmilliós bevételtől esünk el a lassú oldal miatt, amit örökre elhagynak a látogatók.
5. Elavult tartalomkezelők
A tartalomkezelők frissen tartása rendkívül fontos. Gyakori probléma, hogy a weboldal tulajdonosok úgy vélik, hogy ha egyszer készen lett a webshopjuk, ahhoz évekig nem kell nyúlni. A fejlesztők nem azért ajánlják a frissítést, hogy pénzt húzzanak ki a webshop tulajdonosoktól látszólag a semmiért, hanem mert rendkívül fontos a szoftver frissen tartása problémák megszüntetése és sebesség javítása érdekében. Ez főleg a nyílt forráskódú tartalomkezelőkre jellemző, ahol gyakran elmarad a frissítések telepítése. Győződj meg arról, hogy a tartalomkezelő rendszered az összes bővítménnyel együtt a legfrissebb verzión fut.6. CDN
A CDN (Content Delivery Network) lényege, hogy a webshop sebessége abban az esetben is gyors marad, ha azt egy fizikailag távoli gépről akarják elérni. A távolság problémájának áthidalására a szolgáltató több szervert helyez el a világ különböző részein. Ezek a gépek a központi webshop statikus tartalmainak egy-egy másolatát tárolják, így ha egy külföldi vevő beírja a webshop címét a böngészőbe, az nem a központi szerverről, hanem a fizikailag hozzá legközelebb eső gépről fogja az adatokat letölteni.A CDN kifejezetten külföldi piacot is célzó webshopok számára ajánlott. Jelenleg sok CDN szolgáltató közül választhatunk, Magyarországon a legelterjedtebb a CloudFlare, mely akár ingyenesen is használható korlátozott szolgáltatás csomaggal.
7. Szakember bevonása
A fenti néhány tipp is mutatja, hogy sok mindent megtehetünk a webhely sebességének javítása érdekében. Rengeteg időt és energiát jelent egy optimalizálási folyamat, főleg abban az esetben ha nincs tapasztalatunk és nem tudjuk mit csinálunk pontosan. Hosszútávon, főleg a nagy forgalmat bonyolító webshopok esetén, mindenképp javasolt szakember bevonása az optimalizálási folyamatba.További naprakész információkat kaphat Facebook oldalunkon, Facebook csoportunkban, vagy a Twitter oldalunkon.
Üdvözlettel, a BitBuyBit csapata
Megjegyzések
Megjegyzés küldése