WordPress cache plugin – sebesség optimalizálás – példa

Készítettünk egy példa konfigurációt wordpress oldalakhoz két cache plugin használatával. Ezek a WP Super Cache és az Autoptimize.

Szeretnénk, ha minden Ügyfelünk tisztán látná, ezek használata nem helyettesíti egy messzemenőkig igényesen elkészített weboldalban lévő munkaórákat. Céljuk az, hogy egy átlagos méretű és összetettségű sablonnal és átlagos kép illetve szöveg mennyiséggel bíró wordpress oldal megjelenése gördülékenyebb legyen.

A két bővítményt a Bővítmények vagy angol nyelv használata esetén a Plugins menüben tudjuk megkeresni, telepíteni és bekapcsolni.

Kezdjük a WP Super Cache beállításaival.

WP Super Cache Settings / Easy / Caching On
vagyis bekapcsoljuk a cache használatát

WP Super Cache / Advanced lap beállításai.
Ezek közül talán a legfontosabb a 304 Not Modified browser caching.

A beállítások magyarázata:
Don’t cache pages for known users – aki belépett az oldalunkra, azt ne a cache -elt tartalommal szolgáljuk ki. Ennek a beállításnak azért célszerű bekapcsolva lennie, mert aki megjegyzést vagy választ ír vagy szerkeszti az oldalt, vélhetően szeretné látni azt, hogy a módosításnak van hatása.
Cache HTTP headers with page content – törekszünk arra, hogy minél kevesebb fájlban legyen elérhető a cachelt tartalom.
Cache rebuid. – időnként szükséges az eltárolt tartalmat frissíteni. Leírása szerint a cache -t aközben frissíti, amíg egy látogatót kiszolgál a korábban eltárolt tartalommal.
304 Not Modified browser caching… Azoknál az oldalaknál, aminél lejárati időt adunk meg a .htaccess fájlban (példa a korábbi weboldal sebesség optimalizásról szóló oldalunk)* a böngésző megkérdezheti a webkiszolgálót, hogy ez a fájl módosult-e. Amennyiben nem módosult, akkor nem is szükséges újra letölteni, hiszen már ott van a látogató számítógépén. Új látogatónál, ha az az apache webkiszolgáló is tárolja azokat a fájlokat amik hosszabb ideig tárolhatóak, akkor azt saját memóriájából is kiszolgálhatja, nem szükséges lemez művelet a weboldal fájljának megnyitásához és feldolgozásához.

WP Super Cache / Advanced fül

Magyarázat:
Clear all cache files when a post or page is published or updated. Sok esetben a módosított vagy az új cikkek a főoldalra kerülnek. Azonban, ha a főoldalt cacheből szolgálja ki a wordpress, akkor nem látható a változás. Ennek elkerülésére, ha bármilyen bejegyzés módosul, ürítjük a teljes cache -t, így biztosan a legfrissebb tartalom kerül megjelenésre. Ezt az opciót nem javasoljuk olyan oldalaknál, ahol nagyon gyakori a cikkek vagy kommentek megjelenése. Azoknál az oldalaknál a cache beállítások adott esetben több problémát okozhatnak, mint amennyit megoldanak.
Only refresh current page when comments made. Szükségtelen olyan oldalt újratölteni, ami nem módosult. Ezt az újratöltést akadályozza meg ez a beállítás.

WP Super Cache Settings / Preload

Magyarázat:
Refresh preloaded cache files every 3000 minutes. Az előre elkészített cache fájlokat 50 óránként újratöltjük.
Preload mode. Használjon-e előre elkészített cache fájlokat. Ennek a beállításnak a használatakor a wordpress oldalakat előre legenerálja és statikus fájlként tárolja a webkiszolgálón. Sebességben a /weboldal-sebessegoptimalizalas-wordpress-fooldal/  -ban írtakhoz hasonló időt lehet elérni. Azért csak hasonló, mert itt a php feldolgozó még szerepel a kiszolgálási folyamatban, a korábbi példában azonban az sem.

A WP Super Cache beállításainak ezzel a végére értünk, ezekkel a beállításokkal egy megfelelően elkészített wordpress oldal már kellő sebességgel működhet. Fontos leszögeznünk, a WP Super Cache -t példaként mutattuk be. Az sajnos nem garantálható, hogy minden templatettel és minden pluginnal megfelelően működik együtt, ezért alkalmazása során szükséges meggyőződnünk arról, hogy weboldalunk megfelelően megjelenik-e! Amennyiben nem, a cache törlésével és a WP Super Cache plugin letiltásával vagy eltávolításával visszaállítható az oldal korábbi működése.

Autoptimize

Autoptimize / Main – Optimize HTML, JavaScript, CSS


Az Autoptimize -t a jelenlegi példánkban a WP Super Cache kiegészítéseként használjuk. Rábízzuk a HTML, JavaScript, CSS fájlok optimalizálását, ami nagyjából annyit tesz, hogy ömlesztve tárolja a felsorolt tartalmakat, ezáltal a webböngésző kevesebb számára felesleges szóközt, sortörés karaktert kap, gyorsabban tudja az így kapott adatokat feldolgozni. Ettől azért picit bonyolultabb a működése, de hasznosságának megértéséhez ennyi ismeret már elegendő.

Autoptimize / Extra

Magyarázat:
Remove query strings from static resources. Sok esetben láthatunk olyan css és js fájlt weboldalunk forráskódjában, ami ?ver=xx.yy paraméterekkel rendelkezik. Ez a fajta jelölés hasznos akkor, amikor weboldalunkat fejlesztjük, azonban a működés szempontjából hátrányos is lehet, ugyanis a ? -es paraméterrel rendelkező tartalmakat általában nem tárolja a böngésző cache -ben. Még akkor sem, ha az egyébként egy éve a szerveren található változatlan formában. Ennek megoldására létezik ez az opció, ami a js és css fájlokat paraméter nélküliként mutatja a weboldal megtekintésekor és ettől fogva bekerülhetnek a cache -be, nem szükséges őket újra és újra letölteni.

Ezzel végére értünk a két plugin általunk hasznosnak vélt beállításainak bemutatásához. A beállítások a 2019.02.07 -i plugin verziókban megtalálható menüknek megfelelően készültek.

A WordPress, a WP Super Cache, Autoptimize egyaránt frissülhetnek olyan formában, hogy a megjelölt lehetőségek megszűnnek vagy más néven lesznek elérhetőek. Lehetőség szerint igyekszünk majd leírásunkat frissíteni, azonban az elsődleges célunk a cache beállítások miértjének bemutatása függetlenül attól, hogy ezt melyik pluginban találjuk meg.

*Ha még nem tettük meg, adjunk meg weboldalunk tartalmi elemeihez (szöveg, képek) lejárati időt, ameddig a látogató böngészője gyorsító tárazhatja weboldalunk egyes részeit. Ezeket a sorokat a .htaccess fájlban szükséges szerepeltetnünk.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType image/bmp A31536000
ExpiresByType image/gif A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/png A31536000
ExpiresByType image/tiff A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/x-font-ttf A31536000
</IfModule>