WordPress weboldal gyorsítása egyszerűen Autoptimize-al
Ebben a bejegyzésben azoknak szeretnék segítséget nyújtani, akik szeretnének javítani a WordPress alapú weboldaluk teljesítményének és oldalsebességének javításában. Egy viszonylag egyszerű megoldást szeretnék bemutatni, amelyhez különösebb technikai előképzettség sem szükséges.
Az Autoptimize egy ingyenes WordPress plugin, amely nagy segítséget nyújthat a HTML, CSS és a JavaScript optimalizálásában, továbbá az új verzió már a képek optimalizálását is támogatja. Napjainkban, már több, mint egymillió weboldal használja. Szerencsére a fejlesztők folyamatosan frissítik, bővítik a tudását, így ma már egy igazi WordPress svájcibicskának tekinthető.
Az Autoptimize ingyenes verziója letölthető innen.
A cikk a bővítmény 2020. 05. havi állapotát mutatja. Mielőtt belekezdenénk, mindenképp legyen mentésünk az oldalról, hogy ha valami balul sülne el, akkor lehetőségünk legyen a helyreállításra!
Automatikusan optimalizálja a JS, CSS és HTML beállításokat
Elsőre nagyon bonyolultnak tűnhet a beállítások garmadája, amivel szembe kerülünk a plugin telepítését követően. Én az általam javasolt beállításokat szeretném bemutatni, amelyek sokat segíthetnek a WordPress weboldalunk teljesítményének és sebességének növelésében.
JavaScript beállítások

Optimize JavaScript Code beállítás
Ezt a lehetőséget engedélyezzük, ebben az esetben a rendszer optimalizálja és tömöríti a JavaScript fájlokat.
Aggregate JS Files
Az aggregáció engedélyezésével, az Autoptimize megpróbálja a JavaScript fájlokat egyetlen fájlba egyesíteni. Ez azért jó, mert lényegesen javulhat a betöltési sebesség tőle azokon a szervereken, ahol nincs engedélyezve a multiplexing (több egyidejű letöltés). A beállítást követően minden esetben ellenőrizzük, hogy a weboldalunk jól töltődik-e be. Vannak olyan sablonok, amelyek rosszul reagálnak az aggregációra.
Exclude Scripts from Autoptimize
Ez az opció lehetővé teszi, hogy bizonyos scripteket kizárjunk az aggregáció folyamatából. Ez akkor jöhet jól, ha a sablonunkban hibát tapasztalunk és szeretnénk, ha bizonyos sablonhoz köthető JavaScript fájlok kimaradnának a fentiekből. Az Autoptimize ezt alapból kitölti a meglévő információk alapján, érdemes bent hagyni, amit alapból ide tesz.
CSS Beállítások

Optimize CSS Code
Ezt a lehetőséget engedélyezzük, ebben az esetben a rendszer optimalizálja és tömöríti a CSS fájlokat.
Aggregate CSS Files
Az aggregáció engedélyezésével, az Autoptimize megpróbálja a CSS fájlokat egyetlen fájlba egyesíteni. Ahogy fentebb írtuk, ennek sok előnye van, de ellenőrizni kell, hogy a sablonunk hiba nélkül működik-e.
Also Aggregate Inline CSS
Ez az opció áthelyezi az Autoptimize által kezelt CSS fájlba a sablon inline CSS tartalmát. Nagyon sokat számít a weboldal méretének optimalizálásában, de ahogy az összes beállítás, ez is tesztelésre szorul!
Exclude CSS from Autoptimize
Hasonlóan, mint a JavaScript esetében itt is lehetőség van kizárni bizonyos CSS fájlokat a folyamatból. Ezt az Autoptimize alapvetően kitölti, de mi is hozzá tudunk adni manuálisan CSS fájlokat.
HTML beállítások

Szintén a weboldal méretének optimalizálásában játszik szerepet. Itt egyedül az Optimize HTML Code jelölőnégyzetet pipáljuk ki. Ennek hatására a rendszer tömöríteni fogja a HTML fájlokat (például a szóközök és commentek eltávolításával). Bekapcsolás után tesztelést igényel minden esetben, mert bizonyos sablonok nem viselik jól ezt a megoldást!
CDN – Cache info
A CDN beállítására itt nem térnék ki, mert meglehetősen összetett és átlagos felhasználás esetén nem szükséges a weboldalunkhoz.
Misc Options beállítások

