A sablonokból összerakott oldalak bár olcsóak és mutatósak lehetnek, pont az univerzalitásuk a rákfenéjük. Mivel minden komponens alapból elérhető bennük ezért feleslegesen nagy a kód és a sebességoptimalizálási szempontokat mellőző „összekattintgatott” felület végeredménye egy még lassabb és így még kevesebb pénzt termelő oldal lesz.
Az edesburgonya.bio weboldalt újraírás előtt megvizsgálva megvizsgálva több komoly tanulságot is levonhattunk a mérések és tesztek alatt. Ezekről számolunk be az alábbi esettanulmányban.
Az oldal egy WORDPRESS alapokra épített WOOCOOMMERCE támogatással ellátott sablont használt, amelyet több bővítmény is kiegészített (site builder, slider .stb). Ezeken kívül még a vásárláshoz, számlázáshoz, hírlevelekhez és egyéb funkciókhoz elengedhetetlen bővítmények voltak feltelepítve.
A felületes oldalfelépítésből kifolyólag és a rengeteg, sokszor felesleges bővítmény alkalmazása miatt az oldal egyre jobban belassult. A teljes tartalombetöltés akár 15 másodpercet is igénybe vett (cache plugin használatával).
A „site builderel”épített weboldalak hátránya, hogy nagyon sok előre megírt kódot tartalmaznak annak érdekében, hogy az oldal megépítésénél már ezeket a kódokat a fejlesztőnek ne kelljen külön megírnia, így felgyorsítva a munkát, viszont lassítva az oldal betöltési sebességét.
Az oldal betöltési sebessége ebben az esetben már kritikusan lassú volt, a felhasználói élményt is rontotta, megnehezítette a vásárlás folyamatát. A „W3 Total Cache” bővítményben látták az utolsó reményt, mint ami a betöltési időt legalábbis tűrhető szintre hozhatja.
Az ilyen „cache” bővítmények valóban hasznosak lehetnek a betöltési sebességre nézve viszont sok erőforrást használnak fel szerver oldalról. Ebben az esetben ez olyan mértékeket öltött, hogy az oldal tárhelyszolgáltatója több alkalommal is kénytelen volt korlátozni az oldal elérését a stabilitás megőrzése érdekében, több-kevesebb sikerrel.
A weboldal alapos vizsgálata után úgy döntöttünk, hogy csak a teljes újraírás jelenthet megoldást az egyre sürgetőbb problémára.
Dizájn szempontjából a weboldal viszonylag egyszerű volt, így a stílus újraírása jelentette a legkissebb gondot. Az alapoktól kezdve építettük fel a HTML+CSS vázat felhasználva a régi oldal alapvető stíluselemeit (betűtípus, színek, képek) – most viszont már az oldal betöltési sebességét tartottunk szem előtt.
A lehető legegyszerűbb és leggyorsabb megoldásokat alkalmaztuk az újraíráskor, így sikerült is nagymértékben csökkenteni a megírt kód mennyiségét.Ezzel jelentősen gyorsítottuk a betöltési sebességet és javítottuk a felhasználói élményt.
Főbb teljesítményindikátorok a sablon egyedi kóddal történő lecserélése után
Adatmennyiség | Kezdőképernyő betöltése | Teljes oldalbetöltés | |
---|---|---|---|
Régi | 4.4 MB | 8.29 mp | 15.31 mp |
Újraírt | 3.3 MB | 1.94 mp | 5.6 mp |
Eredmény | 25% adatforgalom csökkenés | 4X gyorsabb betöltési idő | 3X gyorsabb betöltési idő |
Ezek után már csak a vásárlói adatbázist, a rendeléseket és a termékeket, valamint a bejegyzéseket kellett áthelyeznünk a régi oldalról az az újra. Ezzel tartalmilag el is készült az új weboldal.
A bővítmények és beépülő modulok beállításával elkezdődött az új oldal tesztelése. Az eredmények alapján finomítottunk a weboldalon, komolyabb változtatásokra azonban már nem volt szükség.
Kijelenthető, hogy a fejlesztés minden szempontból sikeres volt, a kitűzött célokat teljes mértékben sikerült teljesíteni.
Iparági mérések alapján minden 2 másodperc feletti újabb másodpercnyi betöltési idő 7%-os látogatóvesztéssel jár. Ha a kezdőképernyő betöltődési sebességét vesszük alapul a régi oldal 6.29 másodperccel tovább váratta a látogatókat az elfogadottnál - ez akár 44%-os eredményvesztéssel is járhatott. Ha azt feltételezzük, hogy egy ilyen weboldal évi 10 millió forintos forgalmat bonyolít, a lassú betöltődés miatt ez akár 7,8 millió forint kiesést is jelenthet ennyi idő alatt.
Az eredmények alapján nem lehet kérdés: megéri-e az oldal fejlesztési költségein spórolni néhány tízezer forintot – és ezzel már akár az első évben több millió forintnyi bevételtől elesni.
A cég a Modern Vállalkozások Programja minősített szállítója. Az oldalon elérhető kedvezményes termékek csak a www.vallalkozzdigitalisan.hu oldalon regisztrált ügyfelek részére érhetők el.