A sebesség optimalizálással foglalkozó cikkemben említettem, hogy az egyik legjobb eszköz a WordPress oldalunk felgyorsítására a W3 Total Cache bővítmény, sokakat azonban eltántoríthat a temérdek menüpont és beállítási lehetőség. Való igaz, hogy könnyű elveszni a felhasználói felület nyújtotta opciókban és az is tény, hogy jelen esetben sem elegendő csak feltenni és aktiválni a plugint. Láttam példát arra is, hogy néhány felhasználó túlontúl optimista módon bekapcsolt minden beépített funkciót, ennek hatására pedig az oldal még lassabb lett, mint korábban (a megjelenő hibaüzenetekről és a szétesett kinézetről nem is beszélve), így hát érdemes egy kicsit részletesebben megismerkedni a W3 Total Cache által nyújtott lehetőségekkel, hogy velünk ne történhessen meg ugyanez.
A folytatás előtt azért meg kell említenem, hogy a W3 Total Cache nem csodaszer és nem is pótolhatatlan, mindössze egy nagyon jól összerakott bővítmény, ami éppenséggel pont tudja a weboldalunk felgyorsításához szükséges összes elengedhetetlen funkciót, ezért is szeretjük annyira. Egyes szolgáltatók saját megoldásokat használnak a szerver oldali gyorsítótárazásra, ezért előfordulhat, hogy a W3TC használatát és telepítését nem is engedélyezik (így tesz például a WordPress oldalak hosztolására szakosodott WPEngine is). Ilyen esetben nem marad más választásunk, mint kézzel végrehajtani a szükséges lépéseket vagy opcionálisan más (engedélyezett) bővítményeket használni. Szerencsére a böngésző gyorsítótár, a gzip tömörítés és a keepalive engedélyezése is végrehajtható egyszerű .htaccess módosítással, a page cache valamint JS/CSS tömörítés/kombinálás beállításához pedig számos egyéb bővítmény áll a rendelkezésünkre.
A cikk végére érve a következő W3 Total Cache funkciókat fogjuk részletesebben megismerni:
- Page cache (azaz statikus HTML tartalom generálása oldalainkból/bejegyzéseinkből)
- Minify (avagy a HTML, Javascript, CSS tömörítése és kombinálása)
- Database cache (adatbázis gyorsítótárazás)
- Object cache (objektumok gyorsítótárazása)
- Browser cache (azaz a böngésző gyorsítótárazására vonatkozó beállítások)
- CDN (a legnépszerűbb CDN szolgáltatókkal való integráció beállítása)
- Egyéb alapvető beállítások
Aktiválás után a “Performance” fül alatt találjuk az imént felsorolt lehetőségek beállítási paneljeit, azonban az első lépésünk mindig a “General Settings” szekció legyen, hiszen mindenek előtt engedélyeznünk kell a használni kívánt szolgáltatásokat.
Legfelül találjuk a “Preview mode” bekapcsolására szolgáló “Enable” gombot, ezt érdemes használnunk is. Segítségével kipróbálhatjuk és letesztelhetjük a szolgáltatásokat anélkül, hogy az éles oldalunk működését megzavarnánk. Természetesen ne felejtsük el kikapcsolni a beállítások és tesztelések végén.
Alatta találjuk a “Page cache” panelt, ez az, amit mindenképpen érdemes bekapcsolnunk. Osztott tárhelyek esetén szinte minden esetben meg is felel az alapértelmezett “Disk: Enhanced” beállítás, ez a lemezre menti az automatikusan generálódó statikus tartalmakat. Ha ez valamilyen oknál fogva mégsem működne vagy anomáliákat tapasztalnánk az aktiválása után, akkor érdemes kipróbálni a “Disk: Basic” opciót is, ez teljesítményben elmarad az “Enhanced”-től, viszont kompatibilisebb. Tapasztalataim szerint azonban ritkán akad gond az alapértelmezett beállítással. Amennyiben dedikált szerverrel vagy VPS-el rendelkezünk úgy ésszerűbb az “Opcode” részlegből választani (APC, eAccelerator, XCache, WinCache). A szerver konfigurációjától függően érhetőek el ezek a lehetőségek, viszont ha minden opció szürke, akkor hiányoznak ezek a csomagok a szerverünk operációs rendszeréből, de szerencsére telepíteni sem bonyolult őket, ha rendelkezünk root hozzáféréssel.
Következik a “Minify” rész, természetesen erre is szükségünk van. Az oldalunk sebességét felmérő tesztekben (mint amilyen a Google PageSpeed vagy GTMetrix) ennek az aktiválásával érhetjük el a legtöbb plusz pontot, hiszen ebben az esetben kombinálódik és tömörítődik az összes használatában lévő Javascript és CSS fájl, ennek hatására csökken a betöltendő elemek száma és mérete is. Bekapcsolása után érdemes tenni egy próbát az “Auto” módban, ebben az esetben a bővítmény önmaga próbálja elvégezni a feladatot, sajnos azonban sok esetben ez nem sikerül neki, ilyenkor pedig azt fogjuk tapasztalni, hogy az oldal szétesik, egyes funkciók nem működnek, vagy éppen csak a HTML váz jelenik meg a CSS szabályok nélkül. Ha ezeket tapasztaljuk, akkor szinte biztos, hogy a minify a ludas. Hasznos lehet még a felmerülő problémák feltárásában, ha a W3 Total Cache funkciók bekapcsolása előtt és után is nyitunk egy fejlesztői konzolt és megnézzük, hogy milyen hibaüzenetek jelennek meg az oldal betöltése esetén. Firefox böngésző használatakor a FireBug kiegészítőt ajánlom. Általánosságban elmondható, hogy ha a minify auto nem működik, akkor át kell váltanunk kézi, azaz manual módba, ilyenkor sajnos a dolgunk is több lesz, mert egyesével kell hozzáadogatni a kívánt Javascript/CSS fájlokat és szépen tesztelgetni, hogy milyen sorrend lesz az ideális. Az is előfordulhat, hogy csak akkor fog rendesen működni az oldalunk, ha 1-2 fájlt kihagyunk. Erre nincsen globális szabály, minden oldal és minden környezet egyéni tesztelést és próbálgatást kíván. A “Minify cache method” is hasonlóan működik, mint a page cache, osztott tárhely esetén a “Disk” az egyedüli kiválasztható lehetőség (azaz lokálisan, a saját tárhelyünk fájlrendszerébe kerülnek a gyorsítótárazott elemek), míg VPS vagy dedikált szerver esetén ismét választhatunk az APC, eAccelerator, XCache vagy WinCache közül (amennyiben elérhetőek). A HTML/JS/CSS minifier lenyílókat érdemes az alapértelmezett értéken (default) hagyni, szinte minden esetben ezek lesznek az ideális beállítások.
A “Database cache” az adatbázis műveleteket gyorsítja fel, használata főként akkor ajánlott, ha az “Object Cache” nem elérhető. A method lenyílónál a már jól ismert beállításokkal találjuk szembe magunkat, a tárhelyünktől és szerverünktől függően válasszuk a legideálisabb opciót. A tapasztalatom az, hogy a “Database cache” bekapcsolása szinte minden esetben ajánlott, míg az “Object Cache” sokszor nem okoz drasztikus sebességnövekedést (sőt, találkoztam olyan oldallal is, ahol az aktiválása után még csökkent is a betöltési sebesség).
Alatta hasonló módon engedélyezhetjük az “Object Cache” szekciót, értelme főként akkor van, ha az oldal aktívan támaszkodik az Object Cache API-ra.
A “Browser Cache” mellett mindenképp pipáljuk ki az “Enable” részt, ez nagyon fontos és szinte biztos, hogy gondot sem fog okozni.
Alatta található a CDN panel, ha rendelkezünk fizetős CDN szolgáltatással, akkor itt tudjuk majd konfigurálni. Nem kell megijedni, ha nem látjuk a listában az ingyenes Cloudflare-t, ugyanis ez egy beépülő modul engedélyezése után jelenik csak meg egy saját panellel. A W3 Total Cache nagyon jól kooperál a legismertebb CDN szolgáltatókkal, tehát rendben leszünk akár Amazon, akár Azure vagy ha Rackspace fiókunk van is. Népszerű opció még a MaxCDN is. A CDN részt értelemszerűen csak akkor kell engedélyeznünk, ha rendelkezünk ilyen szolgáltatással, ellenkező esetben felesleges bepipálni (azonban ha tényleg szeretnénk sebességnövekedést elérni, akkor erősen ajánlott legalább egy ingyenes Cloudflare integrálása).
A “Reverse proxy” engedélyezése csak akkor szükséges, ha rendelkezünk ilyesmivel. Ha osztott tárhelyen vagyunk vagy ha a “Varnish” mint kifejezés nem ismerős, akkor szinte biztos, hogy ezt nem kell bepipálnunk. Ha mégis szeretnénk megismerkedni ezzel az amúgy igen hasznos lehetőséggel, akkor itt egy részletes leírás, amely segítségével könnyedén konfigurálhatunk dedikált szerverünkön egy Varnish gyorsítótárat: [link]
A monitoring rész alatt található “New Relic” egy komplett külső erőforrás monitorozó rendszer, a W3 Total Cache ezt is szépen integrálja, ha szükségünk van rá. Osztott tárhelyen sajnos ez sem működik és szükséges hozzá egy felhasználói fiók regisztrációja is.
A “Licensing” panelbe másolhatjuk be a termékkulcsunkat amennyiben megvásároltuk a “Pro” verziót”, azonban véleményem szerint az ingyenesen elérhető kiadás is tartalmazza mindazt, amire szükségünk lesz.
A “Miscellaneous” szekcióban sokaknak érdekes lehet még a Google PageSpeed integráció bekapcsolása, ehhez egy API kulcsot kell igényelnünk a Google API Konzolból, majd ezt bemásolva meg is jelennek az aktuális PageSpeed eredmények a vezérlőpulton. A “Verify rewrite rules”-t hagyjuk bekapcsolva az “Enable file locking” pedig jobb, ha kikapcsolva marad. Az “Optimize disk enhanced page and minify disk caching for NFS” bekapcsolható abban az esetben, ha a szerveren NFS fájlrendszer található, ilyenkor gyorsul a page cache és a minify is. Ha nem vagyunk biztosak a dologban, akkor hagyjuk inkább kikapcsolva.
A “Debug” szekció hibakeresésre és az aktuális gyorsítótárazási információk megjelenítésére szolgál, csak abban az esetben engedélyezzük, ha ezekre tényleg kíváncsiak is vagyunk, ugyanis ilyenkor csökken a W3TC teljesítménye, ezáltal az oldalunk is lassabb lehet. Ha bepipáltunk valamit, akkor az oldal forráskódjában keressük a HTML kommenteket (legalul). Ezek publikusan hozzáférhetők, tehát bárki könnyedén megtalálhatja őket, ennek okán érdemes rögtön kikapcsolni, ha végeztünk.
Az oldal alján már csak az import/export és a reset gombjai találhatók, ezekkel értelemszerűen elmenthetjük az aktuális konfigurációt vagy éppen visszaállíthatunk egy korábban exportált mentést. A “Restore default settings” mindent alaphelyzetbe állít, ez akkor hasznos, ha túlzásba vittük a beállítások módosítását és már magunk se tudjuk, hogy melyik paraméter melyik opciója a felelős a hibás vagy éppen nem túl optimális működésért.
Most, hogy a “General Settings” szekció végére értünk már tudjuk, hogy melyik beállítás mire is szolgál és aktiváltuk legalább a page cache, minify, database cache és a browser cache funkciót. Ezután kicsit részletesebben is megismerkedünk ezekkel, hiszen lehetőségünk van mindent jó alaposan testreszabni.
Page Cache
Navigáljunk a “Performance/Page cache” menüpontra.
Cache front page: Pipáljuk be, szinte minden esetben a főoldalunk a leglátogatottabb, ezért szeretnénk gyorsítótárazni
Cache feeds: site, categories, tags, comments: Szintén engedélyezzük az RSS csatorna gyorsítótárazásához
Cache SSL (https) requests: Ha rendelkezünk SSL tanúsítvánnyal és az oldalunk elérhető https alól is, akkor engedélyezhetjük ezt az opciót
Cache URIs with query string variables: Ha a kis négyzet nem szürke, akkor bekapcsolhatjuk a találati listák gyorsítótárazásához
Cache 404 (not found) pages: Engedélyezésével a 404-es oldalaink is gyorsítótárazva lesznek, ilyen esetben azonban 200-as (oldal létezik) HTTP választ küld a szerver egy ilyen lekérésre, ez pedig nem éppen ideális ebben az esetben, tehát ajánlott kikapcsolva hagyni
Cache requests only for oldalad.hu site address: Csak azokat a lekéréseket gyorsítótárazza amelyek a beállításokban megadott domainre érkeznek. Alapértelmezetten nem szoktuk engedélyezni
Don’t cache pages for logged in users: Mindenképpen hagyjuk bekapcsolva az optimális működéshez. A bejelentkezett felhasználók nem a gyorsítótárazott tartalmat látják ellentétben a látogatókkal, akik pedig a bejelentkezett felhasználó által látott legutolsó állapotot fogják megtekinteni.
Don’t cache pages for following user roles: Ha szeretnénk, akkor ennek az engedélyezésével megadhatjuk, hogy egyes jogosultsági szintekbe tartozó felhasználók számára ne legyen aktív az oldalak gyorsítótárazása
Automatically prime the page cache: Szeretnénk, hogy automatikusan frissüljön a gyorsítótár, tehát ezt hagyjuk bekapcsolva, az alapértelmezett értékeket pedig érdemes érintetlenül hagyni
Purge Policy: Page cache: Az itt bejelölt elemeket automatikusan törli a gyorsítótárból a rendszer, ha új tartalmat hozunk létre vagy módosítunk. Érdemes érintetlenül hagyni.
Advanced: Az itt található beállításokhoz csak ritkán kell nyúlnunk, talán a “Compatibility mode” lehet csak érdekes. Engedélyezése esetén kb. 20%-al csökken a teljesítmény, cserébe fokozott kompatibilitást kapunk. Érdemes engedélyezni, ha valami nem úgy működik, ahogy kellene. A “Never cache the following pages” is hasznos, itt megadhatjuk, hogy mely oldalakat ne gyorsítótárazza a rendszer.
Minify
Rewrite URL structure: A betöltött JS és CSS fájlok URL-jének formátumáért felelős ez a beállítás, ha nincs rá okunk, akkor ne kapcsoljuk ki, legtöbbször megfelelő az alapértelmezett beállítás.
Disable minify for logged in users: Bekapcsolása esetén a bejelentkezett felhasználók számára kikapcsolja a minify-t. Alapértelmezetten nincs engedélyezve.
Minify error notification: Kiválaszthatjuk, hogy milyen formában szeretnénk értesülni a tömörítéssel kapcsolatos hibákról (admin felhasználó értesítése, e-mail vagy a kettő együtt).
HTML minify settings: Engedélyezzük a HTML tartalom tömörítéséhez. A CSS és JS rublika elé is tegyünk egy pipát az engedélyezés után.
JS minify settings: Itt tudjuk bekapcsolni a Javascript tömörítést és összevonást. Amennyiben automatikus módban vagyunk, úgy kiválaszthatjuk, hogy tömörítsen és kombináljon vagy csak vonja össze a Javascript fájlokat. Megadhatjuk még a betöltés típusát is. Ajánlott egy “non-blocking” módot választani. Kézi mód esetén egyesével kell hozzáadnunk a kívánt JS fájlokat az “Add a script” gomb segítségével. Ilyenkor megadhatjuk azt is, hogy hogy viselkedjen a plugin az egyes szekciókban található fájlokkal (</head>, </body>, <body>).
CSS minify settings: Automatikus mód esetén csak bekapcsolni tudjuk a funkciót, kézi módban pedig ismételten nekünk kell egyesével hozzáadni a tömöríteni/kombinálni kívánt CSS fájlokat.
Advanced: Itt szintén van néhány hasznos szekció, mégpedig a “Never minify the following pages”, melynél megadhatjuk, hogy mely oldalakat szeretnénk kizárni, a “Never minify the following JS files” szintén ugyanerre szolgál, csak itt Javascript fájlokat tudunk megadni, a CSS fájlokra vonatkozó rész pedig a “Never minify the following CSS files” mellett található.
Database Cache
Don’t cache queries for logged in users: Hagyjuk bekapcsolva, így a belépett felhasználók adatbázis lekéréseit nem gyorsítótárazza a rendszer.
Az “Advanced” szekcióban található részek közül az “Ignored query stems” panel az, amihez néha hozzá kell nyúlni, például WooCommerce bővítmény esetén ide kell beilleszteni a “_wc_session_” kifejezést a webshop megfelelő működéséhez.
Object Cache
Nem nagyon találkoztam még olyan esettel, amikor ezekhez a beállításokhoz hozzá kellett volna nyúlni, főként a gyorsítótár ürítésére vonatkozó paraméterek találhatók itt.
Browser Cache
Az alapértelmezett beállítások szinte tökéletesek, mindössze a következőket kell még engedélyeznünk (mind a “General”, a “CSS & JS”, a “HTML & XML” és a “Media & Other Files” alatt is):
- Set expires header
- Set cache control header
- Set entity tag (eTag)
- Set W3 Total Cache header
Ha nem lenne bekapcsolva, akkor tegyünk egy pipát az “Enable HTTP (gzip) compression” elé is.
CDN + Cloudflare
Itt a “General Settings” panelben kiválasztott prémium CDN szolgáltató beállításait találjuk, sok esetben azonban a Cloudflare-t szeretnénk használni, ennek integrálásához navigáljunk az “Extensions” panelre és kapcsoljuk be a Cloudflare modult. Ezután egy új panel jelenik meg a “General Settings” rész alatt, ahol immáron könnyedén tudjuk paraméterezni a Cloudflare CDN-t is. Az engedélyezése után meg kell adnunk a fiókunkhoz tartozó e-mail címet, az API kulcsot és a domainünket is. Érdemes a “Security level”-t közepes értéken, azaz mediumon hagyni, a “Rocket Loader”, a “Minifcation” és a “Development mode” pedig legyen kikapcsolva. Az előbbi kettőt a W3TC intézi, az utóbbi pedig akkor hasznos, ha épp fejlesztjük az oldalt és nem szeretnénk, ha a Cloudflare szervereiről töltődnének be a fájlok, amiket épp módosítottunk lokálisan.
“Oké, oké, értem, ez mind szép és jó, de nekem nincs időm erre és nem akarok kísérletezni. Nincs valami gyorstalpaló kezdőknek az ideális beállításokról?” De igen, olvass lentebb!
Ezek a beállítások osztott tárhely esetén ideálisak és csakis abban az esetben, ha még nem nyúltál bele a W3 Total Cache lelki világába. Ha így történt, akkor állítsd alaphelyzetbe a konfigurációt a lentiek végrehajtása előtt.
“General Settings” fül:
- Page Cache engedélyezése (Disk Enhanced módban)
- Minify engedélyezése auto módban (Disk)
- Database Cache engedélyezése (Disk)
- Browser Cache engedélyezése
Page Cache beállításainál: “Cache feeds: site, categories, tags, comments” engedélyezése
Minify beállításainál: HTML szekció alatt Inline CSS és JS minification engedélyezése, JS és CSS minify engedélyezése
Browser Cache beállításainál: Set expires header, Set cache control header, Set entity tag (eTag), Set W3 Total Cache header legyen bepipálva mindenütt, ahol csak látod ezeket az opciókat az oldalon belül
Extensions fül: A Cloudflare CDN modul aktiválása
Ezután vissza a “General Settings” fülre, keresd meg az újonnan megjelent Cloudflare panelt, engedélyezd és add meg a szükséges adatokat. Természetesen ehhez szükséges legalább egy ingyenes Cloudflare fiók.
A fentiek után nyisd meg a weblapod főoldalát egy új lapfülön és ha szerencséd van, akkor nem tapasztalsz majd semmi anomáliát. Ha szétesik a design, akkor próbaképpen kapcsold ki a CSS tömörítést/kombinálást, ürítsd page cache-et, majd tölts újra. Ha a probléma megszűnt, akkor az auto mód nem tudja megfelelően megoldani a fájlok tömörítését/összevonását, tehát valószínűleg kézzel kell végrehajtanod ezt a lépést. Ha ez túl nagy falat lenne, akkor hagyhatod kikapcsolva is a CSS tömörítést, már enélkül is érezhető lesz a javulás. A másik gyakori probléma a minify bekapcsolása után a Javascript funkciók hibás működése (például a slider nem váltogatja a képeket). Ilyenkor érdemes nyitni egy fejlesztői konzolt és megnézni a hibaüzeneteket. Szinte biztos, hogy lesznek. Ilyenkor első körben inaktiváld a JS tömörítést/kombinálást, ürítsd page cache-et és nézd meg megoldódott-e a gond. Amennyiben igen, úgy itt is a kézi módszert kell választanod.
Sok türelem és kitartás szükségeltetik a bővítmény tökéletes beállításához, de úgy gondolom megéri. A Google rangsorolási rendszerében igen előkelő helyen áll a weboldalak betöltési ideje, tehát nem elég a releváns és megfelelő mennyiségű tartalom, az is fontos, hogy ezeket milyen gyorsan tudják elérni a látogatóink.
