Az e-kereskedelem dinamikus világában a weboldalunk teljesítménye nem luxus, és nem is másodlagos megfontolás, hanem a marketingtevékenységünk kulcsfontosságú pillére. A weboldal teljesítménye közvetlenül befolyásolja a felhasználói élményt és a konverziós arányokat. A lassú oldalak frusztrálják a felhasználókat, és a betöltési idő minden másodpercével több és több potenciális vásárlót veszítünk. Ha az oldalunk betöltési ideje meghaladja a három másodpercet, a látogatóink több mint 30 százalékát el is vesztettük.
Ráadásul a Google a SEO rangsorolásánál is figyelembe veszi az oldal sebességét.
Ezért elsőrangú prioritás a weboldalad teljesítményének optimalizálása, ha javítani szeretnél a felhasználói élményen, ha növelni szeretnéd a keresési találatokban való láthatóságodat és a weboldaladra irányuló forgalmat. Az alábbiakban bemutatjuk a probléma feltárásához szükséges mérési eszközöket és az optimalizálás legjobb gyakorlatait.
Eszközök a weboldalad teljesítményének mérésére
Számos online eszközt használhatunk arra, hogy felmérjük a problémákat és azonosítsuk, hogy hol kell beavatkoznunk az oldalunk gyorsítása érdekében. Az alábbi eszközök mindegyike elemzi a megadott weboldalt, majd felsorolja számunkra a talált teljesítménybeli problémákat, és tippeket ad a megoldásukra:
A legjobb, ha nem csak egy ilyen eszköz eredményeire támaszkodunk, hanem összesítjük több különböző mérőoldal javaslatait, ugyanis az egyik teljesítményelemző eszköz figyelmen kívül hagyhat bizonyos problémákat, amiket a másik figyelembe vesz.
De azt se felejtsük el, hogy a pontok és eredmények, amiket az elemzés befejeztével mutatnak ezek az oldalak, nem önmagukban vett célok. Itt is ugyanúgy érvényes Goodhart törvénye, miszerint amint egy mérőszám válik az elérendő céllá, az a mérőszám megszűnik hasznos lenni. Sose arra törekedjünk, hogy elérjük mondjuk a 95+-os pontot a Google PageSpeed teszten, hanem arra, hogy ténylegesen elősegítsük a tapasztalhatóan és (tized)másodpercekben mérhetően gyorsabb betöltést. Ha valamelyik mérőeszköz lepontozza az oldalunkat azért, mert egy olyan problémát tapasztalt, ami a valóságban nem, vagy jelentéktelen mértékben befolyásolja az oldalunk teljesítményét, nyugodtan hagyjuk figyelmen kívül azt a javaslatot.
Egy másik roppant fontos eszköz a kelléktárunkban a lassú internetsebesség szimulálása. Ez egy beépített funkció minden asztali böngészőben, amit úgy érhetünk el, ha a tesztelni kívánt weboldalon a jobb egérgombbal lenyitható menüből kiválasztjuk a fejlesztői eszközöket (rendszerint ’Vizsgálat’ vagy hasonló néven hívják), majd azon belül a hálózat fülön beállítjuk a lassabb sebességet, és frissítjük az oldalt. Ez azért fontos, mert bár Magyarország világviszonylatban is kiemelten teljesít internetsebesség szempontjából, de nem optimális körülmények között böngészi az oldalunkat minden felhasználó. A régi készülékek, a hálózati lefedettség hiánya, a terhelt nyilvános hálózatok, vagy a gyenge Wi-Fi jel miatt a felhasználók sokkal lassabbnak tapasztalhatják az oldalunkat, mint amire számítanánk.
Tárhelyszolgáltatók és tartalomkiszolgáló hálózatok
A legelső, amire ügyelnünk kell, hogy megbízható és gyors tárhelyről szolgáljuk ki a látogatókat. Nem kerülhetünk rosszabb helyzetbe, mint amikor olyan tényezők lassítják az oldalunkat, amik nem állnak az irányításunk alatt; ezért kiemelt körültekintéssel válasszunk tárhelyszolgáltatót és szolgáltatást, ugyanis a későbbi migráció sok költséggel és fejfájással járhat.
Úgyszintén ügyeljünk arra, hogy az oldalunk egy úgynevezett tartalomkiszolgáló hálózaton (content delivery network, CDN) keresztül legyen kiszolgálva a felhasználóknak. A CDN-ek olyan szerverhálózatok, amelyek a látogatók földrajzi helyzetétől függően választják ki, melyik szerverről szolgáltassák a webtartalmat.
A Cloudflare, egy vezető – és e sorok írója szerint messze a legjobb – CDN szolgáltató további funkciókat kínál, mint a DDoS védelem, a gyorsítótárazás, a képek tömörítése, és számtalan másik beállítás, ami az oldalunk teljesítményét hivatott javítani. Bár más CDN-ek is léteznek (mint pl. az Amazon CloudFront), a Cloudflare a tapasztalataim szerint messze kiemelkedik a tartalomszolgáltatáson túlmutató funkcióival, globális szerverhálózatával és azzal, hogy számtalan fontos funkciója ingyenesen igénybe vehető.
A Cloudflare úgyszintén segít egy egyszerű beállítással áttérni a HTTP/2 és HTTP/3 protokollok használatára, ami javíthatja a weboldal betöltési sebességét azzal, hogy lehetővé teszi a felhasználó böngészője és a szerver közötti hatékonyabb kommunikációt. Bár manapság sztenderd gyakorlat az újabb protokollokat használni az új weboldalaknál, sok-sok régebbi oldal még mindig az elavult és jelentősen lassabb HTTP/1.1-es protokollt használja.
Képoptimalizálási technikák
A képek jelentősen befolyásolják a weboldal teljesítményét. A különböző képfájlformátumok, mint a JPEG, PNG, GIF és WebP, különböző hatásokkal bírnak a betöltési időkre és a minőségre. A modern, webre optimalizált képformátumok, mint a WebP, jobb tömörítési és minőségi jellemzőket kínálnak a régebbi formátumokhoz képest. A képtömörítés csökkenti a fájlméretet a minőség romlása nélkül, ezzel javítva a betöltési időket. A képfájlok WebP-be való konvertálását megtehetjük manuálisan is olyan eszközökkel, mint a TinyPNG, vagy úgy is, ha beállítjuk, hogy a feltöltött képeket automatikusan konvertálja WebP formátumra.
Ebben úgyszintén segíthetnek a Cloudflare sebességoptimalizáló beállításai, de WordPress oldal esetén egy plugin is elintézheti ezt számunkra. A Shopify 2019 óta automatikusan megteszi helyettünk a konvertálást. A Google pedig számos különböző eszközt biztosít a szoftverfejlesztők számára a WebP konverzióhoz.
Arra is ügyelnünk kell, hogy használjuk az úgynevezett „lusta betöltés” gyakorlatát, amikor az oldalunk képeket jelenít meg a felhasználók számára. A lusta betöltés alapja, hogy a látogató eszközén csak akkor kerül betöltésre a kép, amikor azok a képernyőre kerülnek, ezzel csökkentve az oldal kezdeti betöltési idejét.
Gyorsítótár, minifikáció és késleltetés
Úgyszintén segítségül kell hívnunk a gyorsítótár (cache) technológiáját a sebességoptimalizáláshoz. A gyorsítótár ideiglenes tárolóhelyen tárolja a fájlok másolatait, így a következő kérések, amik ugyanarra a fájlra irányulnak, gyorsabban szolgálhatók ki. Ez jelentősen javíthatja a weboldal teljesítményét. Az, hogy ennek megvalósítása mennyire bonyolult és körülményes, az elsősorban attól függ, milyen technológiával és milyen megfontolások mentén épült az oldalunk.
Ha azonban a Cloudflare-t használjuk CDN-ként, úgyszintén igénybe vehetjük annak gyorsítótár-beállításait, ami néhány kattintással megoldja ezt helyettünk. Továbbá, ha a tárhelyszolgáltatónk szerverei valami oknál fogva elérhetetlenné válnak, a Cloudflare felajánlja, hogy az elmentett oldalt jeleníti meg a látogatóink számára.
A fentieken túl további optimalizációs lépéseket is tehetünk, itt azonban már olyan területre lépünk, amihez szükséges egy mélyebb, technikai megértése annak a szoftvernek, amivel dolgozunk. Röviden összefoglalva, további módosításokat végezhetünk azon a kódon, ami az oldalunkat alkotja, hogy az gyorsabban és hatékonyabban betöltődhessen a felhasználó gépére. Az egyik ilyen megoldás az úgynevezett ’minifikáció’, ami úgy küldi el a kódot a felhasználó böngészőjére, hogy kitörli azokat a karaktereket (új sorokat, kommenteket, szóközöket stb.) amire nincs közvetlen szükség a szoftver futtatásához. Egy másik megoldás az oldalon futtatott JavaScript kód letöltésének késleltetése az ’async’ és ’defer’ attribútumokkal.
Azonban amikor ezeket a megoldásokat próbáljuk a gyakorlatba ültetni, nagyon ügyeljünk arra, hogy ne alkalmazzunk túlságosan agresszív beállításokat, ugyanis ezek könnyen eltörhetik az oldal működéséhez szükséges funkcionalitásokat.
Rendszeres weboldal-karbantartás
A rendszeres weboldal-karbantartás, mint a bővítmények és témák frissítése, az adatbázis takarítása, a hibás linkek ellenőrzése elengedhetetlen a weboldal optimális teljesítményének biztosításához. Ezen felül javasolt rendszeres időközönként újra ellenőrizni az oldalunk teljesítményét a fenti eszközökkel; a sebességoptimalizálás nem egy olyan feladat, amit egyszer elvégzünk, és mindörökre készen is vagyunk vele, hanem egy folyamatos küzdelem az entrópia ellen. Ez főleg igaz olyan oldalak esetén, amiket a WordPress-hez hasonló tartalomkezelő rendszerekkel építettek, ugyanis itt a frissítések új problémákat vezethetnek be a rendszerünkbe. Ezért mindig monitorozzuk az oldalunkat, és tegyük szokássá a teljesítményoptimalizálás céljából végzett karbantartást.
Az adatbázis-optimalizálás egy másik létfontosságú aspektusa a teljesítményoptimalizálásnak, különösen a nagy adatbázisokkal rendelkező e-kereskedelmi oldalak számára. A rendszeres takarítások, indexelés és lekérdezés-optimalizálás segíthet az adatbázis zökkenőmentes működésében (WordPress-alapú oldalak esetén erre kiváló megoldás a WP-Sweep plugin).
Összefoglalás
2015 óta számos különböző technológiával épített weboldal sebességoptimalizálásával foglalkoztam. Akár WordPress vagy más CMS-sel készült, akár egyedi fejlesztésű oldalakról legyen szó, a fentiek minden alkalommal hatalmasat javítottak a betöltési sebességeken. Rendszerint a CDN-integráció és a képek optimalizálása csökkent a legtöbbet a betöltési időből. Szánjunk külön figyelmet azokra az oldalakra, ahova a keresési találatokból érkeznek a felhasználók. Valamint: a kezdőoldalunkra, hogy ne egy hat másodpercen keresztül tartó, üres oldallal hagyjuk az első benyomást az új látogatókban.
