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.

Ezek alapján már teljesen nyilvánvaló, hogy minden egyes másodperc hatalmas hatással lehet az e-kereskedelmi bevételre.

A lassú webshop nem csupán pénzt veszít, hanem a márkanevet is károsíthatja. A wpengine.com tanulmánya szerint 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ése

A 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

Sebesség optimalizálás szempontjából nagyon fontos a képek tényleges fájlmérete. Törekedjünk arra, hogy a képeket 100 Kb alatti tartományban tartsuk meg. Nyilván ez nem mindig megoldható, van amikor nagyobb méretre van szükség (például hero képek vagy nyitó oldalon szereplő bannerek esetén), itt viszont alkalmazhatunk progresszív JPG-t.

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.

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.