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.