Eszterkrém: mobilon 39-ről 88-ra, asztalin 100-ra

Az eszterkrem.hu-ra folyamatosan futnak a hirdetések, miközben az oldalon visszatérően érezhető lassulások jelentkeztek. Minden kattintás egy lassan betöltő oldalra érkezett, ezért a shopot gondozó Kluge Marketing felkért egy átfogó technikai mélyauditra: fel kellett mérni az örökölt, egyedi fejlesztésű sablon sajátosságait, és azokat a pontokat, ahol a PageSpeed és a technikai SEO elbukik.

Az audit a vártnál érdekesebb diagnózist adott. A mobil teljesítmény 39 ponton állt, a főelem (LCP) betöltése pedig 48,3 másodpercet mutatott, de nem „lassú szerver” miatt: a késleltetett JavaScript üresen hagyta a hero-képet, így a Google számára egy külső vélemény-widget lett a mérendő főelem, amely viszont csak a cookie-hozzájárulás után töltött be. Emellett az oldalak title elem nélkül mentek ki, 24 elem bukott a kontraszt-auditon, és betöltés közben 0,495-ös CLS-sel ugrált az elrendezés.

1. Mérés-vezérelt sebesség-kúra

Az audit alapján egyeztetett javítási terv lépésről lépésre, mérésekkel és tesztekkel visszaigazolva valósult meg:

• Halott terhek eltávolítása: nem használt térkép-, animációs- és ikonkönyvtárak, köztük egy elgépelés miatt soha be nem töltő webfont-URL.
• Feltételes betöltés: minden könyvtár csak ott tölt, ahol tényleg használja egy szekció. Galéria csak a terméklapon, térkép csak az üzletkeresőn, slider csak ahol slider van.
• Radikális fogyókúra: a sablon CSS-e 622 KB → 166 KB (a teljes élő oldalkészlet ellen purgolva); az ikonkészlet ~930 KB → 4,6 KB (csak a ténylegesen használt ikonokból épített subset); az animációs könyvtár 72 KB → 1,6 KB; a raszter logók újraépítve SVG-ben (431 KB → 13 KB).
• LCP-mentés: a hero-kép magas prioritású előtöltéssel, külön mobil/asztali változatban, és JavaScript nélkül is azonnal fest.
• CLS nullázás: a slider inicializálási ugrásának kiiktatása és explicit képméretek, 0,495-ről pontosan 0-ra.
• Külső widget megszelídítése: a vélemény-widget csak felhasználói interakcióra, consent-tudatos lazy loaderrel tölt be.

2. Akadálymentesség és technikai SEO: minden kategória 100

• Title-támogatás bekapcsolása (az oldalaknak korábban egyáltalán nem volt title elemük),
• aria-címkék minden ikon-vezérlőn, javított címsor-hierarchia, billentyűzet-kezelés a slider-nyilakon,
• a globális szövegkontraszt egyetlen CSS-változóval javítva: mind a 24 hibás elem egyszerre.

3. Funkcióbővítés: automata kampányok és hűségrendszer

A sikeres gyorsítás után a megbízás kibővült: a shopba egyedi, előre időzíthető kampány- és hűséglogika került, mindez az örökölt sablon módosításával, fizetős plugin-függőség nélkül, kb. 1 900 sornyi kézzel írt üzleti logikával:

• Hűségpont-rendszer: pontgyűjtés vásárlás után, beváltás a pénztárban (ÁFA-helyes elszámolással), automatikus visszatérítés lemondásnál, admin kezelőfelület és ügyféloldali pont-történet, plusz időzíthető pont-szorzó kampányok.
• Ajándékkártya-automata: a kártya megvásárlásakor egyedi kuponkód generálódik, és saját HTML-emailben érkezik a vevőhöz.
• Időzített promóciók: ingyen-szállítás ablakok és automatikus ajándéktermék-kampányok. Előre beállíthatók, a megadott időintervallumban maguktól indulnak és állnak le, kézi beavatkozás nélkül.
• Egyedi pénztár-folyamat, amely a hűségpont-beváltást és a hírlevél-feliratkozást is kezeli, valamint egyedi e-mail sablonok a vásárlói kommunikációhoz.
• Egyedi rendelés-státusz a személyes átvételhez, amely a Barion aszinkron fizetésével is helyesen működik.
• Saját Google Shopping és Facebook katalógus feed, termékmentéskor automatikusan frissülve.
• Üzletkereső térkép (DM, Müller, MOM&Beauty, Primavera) saját geokódolási adatfeldolgozással.

4. Állandó karbantartás

Az elért állapot nem egyszeri bravúr: a projekt lezárásaként az oldal folyamatos technikai karbantartására is megbízást kaptam, így a sebesség, a biztonság és a funkciók hosszú távon is stabilan a helyükön maradnak.

Nagyítás

Nagyítás

Asztali nézetben az oldal mind a négy kategóriában 100 pontos, mobilon pedig minden nem-teljesítmény kategória 100-as. És mindez úgy, hogy egyetlen funkció sem sérült: a hűségpontok, a kampányok és a pénztár változatlanul működnek, csak épp másodpercek helyett azonnal.

A mobil 88 pont pedig őszinte szám: egy összetett, örökölt sablonkörnyezetben futó WooCommerce webshopnál ez a reális felső határ, ennél többet ez az alap nem enged. A saját fejlesztésű rendszereimet eleve úgy építem, hogy ez a plafon feljebb legyen.