Egy lassú weboldal csendben veszít: a látogató nem szól, hogy "túl sokáig töltött", egyszerűen bezárja a lapot. A Google pedig szintén szereti a gyors oldalakat. A legtöbb WordPress oldalnál három területen lehet a legtöbbet nyerni: a képeken, a gyorsítótáron és azon, hogy tényleg méred is, mi lassú.
1. lépés: a képek
A legtöbb oldalon a képek adják a letöltött adat oroszlánrészét, ezért itt kezdd.
Használd a megfelelő formátumot
- WebP: a legjobb általános választás. A JPG-nél jellemzően kb. harmadával kisebb fájlt ad hasonló minőségben, támogatja az átlátszóságot, és minden modern böngésző érti.
- AVIF: még jobban tömörít, de nem minden környezetben támogatott teljesen, ezért óvatosabban használd.
- SVG: ikonokhoz és logókhoz tökéletes, mert méretfüggetlen és mindig éles.
Méretezd meg a képet
Egy 2000 pixel széles kép egy 300 pixeles dobozban csak felesleges adatforgalmat jelent. Feltöltés előtt méretezd át arra, amekkorára tényleg szükség van, és tömörítsd. Erre jó például a Squoosh vagy a TinyPNG, de bővítménnyel is automatizálható: Converter for Media, ShortPixel, Imagify. A veszteséges tömörítés (JPG, WebP) kisebb fájlt ad kis minőségvesztéssel, a veszteségmentes megőrzi a minőséget, de nagyobb marad.
Amit a WordPress már megcsinál helyetted
- A feltöltött képből több méretet is legyárt, és a
srcsetmegsizesattribútumokkal a böngésző a képernyőhöz illőt tölti be. - A lazy load (késleltetett betöltés) WordPress 5.5 óta alapból működik: a képernyőn kívüli képek csak akkor töltődnek, amikor a látogató odagörget.
És a SEO
Adj minden képhez alt szöveget, és nevezd el értelmesen a fájlt: weboldal-optimalizalas.jpg jobb, mint az IMG_001.jpg. Ez segít a keresőknek és a képernyőolvasót használóknak is.
2. lépés: a cache
A gyorsítótár (cache) ideiglenesen eltárolja, amit nem kell minden látogatásnál újra előállítani. Több szintje van:
- Böngésző cache: a képek, CSS és JS a látogató gépén maradnak, ezért a következő látogatáskor nem kell újra letölteni.
- Oldal cache: a WordPress oldal statikus változata mentődik, így nem kell minden betöltéskor lekérdezni az adatbázist.
- Szerver cache: a tárhely szintjén működik (például LiteSpeed Cache vagy Varnish).
- CDN: a tartalmad a látogatóhoz közeli szervereken is tárolódik (például Cloudflare).
Ingyenes bővítményekből a WP Super Cache, az Autoptimize (CSS, JS és HTML tömörítés) és a WP-Optimize (adatbázis-tisztítás és cache) bevált. LiteSpeed szerveren a LiteSpeed Cache a legjobb választás. Fontos: egyszerre csak egy oldal-cache bővítményt használj, mert ütköznek.
Mikor töröld a gyorsítótárat?
Ha kicseréltél egy képet vagy módosítottad a CSS-t, de az oldalon a régi látszik, akkor a cache a ludas. Ilyenkor:
- Töröld a cache bővítményben (általában "Delete Cache" gomb).
- Ha használsz CDN-t, ott is töröld (purge).
- Töröld a szerver cache-t, ha a tárhely használ ilyet.
- A böngészőben pedig frissíts kényszerítve: Ctrl + Shift + R.
3. lépés: mérj, ne találgass
Gyorsítás előtt és után is futtass tesztet:
- Google PageSpeed Insights: mobilra és asztalira külön mér.
- GTmetrix: részletes elemzés, hogy melyik fájl mennyit tölt.
- Chrome DevTools: a Network fülön látod, melyik fájl a legnagyobb vagy leglassabb, a Console fülön a hibákat.
Három mutatóra figyelj:
- FCP (First Contentful Paint): mikor jelenik meg az első tartalom.
- LCP (Largest Contentful Paint): mikor töltődik be a legnagyobb elem, például a főkép.
- CLS (Cumulative Layout Shift): mennyire ugrál az oldal betöltés közben.
Ha az LCP lassú, a legtöbbször a nem optimalizált kép, a hiányzó cache vagy a gyenge tárhely áll mögötte.
Gyors összefoglaló
- Optimalizáld a képeket: WebP, jó méret, alt szöveg.
- Kapcsold be az oldal-cache-t, és tanuld meg, mikor kell törölni.
- Mérj előtte és utána, mobilon is.
- Töröld a felesleges bővítményeket, mert azok is lassítanak.
Ha ezekkel sem elég gyors az oldalad, vagy nem akarsz időt tölteni vele, nézd meg az ingyenes audit lehetőségét: megmérem, mi lassítja az oldalad, és megmondom, mit érdemes javítani.