https://code.jquery.com/jquery-1.12.4.min.js Profi, sebesség- és keresőoptimalizált, mobilbarát weboldal készítés
  • Edesburgony.bio weboldal fejlesztés referencia logoja

    Négyszeres sebesség, dupla konverzió

    optimalizálás után

    Esettanulmány

ILYEN VOLT, MIELŐTT HOZZÁNYÚLTUNK.


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 régi oldal hátrányai.


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.

Az oldal újraírása.


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.

  • Az oldal sebessége és stabilitása jelentősen javult.
  • A vásárlók is elégedettek: zavartalanul vásárolhatnak és böngészhetnek az oldalon fennakadások nélkül, tehát a felhasználói és vásárlói élményen sikerült javítani.
  • Szerver oldalról is rendeződtek a dolgok, mivel az erőforrás felhasználás a töredékére csökkent, még extrém látogatottság mellett is hiba nélkül üzemel az oldal.

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.

DX Labz, weboldal készítés hivatalos partner a modern vállalkozások programjában

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.

Írjon nekünk ingyenes szakmai tanácsadásért.


Felkeltettük érdeklődését? Írjon egy pár sort projektjéről, és elmondjuk, miben fejlődhet szerintünk a brandje, weboldala, hogyan hagyhatja maga mögött végre a konkurenseit és milyen megoldásokkal lehet piacvezetővé.

Üzenetküldési animáció
Üzenetét megkaptuk, köszönjük! Minden út az első lépéssel kezdődik... Nagyszerű dolgokat fogunk alkotni együtt! ;)