A weboldalak sebesség optimalizálása ma már kötelező, ezzel valószínűleg mindenki egyetért. A folyamatos online jelenlét következtében a felhasználók egyre türelmetlenebbek és egyáltalán nem szeretnek várni. Ha egy oldal vég nélkül csak tölt és várakozik, akkor inkább bezárják és továbblépnek a következő találatra (ezzel pedig a konkurencia malmára hajtjuk a vizet). Aztán ott van még az az ugyancsak fontos tényező is, hogy a keresők bonyolult rangsorolási mechanizmusának az egyik – és egyre lényegesebb – faktora a weboldalak betöltési sebessége. Ugyanúgy, ahogy legalább egy alap ingyenes SSL tanúsítvány is kötelező manapság, fontos az is, hogy optimalizáljuk WordPress weboldalunkat a minél gyorsabb betöltés érdekében.
Ahogyan szinte minden területen, itt is könnyű elveszni a lehetőségek között. A hétköznapi WordPress felhasználó számára rengeteg bővítmény áll rendelkezésre, ezek között pedig nagyon nehéz megtalálni azokat, amelyek tényleg segítenek és hasznosak. Az internet is rengeteg anyagot és cikket tartalmaz a témában és mi is írtunk már sebesség optimalizálásról és a népszerű W3Total Cache beállításáról is. Ahogyan utóbbi cikkünkből is látszik ez a bővítmény pont az összetettsége miatt nem felhasználóbarát. Hozzáértés és megfelelő ismeret nélkül könnyedén okozhatunk vele nagyobb kárt, mint hasznot, hiszen például egy helytelenül beállított JavaScript vagy CSS összevonás/tömörítés következtében teljesen szét is eshet az oldal. A legtöbben fel is adják az első kudarcok után, mert ide sajnos nagyon sok türelem, kitartás és próbálkozás kell, hiszen minden oldal egyedi, így hiába a temérdek beállítási útmutató és cikk, senki nem fogja leírni azt, hogy mi az, amit nekünk éppen végre kell hajtanunk a saját oldalunk pontszámainak és sebességének növelése érdekében.
Mi is az tehát, amit minden felhasználó szeretne? Minél kevesebb beállítást, minél kevesebb kudarcélményt és vég nélküli próbálkozást, egy könnyen kezelhető, átlátható felületet. Egy olyan sebesség optimalizáló bővítményt, ami végigvezeti a felhasználót egy egyszerű varázsló segítségével a legfontosabb beállításokon, aztán teszi a dolgát szépen csendben a háttérben. Ennek eredményeképpen pedig az oldal szárnyra kap, a betöltési idő jelentősen csökken, a GTMetrix/PageSpeed pontszámok pedig a magasba emelkednek. Túl szépen hangzik, hogy igaz legyen? Nos, ez a valóság, ráadásul magyar vonatkozásban, ugyanis két hazai fejlesztő észrevette ezt a piaci rést és megalkották a Swift Performance névre hallgató kis bővítményt, ami valóban a felhasználó keze alá dolgozik. Jómagam már korábban is csak pozitív véleményeket olvastam róla, most azonban lehetőséget is kaptam élesben tesztelni, mégpedig itt, a WPSzaki.hu motorházteteje alatt. Elöljáróban csak annyit mondanék el, hogy végleg leváltottam a hosszú évek alatt finomhangolt W3Total Cache-t, és nem bántam meg. A tapasztalataimat és beállítási útmutatómat lentebb olvashatod.
A fejlesztők neve talán nem lesz ismeretlen, ugyanis Molnár Péter és Rigó Roland a szülőatyja a méltán népszerű Fevr WordPress sablonnak is, ezt itthon és külföldön is rengetegen használják teljes megelégedéssel. Elmondható tehát, hogy nem ma kezdték a programozást és ez a munkáikon is látszik.
Az alapok bemutatása
A bővítmény egyik legnagyobb újítása az úgynevezett kritikus CSS generálása, ez a funkció egyetlen konkurens sebesség optimalizáló pluginben sem található meg. A “Critical CSS” lényege az, hogy a plugin összeolvasztja az összes CSS-t ami az oldalon található, ezután végigmegy rajtuk, és kiválogatja azokat a CSS szabályokat, amik valóban megtalálhatóak az oldalon. Ebből lesz a “Critical CSS”, ami gyakorlatilag ahhoz kell, hogy a böngészőben megjelenjen az oldal. Mivel a sablonok/pluginek CSS fájljai sokszor olyan CSS szabályokat is tartalmaznak amiket az adott oldalon nem használ a böngésző, a renderelésig ezeket felesleges betölteni.
A Swift Performance legfontosabb funkciói a következők:
- Teljes körű automatikus gyorsítótárazás
- JavaScript/CSS kombinálása, és tömörítése
- HTML tömörítése
- Képek optimalizálása
- Böngésző gyorsítótár beállítása
- Gzip tömörítés beállítása
- Szerver válaszidejének csökkentése
- A megjelenítést gátló elemek kizárása a hajtás feletti (above the fold) tartalomban
- Külső forrásból betöltött elemek (például JS&CSS) klónozása és helyi optimalizálása (például lejárati idők)
- Képek szükség szerinti betöltése (lazy load)
- CDN támogatás
A fentiek már ismerősek lehetnek, hiszen szinte minden sebesség optimalizáló bővítmény velük operál. A különbség csak ott ütközik ki, hogy ezeket milyen hatékonysággal és korlátozásokkal integrálták. A W3Total Cache ingyenes verziója például nem ad lehetőséget a hajtás feletti tartalomban lévő gátló elemek kizárására, ez pedig a PageSpeed Insights pontszámok egyik lényeges faktora. Enélkül a 100/100-as érték elérése sem lehetséges. Aztán az sem mindegy, hogy az automatikus JavaScript/CSS összevonás és tömörítés mennyire megbízhatóan működik, hiszen az átlag felhasználó nem fogja egyesével hozzáadogatni a fájlokat és kikeresni, hogy melyik az, amelyiket kivételként kell kezelni ahhoz, hogy ne essen szét az oldal. Ideális esetben ezt megoldja a bővítmény.
A Swift Performance telepítése után rögtön a beállítás varázsló átlátható felülete fogad minket. A plugin ugyan még angol nyelven kommunikál, de már készül a hivatalos magyar fordítás is. Amíg ez meg nem jelenik addig a lentebb található beállítási útmutató lehet az angolul nem tudó olvasók segítségére.
A “Start Wizard” megnyomása után első lépésként a vásárláskor kapott egyedi kulcsunkat kell bemásolnunk, ezután jöhet az oldal elemzése. Még a folyamat megkezdése előtt kapunk egy aktuális PageSpeed pontszámot, ezt a varázsló futtatásának végén újra lekéri a bővítmény, így majd rögtön látni is fogjuk, hogy mennyit sikerült javítani a korábbi eredményen.
Ideális esetben négy zöld pipát fogunk látni. Az első az esetleges bővítmény ütközéseket figyeli (van-e másik optimalizáló plugin telepítve), a második a szükséges Apache modulok meglétét ellenőrzi, a harmadik pedig akkor jelenik meg, ha a .htaccess fájlunk írható. A fenti kép esetében ez felkiáltójeles, mert az iThemes Security Segítségével tiltottam a teszt oldalon ennek a módosítását. Az utolsó zöld pipa érvényes vásárlási kulcs megadása esetén látszik, nálam azért felkiáltójeles, mert a képek készítésekor a teszt oldalhoz nem adtam meg érvényes kulcsot.
Jöhet a gyorsítótárazás “beállítása”. Alapesetben ezekhez hozzá sem kell nyúlni, hiszen legtöbbször tökéletesen megfelelő a “Time based mode”. Csak akkor lehet szükség az “Intelligent mode” kiválasztására, ha az oldalaink tartalma nagyon sűrűn változik. A kis kockákat is hagyjuk kipipálva, az első a gyorsítótár automatikus felépítését engedélyezi, a második a böngésző gyorsítótárazását kapcsolja be, a harmadik pedig a Gzip tömörítést engedélyezi. Ezek fontosak és szükségesek is a sikeres optimalizáláshoz.
Jöhet a statikus tartalmak konfigurálása. A “Cache only” opció csak az oldalaink/bejegyzéseink gyorsítótárazását engedélyezi, a “Minimal optimization” ezen túl még a statikus tartalmakat is optimalizálja. A legjobb eredmény elérése érdekében válasszuk a “Full optimization” lehetőséget. A “Bypass CSS Import” tesz róla, hogy az importált CSS fájlokat is tartalmazza az összevonás, a “Merge Assets in Background” bekapcsolása esetén pedig a háttérben végzi el az összevonást, enélkül irreálisan magas lehet az első betöltési idő engedélyezett Critical CSS esetén, ez pedig nem ideális. Ilyenkor addig, amíg nincs felépített cache, az oldal eredeti, optimalizálatlan weboldalát szolgálja ki a szerver a látogatóknak. A “Limit Simultaneous Threads” opciót akkor engedélyezzük, ha osztott tárhelyen vagyunk és 508-as hibákat kapunk túl sok egyidejű folyamatszál futása esetén.
A képek beállításai következnek. Az “Enable LazyLoad” lehetővé teszi, hogy az oldalon található képek csak akkor kerüljenek betöltésre, amikor a felhasználó valóban megtekinti őket (például oda görget). Az “Optimize images on upload” pedig arra szolgál, hogy feltöltéskör automatikusan újra legyenek tömörítve a képek, ezáltal csökkentve a méretüket látható minőségromlás nélkül. Sok ingyenes kép optimalizáló bővítménytől eltérően ez a szolgáltatás korlátlan mind fájlméretben, mind a képek számában, sőt, akár a teljes média tárat is újra tudjuk tömöríttetni a Swift Performance-al.
Ha idáig eljutottunk, akkor lényegében készen is vagyunk, megnézhetjük a friss pontszámainkat és a biztonság kedvéért ellenőrizzük az oldal működését is. Aki pedig nem elégedett az automatikus optimalizálás eredményével az kattintson a “Swift Performance Settings” gombra és manuálisan szabja testre a bővítmény mélyebben megbúvó beállításait. Lentebb igyekeztem összeszedni a sikeres optimalizáláshoz elengedhetetlen opciókat, legalább is én a következők engedélyezésével értem el a legnagyobb pontszámot (erről bővebben a cikk végén).
General fül:
Normalize Static Resources: Engedélyezése igen hasznos, eltávolítja a JavaScript/CSS fájlok és egyes képek végéről a verzió számozást (A GTMetrix esetén ez is pontozási faktor).
Use Compute API: Segítségével felgyorsul az összevonási folyamat és csökken a processzor használat a szerveren. Engedélyezése erősen ajánlott.
Prefetch DNS: Előtölti a DNS-t. Kapcsoljuk be.
Collect domains from scripts: Összegyűjti a szkriptek domainjeit a DNS előtöltéshez. Ez is legyen engedélyezve.
Images fül:
Optimize Images: A feltöltött képeink automatikus optimalizálása (kisebb fájlméret -> gyorsabb oldalbetöltés). A médiatárba korábban feltöltött képek is optimalizálhatók a “Média / Image Optimizer” alatt.
Inline Small Images: A kis méretű képek base64-ben tárolva kódrészletként kerülnek beillesztésre valódi képek betöltése helyett.
Lazy Load: Képek betöltése csak szükség esetén (például ha oda görget a látogató).
Inline Lazy Load Images: Base64 kódolt beágyazott képek használata a LazyLoad-hoz.
Asset Manager fül:
Merge Scripts: A JavaScript fájlok kombinálása a HTML lekérések számának csökkentése végett.
Minify JavaScripts: A JavaScript fájlok tömörítésének engedélyezése.
Proxy 3rd Party Assets: Külső hivatkozásból betöltött JavaScript és CSS fájlok (például Google Analytics) klónozása
Merge Styles: A CSS fájlok kombinálása egy fájlba a HTML lekérések számának csökkentése végett.
Generate Critical CSS: Kritikus CSS generálása. A bővítmény egyik alapköve.
Remove Keyframes: CSS animációk eltávolítása a kritikus CSS-ből.
Print Critical CSS Inline: Bekapcsolása esetén a kritikus CSS a fejrészbe kerül egy külön CSS fájl létrehozása helyett.
Print Full CSS Inline: Az összevont CSS a lábrészbe kerül egy külön CSS fájl helyett.
Minify CSS: A CSS fájlok tömörítésének engedélyezése.
Merge Assets In the Background: A háttérben történik az elemek összevonása.
Minify HTML: A HTML kód tömörítése.
Caching fül:
Enable Caching: Itt kapcsoljuk be az oldalak/bejegyzések gyorsítótárazását.
Caching mode: A leggyorsabb kiszolgálás érdekében válasszuk a “Disk Cache with Rewrites” opciót. Ha valamilyen oknál fogva nem írható a .htaccess, akkor másodlagos opcióként még mindig használhatjuk a “Disk Cache with PHP” lehetőséget, bár ez kicsit lassabb. Ha a szerveren elérhető és engedélyezve van a memcached PHP kiegészítő, akkor rendelkezésünkre áll a “Memcached with PHP” mód is, ahol a memóriából szolgálja ki a rendszer a gyorsítótárazott lekéréseket.
Cache Expiry Mode: Time based mode. A legtöbb oldalhoz ez a megfelelő beállítás, kivéve gyakran változó tartalmak esetén.
Prebuild Cache Automatically: Ürítés esetén automatikusan újraépíti a rendszer a gyorsítótárat.
Enable Browser Cache: A böngésző gyorsítótárazás engedélyezése. Mindenképp kapcsoljuk be.
Enable Gzip: A Gzip tömörítés engedélyezése. Szintén kötelező.
Cache 404 Pages: A 404-es hibaoldalakat is gyorsítótárazza a plugin, ha ezt engedélyezzük.
CDN fül:
Ha rendelkezünk bármilyen “pull” CDN előfizetéssel, akkor itt tudjuk ezt részletesen konfigurálni. MaxCDN előfizetés esetén a gyorsítótárat is tudjuk üríteni.
Konklúzió
A saját tapasztalataim a Swift Performance-al több, mint meggyőzőek. A fentiek engedélyezése után a WPSzaki.hu sikeresen elérte a 95+-os pontszámot mind a Google PageSpeed Insights, mind a GTMetrix tesztekben a korábbi 60 körüli pontszámok helyett, mindezt bárminemű strukturális változtatás és a meglévő bővítmények kikapcsolása nélkül. A JavaScript és CSS összevonás miatt kérések száma is jelentősen csökkent, csak úgy, mint az oldal mérete és természetesen a betöltési idő is. Úgy gondolom ez igen szép eredmény, tekintve, hogy a folyamat lényegi része teljesen automatikus és nem szükséges a felhasználó manuális beavatkozása. A 100/100-as pontszám elérése sem lenne lehetetlen pár apróbb módosítással, de per pillanat tökéletesen elégedett vagyok a jelenlegi eredménnyel. A beépített képtömörítő is megfelelő hatékonysággal dolgozik és igen örvendetes, hogy minden szempontból korlátlan. Hibát a tesztelés alatt egyszer sem tapasztaltam, minden gond nélkül működött. Ha valaki egy igazán megbízható, hatékony és nem utolsó sorban felhasználóbarát sebesség optimalizáló bővítményt keres, akkor a Swift Performance a tökéletes választás.
Természetesen nem lenne értelme a bemutatónak anélkül, hogy össze ne hasonlítanánk a Swift Performance tudását a többi népszerű optimalizáló bővítménnyel, szerencsére ezt megtették helyettem a készítők, így elegendő csak ide kattintani a megtekintéshez: [link]
Az egy weboldalra vonatkozó licensz megvásárlása mellé jár 12 hónap fejlesztői támogatás, korlátlan frissítés, valamint korlátlan Compute API és Image Optimizer API használat. Mivel a fejlesztők is tisztában vannak a bővítmény hatékonyságával, ezért 14 nap pénzvisszafizetési garanciát is biztosítanak minden vásárlás mellé!
Egyedülálló ajánlat keretében a WPSzaki.hu olvasóinak létrehoztunk egy 25%-os kedvezményre jogosító kupont, amelyet a vásárláskor lehet megadni. A használatához mindössze be kell írni a “wpszaki” szót a “Coupon Code” mezőbe, majd az “Apply Coupon” gombbal engedélyezni.
A kedvezmény érvényesítéséhez szükséges teendők:
1: Kattints IDE vagy a lenti képre, ami elvezet a Swift Performance főoldalára.
2: Pricing menüpont felül, majd a kívánt csomag kosárba helyezése a “Purchase” gomb megnyomásával.
3: A személyes adatok kitöltése után a “Coupon Code” mezőbe írd be, hogy “wpszaki”, majd ezt az “Apply” gombbal érvényesítheted.
4: Fogadd el a felhasználási feltételeket, majd fizess bankkártyával vagy PayPal-en keresztül.