Save aggregated script/css as static files?
Javasolt ezt a beállítást engedélyezni, mert így statikus fájlokban kerülnek mentésre a JavaScript és CSS fájlok. Néhány tárhelyszolgáltatónál ez problémát okozhat, azonban általánosan ez a legjobb megoldás.
Minify excluded CSS and JS files?
Minimalizálja a kizárt JavaScript és CSS fájlokat is. Hasznos, hiszen ezzel is értékes időt nyerhetünk a betöltési sebességből.
Also optimize for logged in editors/ administrators?
A bejelentkezett felhasználók is az Autoptimize által generált tartalmat tudják megtekinteni a segítségével. Hasznos, hiszen így tudjuk igazából tesztelni a plugint.
Képoptimalizálás Autoptimize segítségével

Rendelkezik kép optimalizálási lehetőséggel is, amelyet a Shortpixel szolgáltatásának beépítésével oldottak meg. Meglehetősen jó szolgáltatásról van szó, amely akár a WEBP képek kiszolgálását is lehetővég teszi. Sajnos az ingyenes csomagban csak 1 000 kép kiszolgálását teszi lehetővé a Shortpixel CDN-en keresztül, ami egy átlagos forgalmú weboldalnak szinte biztosan nem lesz elegendő. Így ezt az opciót csak akkor javaslom bekapcsolni, ha előfizetünk a legkisebb elérhető csomagra, ami kb. havi 5$-ba kerül.
Lazy load images opció
Javasolt bekapcsolni, optimalizálja az oldalon az egyes képek betöltésének idejét. Egész pontosan a kép akkor kerül betöltésre, ha éppen látható. Ezt a Google is szereti és a sebességet is javíthatja.
Lazy-load exclusions
Itt is lehetőségünk van arra, hogy bizonyos képeket kizárjunk ebből az opcióból. Ez pl. a fejléc képei esetén hasznos lehet, mert így nem fognak késve megjelenni.
További optimalizációk – Extra Auto-Optimizations

Google Fonts
A legtöbb sablon ma már használja a Google Fonts betűtípusait, hiszen ezek kiszolgálása gyors és ráadásul mindenki számára elérhető. Azonban ezek extra hívások által kerülnek betöltésre, amik lassíthatják a weboldalunkat. Itt a következők a lehetőségeink:
- Hagyja, ahogy van.
- Távolítsa el a Google Betűtípusokat.
- Kombinálja és összekapcsolja a fejrészben.
- Kombinálja és előtölti a fejrészben.
- Kombinálja és töltse be a betűkészleteket aszinkron módon a webfont.js fájllal
Az utolsó 3 beállítás az, ami a legnagyobb pluszt tudja nyújtani teljesítményben és sebességben egyaránt. Ezeket érdemes tesztelni, hogy számunkra melyik a legideálisabb.
Remove emojis
Ahogy a nevében is látható, eltávolítja a WordPress-ből a hangulatjeleket. Igazából érdemes engedélyezni, mert alapvetően is szükségtelenek.
Remove query strings from static resources
A lekérdezési karakterláncokat tudjuk eltávolítani a segítségével. A betöltési időre nincs hatással, azonban a Google PageSpeed pontszámunkat emelni fogja.
A többi beállítás főleg gyakorlott felhasználók számára nyújt lehetőséget és általánosan a kisebb weboldalak esetében nem szükségesek.
Összefoglalás
Alapvetően egy szuper megoldásról van szó, ha szeretnénk a WordPress alapú weboldalunkat felgyorsítani. Véleményem szerint ez az egyik legjobb rendelkezésre álló megoldás a HTML, JavaScript és CSS fájlok tömörítéséhez. A képek kezelése esetén reméljük, hogy még fejlődni fog, mert maga a megoldás remek, azonban az 1 000 képbetöltés az iszonyatosan gyorsan kevéssé vállhat. Szuper extra, hogy lehetőségünk van a Fontok, Emojik, és a lekérdezési karakterláncok modifikálására is. Ezek mind-mind számítanak a pontszámainkban, de nincsenek különösebb hatással a felhasználói élményre.
Ha a fentiek szerint beállítottuk a plugint, akkor a Google Pagespeed értékünk legalább 25 ponttal fog javulni és a weboldal sebességében is hasonló javulást kell hogy tapasztaljunk.