Webáruház sebességoptimalizálás

Egy lassú webáruház nemcsak kellemetlen a vásárlóknak: megnehezíti a termékek böngészését, késlelteti a kosár használatát, és bizonytalanná teheti a fizetési folyamatot.

Feltárjuk, mi lassítja az oldalt, majd célzottan javítjuk a szerver, a sablon, a képek, a JavaScript-kódok, a bővítmények és az adatbázis működését.

Nem kizárólag egy magasabb PageSpeed-pontszám elérése a cél. A kategóriaoldalaknak, termékoldalaknak, keresésnek, kosárnak és pénztárnak valódi használat közben is gyorsabban és stabilabban kell működniük.

Kérek sebességoptimalizálást.

Egy űrlap, és felvesszük veled a kapcsolatot. Kötelezettség nélkül.

Felveszem a kapcsolatot

Adataid megadásával elfogadod az Adatkezelési tájékoztatót.

60 +

Sikeresen átadott projekt

10 +

Év e-kereskedelmi tapasztalat

10 + mrd Ft

Forgalom rendszereinkben

Nem elég a nyitóoldalt megmérni

Egy webáruház oldaltípusai teljesen eltérően működhetnek: lehet gyors a nyitóoldal, miközben egy nagy kategória, egy sok változatot tartalmazó termék vagy a pénztár már lassan reagál. A teljesítményelemzés során külön vizsgáljuk:

a nyitóoldalt;
a kategória- és keresési oldalakat;
a termékoldalakat;
a kosarat és a pénztárat;
a vásárlói fiókot;
az adminisztrációt;
az API- és háttérfolyamatokat;
a mobilos működést;
a bejelentkezett és kijelentkezett felhasználókat.

A fejlesztés előtt rögzítjük a kiindulási eredményeket, majd ugyanazon oldalak és használati helyzetek alapján ellenőrizzük a változtatások hatását.

Mit mutat és mit nem a PageSpeed-pontszám?

A PageSpeed Insights laboratóriumi és (megfelelő látogatottság esetén) valós felhasználói adatokat is megjelenít. A kettő eltérhet egymástól, és ez nem feltétlenül mérési hiba:

a laboradat egy adott tesztkörnyezetből származik;
a valós adat sokféle látogatót foglal magában;
a valós Core Web Vitals adatok többhetes időszakot fednek le;
egy frissen elvégzett javítás hatása nem jelenik meg azonnal a mezőadatokban;
alacsony látogatottságnál nem mindig áll rendelkezésre elegendő valós adat.

A pontszám hasznos visszajelzés, de nem önálló üzleti cél: egy 100 pontos oldal is lehet nehezen használható, miközben egy összetettebb webáruház valamivel alacsonyabb pontszám mellett is gyors és stabil vásárlási élményt nyújthat. Ezért azoknak a módosításoknak adunk elsőbbséget, amelyek valódi felhasználói előnyt jelentenek: gyorsabban megjelenő fő tartalom, rövidebb szerverválasz, kevesebb blokkoló erőforrás, gyorsabban reagáló gombok és szűrők, stabilabb elrendezés, kisebb adatforgalom, gyorsabb mobilos működés.

Nem ígérünk előre meghatározott PageSpeed-pontszámot, mert az eredményt a tárhely, a webshopmotor, a külső szolgáltatások, a mérési környezet és az oldal funkciói egyaránt befolyásolják.

LCP

A fő tartalom megjelenési sebessége

A Largest Contentful Paint azt mutatja, mikor válik láthatóvá a képernyőn található legnagyobb tartalmi elem, webáruháznál gyakran egy nyitókép, termékkép, banner vagy nagyobb szöveges blokk.

Gyakori hiba, hogy a képernyő tetején látható fő képet is késleltetett betöltéssel szolgálja ki az oldal; ilyenkor a kép csak későn kerül a böngésző letöltési sorába.

Milyen elem számít LCP-elemnek
Mikor fedezi fel a böngésző ezt az elemet
Megfelelő méretű kép töltődik-e le
Blokkolja-e CSS vagy JavaScript
Mennyi a szerver válaszideje
Szükséges-e az elem előtöltése
Mobilon más elem lesz-e az LCP

INP

Az oldal reakcióideje

Az Interaction to Next Paint azt méri, milyen gyorsan reagál az oldal a felhasználói műveletekre: kosárba helyezés, termékváltozat kiválasztása, menü, szűrő, kupon, szállítási mód, mennyiség vagy egy pénztármező kitöltése.

