A WordPress képoptimalizálás nem egyetlen plugin bekapcsolását jelenti. Négy külön feladatból áll: a szükséges pixelméret kiválasztásából, a megfelelő formátumból és tömörítésből, a böngészőnek átadott reszponzív változatokból, valamint az eredmény méréséből.
1. Mérjen módosítás előtt
Nyissa meg a legfontosabb oldalt mobilos Lighthouse- vagy PageSpeed-mérésben, és jegyezze fel:
- a Largest Contentful Paint értékét és elemét;
- a teljes letöltött képmennyiséget;
- a túlméretezett képekre adott figyelmeztetéseket;
- a vizuális minőséget telefonon és nagy kijelzőn.
Mérés nélkül nem derül ki, hogy valóban a képek jelentik-e a szűk keresztmetszetet, és az sem, hogy a módosítás javított-e.
2. Ne töltsön fel szükségtelenül nagy képet
Egy telefonos fotó több ezer pixel széles lehet, miközben egy tartalmi oszlopban csak néhány száz pixel jelenik meg. A feltöltés előtt vagy automatikusan korlátozza a maximális méretet. A megfelelő felső határ a sablontól és a megjelenítési helytől függ; ne használjon univerzális számot minden képre.
A WordPress több képméretet is generál, a böngésző pedig a srcset alapján választhat. Ellenőrizze a kész oldal HTML-jét és a hálózati panelt: valóban a kisebb változat töltődik-e telefonon.
3. Válasszon tartalomhoz illő formátumot
- WebP vagy AVIF: általában jó választás fényképekhez, ha a feldolgozási lánc és a használt böngészők támogatása rendben van.
- JPEG: kompatibilis tartalék lehet fotókhoz.
- PNG: átlátszóságot vagy éles, kevés színből álló grafikát igénylő esetekhez.
- SVG: logóhoz és egyszerű vektorgrafikához, csak megbízható és megfelelően tisztított forrásból.
A WordPress teljesítmény-útmutatója is az optimalizált képeket, a megfelelő formátumot és a modern WebP használatának mérlegelését javasolja. WordPress teljesítmény-optimalizálási dokumentáció.
4. Tömörítsen, de nézze is meg az eredményt
A ShortPixel, Smush és más eszközök automatikusan tömöríthetnek és modern formátumot készíthetnek. Mielőtt a teljes médiatárra futtatja őket:
- készítsen ellenőrzött, külső mentést;
- próbálja ki néhány különböző képtípuson;
- ellenőrizze a részleteket és a színátmeneteket;
- nézze meg, létrejön-e és ténylegesen kiszolgálódik-e az új formátum;
- csak ezután indítsa el a tömeges feldolgozást.
A „100%-kal kisebb” vagy hasonló pluginígéret helyett a saját oldalon mért bájtmennyiség és vizuális minőség döntsön.
5. A főképet ne töltse be lustán
A hajtás alatt lévő képeknél a lazy load csökkentheti a kezdeti letöltést. A nyitóképet vagy más, LCP-elemként megjelenő képet viszont nem érdemes késleltetni: ezzel éppen a legfontosabb vizuális elem jelenhet meg később. A böngésző hálózati paneljén ellenőrizze a prioritást, és csak a később látható képeket töltse lustán.
6. Az alt szöveg nem kulcsszólista
Az alt szöveg röviden írja le a kép lényegét és funkcióját annak, aki nem látja. Dekoratív képnél üres alt érték lehet helyes; információt hordozó képnél legyen konkrét. Ne ismételje bele mesterségesen ugyanazt a keresőkifejezést minden fotóba.
7. Mérjen újra ugyanúgy
Ugyanazzal az oldallal, eszköztípussal és lehetőleg több futással hasonlítsa össze az eredményt. Ellenőrizze külön a főoldalt, egy szolgáltatási oldalt és egy képgazdag cikket. A gyorsulás mellett nézze meg azt is, hogy nem romlott-e a képminőség, a galéria vagy a mobilos elrendezés.
Jó sorrend: pixelméret, formátum, tömörítés, reszponzív kiszolgálás, lazy load, majd mérés. Ha csak plugint telepít, könnyen több kódot ad az oldalhoz anélkül, hogy a ténylegesen letöltött képek kisebbek lennének.
Lassú a WordPress oldala?
Előbb megmérem, mi lassítja, majd csak a bizonyított szűk keresztmetszetet javítom: képet, plugint, gyorsítótárat vagy tárhelyet.
WordPress állapotfelmérés →