• Négyszeres sebesség

    újrakódolás után

    Esettanulmány

A régi oldal elemzése.


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 weboldal újraírás előtt az akkori oldalt megvizsgálva több dolgot is megfigyelhettünk a felmérések és a tesztek elvégzése során.

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. Mivel az oldal sebessége már nem volt elfogadható és hátrányosan érintette a vásárlókat, ezzel megnehezítve a vásárlás folyamatát, a „W3 Total Cache” bővítményben látták az utolsó reményt, hogy legalább tűrhető szintre hozzák a betöltési időt.

Az ilyen „cache” bővítmények valóban hasznosak lehetnek a betöltési sebességre nézve viszont elég sok erőforrást használnak fel szerver oldalról és egy ilyen oldal esetében 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.


Ezek után döntöttünk úgy, hogy csak az oldal teljes újraírása jelenthet megoldás az egyre sürgetőbb problémára.

Mivel az oldal dizájn szempontból nem volt túlbonyolítva, í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 stíluselemeit (betűtípus, színek, képek) de már sebességre optimalizálva. A lehető legegyszerűbb és leggyorsabb megoldásokra törekedve sikerült is nagymértékben csökkenteni a megírt kód mennyiségét, ezzel felturbózva a betöltési sebességet és javítva a használhatóságot.

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 újra és tartalmilag készen is volt az „új” oldal. A bővítmények és beépülő modulok beállításával el is indulhatott az oldal tesztelése, ami után apró változtatásokon kívül mást nem kellett már elvégezni.

Elmondható, hogy minden szempontból sikeres volt a fejlesztés!

Az oldal sebessége és stabilitása jelentősen javult. A megrendelő és a vásárlók is elégedettek, zavartalanul vásárolhatnak és böngészhetnek az oldalon fennakadások nélkül. 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 teoretikusan a kezdőképernyő betöltődési sebességét vesszük alapul a régi oldal 6.29mp-el tovább váratta a látogatókat az elfogadottnál, és ez akár 44%-os eredményvesztéssel is járhatott. Természetesen nem tesszük közzé ügyfelünk bevételi adatait, de ha azt feltételezzük, hogy éves szinten 10 milliós forgalmat bonyolít le az oldal, akkor 7.8 millió forinttól is eleshettek a lassú betöltődés miatt!

Döntsék el Önök, hogy megéri e pár tízezer forintot spórolni az oldalfejlesztésnél a kezdetekben.

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


Ne maradjon le a konkurenciától, kötelezettségek nélküli szakértői véleményünkért lépjen kapcsolatba velünk, hogy megtudhassa, mi lenne a legjobb megoldás az Ön számára.

Üzenetküldési animáció
Üzenetedet továbbítottuk, köszönjük!