A romlását gyakran túl sok vagy túl hosszú JavaScript-feladat okozza. Külön vizsgáljuk azokat a funkciókat, amelyek gyorsnak tűnnek betöltéskor, de használat közben késve reagálnak.

A felesleges JavaScript eltávolítása
A hosszú feladatok felosztása
Az eseménykezelők javítása
A DOM méretének csökkentése
Az alkalmazások és mérőkódok felülvizsgálata
A szűrők és termékváltozatok optimalizálása
Az AJAX-kérések számának csökkentése

CLS

Az elrendezés vizuális stabilitása

A Cumulative Layout Shift azt méri, mennyit mozdulnak el váratlanul az oldal elemei betöltés közben. Webshopoknál ezt okozhatja méret nélküli termékkép, későn megjelenő akciós címke, dinamikus szállítási információ, hozzájárulási sáv, felugró ablak, betöltés után megjelenő értékelés, cserélődő webfont, eltérő magasságú termékkártya vagy külső hirdetés.

A javítás során előre lefoglaljuk a dinamikus elemek helyét, megfelelő képméreteket adunk meg, és felülvizsgáljuk a betűtípusok, bannerek és külső komponensek betöltését.

Mobil sebességoptimalizálás webáruházban

A mobilos vásárlók gyakran gyengébb eszközről és lassabb hálózatról érkeznek, ezért egy asztali gépen gyorsnak tűnő webshop mobilon már nehézkesen használható lehet. Ellenőrizzük:

a letöltött képek méretét;
a betöltött JavaScript mennyiségét;
a mobilmenüt és a termékszűrőket;
a képváltót és a ragadós fejlécet;
a kosárba helyezést;
a felugró ablakokat;
a pénztármezőket;
a külső marketing- és analitikai kódokat.

Nem csupán kisebb kijelzőn futtatjuk le ugyanazt a tesztet, a mobilos használati folyamatot és az érintésre adott reakciókat is vizsgáljuk.

WooCommerce sebességoptimalizálás

A sebességet a sablon, a bővítmények, az adatbázis, a tárhely, a gyorsítótár és a külső szolgáltatások együttesen határozzák meg. A gyorsítás része lehet:

a bővítmények és sablon működésének profilozása;
a lassú adatbázis-lekérdezések javítása;
az indokolatlan AJAX-kérések csökkentése;
az objektum- és oldalgyorsítótár beállítása;
a képek optimalizálása;
a CSS- és JavaScript-fájlok rendezése;
a cron- és Action Scheduler-feladatok ellenőrzése;
a külső API-hívások gyorsítása;
a pénztár teljesítményének javítása;
a HPOS-kompatibilitás vizsgálata.

A gyorsítást tesztkörnyezetben végezzük, majd ellenőrizzük a rendelés, fizetés, készletkezelés, számlázás és szállítás működését is.

Redis gyorsítótár WooCommerce-hez

Redis objektumgyorsítótárral csökkenthető az ismétlődő adatbázis-műveletek száma, különösen nagyobb termékkatalógus, összetett lekérdezések vagy sok bejelentkezett vásárló esetén. Beállításkor ellenőrizzük:

támogatja-e a tárhely;
megfelelően működik-e az objektumgyorsítótár;
elkülönülnek-e az egyes webhelyek kulcsai;
helyesen történik-e a gyorsítótár ürítése;
nem maradnak-e elavult készlet- vagy áradatok;
mennyi memóriát használ a rendszer.

A Redis nem javít automatikusan minden problémát: ha a lassulást rosszul megírt lekérdezés, külső API vagy túlterhelt szerver okozza, azt külön kell optimalizálni.

Adatbázis-optimalizálás WooCommerce-ben

Nagyobb webáruházaknál az adatbázis idővel jelentős mennyiségű rendelési, munkamenet-, napló-, meta- és ideiglenes adatot tartalmazhat. A vizsgálat kiterjedhet a lassú lekérdezésekre, a túlméretes táblákra, a hiányzó indexekre, a lejárt transientekre, a régi munkamenetekre, a felhalmozódott háttérfeladatokra, az automatikusan betöltődő beállításokra és a rendeléstárolási módra.

Adatot csak ellenőrzött módon, mentés készítése után törlünk. Nem végzünk általános, minden táblára kiterjedő „tisztítást” annak vizsgálata nélkül, hogy az adott adatot használja-e valamelyik funkció.

High-Performance Order Storage

A HPOS külön táblákban kezeli a rendelési adatokat, ami csökkentheti a hagyományos WordPress táblák terhelését. Bekapcsolás előtt ellenőrizzük:

a WooCommerce-verziót;
a sablon kompatibilitását;
a fizetési és szállítási bővítményeket;
a számlázó- és ERP-kapcsolatokat;
az egyedi rendelési lekérdezéseket;
az adatok szinkronizált állapotát;
a visszaállítás lehetőségét.

A HPOS-t nem kapcsoljuk be automatikusan, ha valamelyik üzletileg fontos bővítmény vagy egyedi fejlesztés nem kompatibilis vele.

Lassú bővítmények kiszűrése

A bővítmények számából önmagában nem állapítható meg, hogy lassú-e egy webáruház: egyetlen rosszul működő bővítmény nagyobb terhelést okozhat, mint több kisebb, megfelelően fejlesztett modul. Profilozással megvizsgáljuk:

mely bővítmény mennyi futási időt használ;
milyen adatbázis-lekérdezéseket indít;
hív-e külső szolgáltatásokat;
minden oldalon betölti-e a kódját;
indít-e túl sok háttérfeladatot;
növeli-e a pénztár válaszidejét;
kompatibilis-e a gyorsítótárral.

Nem kapcsolunk ki találomra üzletileg fontos bővítményeket: előbb azonosítjuk a lassulást, majd javítást, cserét vagy célzott kódbetöltést javaslunk.

Shoprenter sebességoptimalizálás

Shoprenter esetén a szerveroldali infrastruktúra nagy részét maga a platform kezeli, ezért az optimalizálás főként a testreszabható elemekre koncentrál: a sablon felépítésére, az egyedi JavaScript-kódokra, a külső alkalmazásokra, a marketing- és mérőkódokra, a képek méretére, a bannerekre és videókra, a beágyazott tartalmakra, a terméklisták összetettségére, a mobilos megjelenésre és a külső betűtípusokra.

Csak olyan változtatást javaslunk, amely a Shoprenter által biztosított kereteken belül biztonságosan megvalósítható.

Shopify sebességoptimalizálás

A Shopify alapból biztosít CDN-t, képtömörítést, böngészőgyorsítótárazást, valamint CSS- és JavaScript-minifikálást, ezek külső megoldással történő megismétlése sok esetben nem indokolt. Inkább az alábbiakat vizsgáljuk:

a sablon kódját;
a telepített alkalmazásokat és a hátramaradt kódjukat;
a külső szkripteket és a tag manager beállításait;
a termék- és kategóriaoldali szekciókat;
a képek tényleges megjelenítési méretét;
a videókat, animációkat és termékajánlókat;
a mobilos interakciókat.

A Shopify infrastruktúráját nem lehet ugyanúgy módosítani, mint egy saját szerveren futó WooCommerce oldalt.

Kérek sebességoptimalizálást

Képek

Képek komprimálása és WebP-konvertálás

A túl nagy termékképek és bannerek jelentősen növelhetik az oldal adatforgalmát. A konvertálás után vizuálisan is ellenőrizzük a termékfotókat, mert a túlzott tömörítés ronthatja a vásárlási élményt.

A megjelenéshez igazított képméretek
Feleslegesen nagy felbontás eltávolítása
WebP vagy más modern formátum
Reszponzív képváltozatok, srcset és sizes
A képernyő alatti képek késleltetése
A fő LCP-kép NEM késleltetése
Méretfoglalás a CLS elkerüléséhez

Kód

CSS- és JavaScript-minifikálás

A minifikálás eltávolítja a működéshez nem szükséges karaktereket, ezáltal csökkentheti a letöltési méretet, önmagában azonban ritkán old meg egy komoly teljesítményproblémát.

A fájlok egyszerű összevonása sem minden esetben gyorsítja az oldalt: a megfelelő megoldást a kiszolgálási protokoll, a gyorsítótár és a kód függőségei alapján választjuk ki.

A nem használt CSS eltávolítása
A kritikus stílusok előresorolása
A nem kritikus JavaScript késleltetése
Modulok oldaltípusonkénti betöltése
Harmadik féltől érkező kódok csökkentése
Hosszú JavaScript-feladatok felosztása
Duplikált könyvtárak megszüntetése

Cache

Szerveroldali gyorsítótárazás

Csökkenti annak szükségességét, hogy a rendszer minden oldalmegnyitásnál újra lefuttassa ugyanazokat a PHP-műveleteket és adatbázis-lekérdezéseket. WooCommerce-nél azonban külön szabályok kellenek.

Hibás beállítás esetén egy vásárló másik kosarat, elavult árat vagy lejárt készletinformációt láthat, ezért minden gyorsítótárazási szabályt rendelési tesztekkel ellenőrzünk.

A nyilvános termék- és kategóriaoldalak cache-elhetők
A kosár tartalma felhasználónként eltér
A pénztár nem szolgálható ki általános cache-ből
A vásárlói fiók személyes adatokat tartalmaz
Bejelentkezett és kijelentkezett felhasználók külön
Készlet- vagy árváltozáskor cache-ürítés

CDN

CDN beállítása webáruházhoz

A tartalomszolgáltató hálózat a statikus fájlokat (termékképeket, CSS- és JavaScript-fájlokat, betűtípusokat, videókat) a látogatóhoz közelebbi kiszolgálóról töltheti be.

Shopify esetén külön CDN bevezetése általában nem szükséges, mivel a platform saját globális tartalomszolgáltatást biztosít.

Megfelelő gyorsítótárazási idők
Fájlverziók és cache-ürítés
Képátalakítások
Webfontok
Külső szolgáltatások
A személyes és dinamikus oldalak kizárása

Cloudflare

Cloudflare integráció webshophoz

Gyorsítótár, CDN, képoptimalizálás és további teljesítmény- vagy biztonsági funkciók kapcsolhatók egy saját infrastruktúrán futó webáruházhoz.

A Cloudflare alapértelmezetten elsősorban a statikus erőforrásokat gyorsítótárazza. Dinamikus HTML-t csak körültekintően kialakított szabályokkal szabad cache-elni egy webáruházban.

DNS és proxykapcsolat konfigurálása
Statikus tartalmak gyorsítótárazása, egyedi cache-szabályok
A kosár, pénztár és fiók kizárása
Böngészőgyorsítótár, tömörítés
Képoptimalizálás
Szabályozott cache-ürítés, szerverterhelés csökkentése

TTFB

TTFB csökkentése

A Time to First Byte azt mutatja, mennyi idő alatt érkezik meg a szervertől az első válaszadat. Oka lehet túlterhelt tárhely, lassú PHP-feldolgozás, adatbázis-probléma, külső API-ra várakozás, hiányzó oldalgyorsítótár, túl sok átirányítás, lassú DNS, hibás biztonsági modul vagy túl sok háttérfolyamat.

A csökkentése előtt teljesítményprofilozással állapítjuk meg, hol keletkezik a késleltetés, így nem egy gyorsítóbővítménnyel próbáljuk elfedni a valódi szerveroldali problémát.

Betöltési idő és vásárlási élmény

A betöltési idő több kisebb részfolyamat eredménye, ezért a javítás általában több terület összehangolt optimalizálását igényli: a szerver válaszidejét, a képek méretét, a kódok betöltési sorrendjét, a gyorsítótárat, a CDN-t, a külső szkripteket, a bővítményeket, az adatbázist és a mobilos felületet.

A változtatásokat üzletileg fontos funkciók alapján rangsoroljuk: egy ritkán használt látványelem optimalizálása kevésbé fontos, mint a kosárba helyezés vagy a pénztár válaszidejének javítása.

A gyorsabb oldal önmagában nem garantál magasabb konverziót. A használhatósággal, az ajánlattal, az árakkal és a bizalomépítő elemekkel együtt azonban fontos része a vásárlási élménynek, ezért külön figyelmet fordítunk a terméklista gyors megjelenésére, a keresés és szűrés reakcióidejére, a termékváltozatok használatára, a kosárba helyezés visszajelzésére, a pénztár stabil működésére és a mobilos kezelhetőségre.

Ha megfelelő analitikai adatok állnak rendelkezésre, a technikai változtatások után összehasonlítható a használati és konverziós teljesítmény is.

Lassú webáruház hibaelhárítása

A lassulás jelentkezhet minden oldalon, csak az adminisztrációban, bizonyos napszakokban vagy kizárólag egy-egy funkció használatakor. Segítünk többek között az alábbiak feltárásában:

lassú termék- vagy kategóriaoldal;
nehezen betöltődő adminisztráció;
lassú kosárba helyezés;
akadozó termékszűrő;
hosszú pénztári várakozás;
időszakos szerverhiba;
túlterhelt adatbázis;
beragadt háttérfolyamat;
lassú külső API;
frissítés után romló teljesítmény;
memória- vagy processzorterhelés;
hirtelen megemelkedő TTFB.

A hibakeresés során szerver-, adatbázis-, alkalmazás- és böngészőoldali méréseket is használunk.

Lassú webáruházat javíttatnék

Kiindulási mérés

Rögzítjük a fontos oldaltípusok labor- és rendelkezésre álló valós felhasználói adatait.

Technikai audit

Megvizsgáljuk a szervert, a sablont, a bővítményeket, az adatbázist, a képeket, a JavaScriptet, a külső szolgáltatásokat és a gyorsítótárat.

Prioritási lista

A feltárt problémákat várható hatás, fejlesztési igény és üzleti kockázat alapján sorrendbe rendezzük.

Biztonsági mentés és tesztkörnyezet

A nagyobb változtatásokat másolati környezetben végezzük, hogy ne veszélyeztessük az éles rendeléseket.

Optimalizálás

Elvégezzük a jóváhagyott kép-, kód-, bővítmény-, adatbázis-, gyorsítótár- és infrastruktúra-módosításokat.

Funkcionális tesztelés

Ellenőrizzük a termékeket, kosarat, pénztárat, fizetést, szállítást, kuponokat, felhasználói fiókot és integrációkat.

Utómérés

Azonos körülmények között összevetjük a kiindulási és az optimalizálás utáni eredményeket.

Monitorozás

Igény esetén követjük a teljesítmény változását, és jelezzük, ha egy frissítés, új alkalmazás vagy külső szolgáltatás ismét lassulást okoz.

Garantálható a 100 pontos PageSpeed-eredmény?

Nem. Az eredményt a webshop funkciói, a külső szkriptek, a szerver, a mérési környezet és a használt platform is befolyásolja. A cél a mérhető javulás és a gyorsabb vásárlási élmény.

Miért változik a PageSpeed-pontszám két mérés között?

A tesztet befolyásolhatja a szerverterhelés, a hálózat, a gyorsítótár állapota és a mérési környezet. Ezért több mérést és hosszabb távú valós adatot is figyelembe veszünk.

Mennyi idő után javulnak a Core Web Vitals adatok?

A kódváltozás hatása laboratóriumi tesztben azonnal látható lehet. A valós felhasználói adatok többhetes, gördülő időszakot mutatnak, ezért ezek lassabban változnak.

Elég telepíteni egy gyorsítóbővítményt?

Nem feltétlenül. Egy gyorsítóbővítmény segíthet, de nem javítja meg automatikusan a lassú adatbázis-lekérdezést, külső API-hívást, túl nagy képet vagy rosszul működő JavaScriptet.

Gyorsítható a WooCommerce pénztár?

Igen. Vizsgálható a szerverválasz, az AJAX-kérések, a szállítási és fizetési modulok, a kuponkezelés, a külső API-k és a rendelés létrehozásának folyamata. A pénztárat azonban nem szabad hagyományos teljesoldalas cache-ből kiszolgálni.

Érdemes minden képet WebP-formátumra alakítani?

A legtöbb fotónál előnyös lehet, de a megfelelő formátumot, méretet és minőséget képenként, illetve felhasználási mód szerint kell megválasztani. A formátumváltás önmagában nem helyettesíti a helyes képméretezést.

A CDN minden webáruházat gyorsabbá tesz?

Nem minden esetben azonos mértékben. A CDN elsősorban a statikus fájlok és a távoli látogatók kiszolgálásában segíthet. Lassú adatbázis vagy hibás alkalmazáskód esetén külön optimalizálásra van szükség.

Shopify webáruházhoz szükséges külön CDN?

Általában nem. A Shopify saját CDN-t, képfeldolgozást, tömörítést és fájlminifikálást biztosít. A legnagyobb javulást jellemzően a sablon, az alkalmazások és a külső kódok optimalizálása hozza.

Javítható egy frissítés után lelassult webáruház?

Igen. Összehasonlítjuk a változtatás előtti és utáni állapotot, majd megvizsgáljuk a bővítményeket, adatbázis-lekérdezéseket, háttérfeladatokat és külső kapcsolatokat.

Felveszem a kapcsolatot

Nincs kötelezettség
Személyes, nem sablonos válasz
Adataid biztonságban

Gyorsabb webáruház, gördülékenyebb vásárlás

Lassan töltődnek be a termékoldalak? Akadozik a mobilos felület? Gyenge a Core Web Vitals eredmény, vagy egy frissítés után lelassult a webshop? Felmérjük a webáruház teljesítményét, feltárjuk a valódi szűk keresztmetszeteket, majd célzottan optimalizáljuk a rendszert.

Ingyenes konzultáció foglalása

30 perces online megbeszélés

Core Web Vitals auditot kérek

Naptárunkból egyszerűen kiválaszthatod a számodra megfelelő időpontot.

Nincs kötelezettség
Gyors visszajelzés
Gyakorlati javaslatok

Webáruház sebességoptimalizálás

Kérek sebességoptimalizálást.

Nem elég a nyitóoldalt megmérni

Mit mutat és mit nem a PageSpeed-pontszám?