WordPress oldal gyorsítása és képek optimalizálása

A héten mutattunk már egy remek WordPress sablont, amellyel viszonylag egyszerűen és teljesen testreszabható felépítéssel hozhatunk létre WordPress alapú honlapokat. Azonban egy weboldal készítése nem fejeződik be akkor, amikor már véglegesnek gondoljuk az oldalak felépítését, elintéztük a szövegek SEO optimalizálását és úgy tűnik, minden a helyére került. Már csak azért sem, mert idén a Google erősen nézi a honlapok letöltési sebességét, nem csak az asztali böngészőkben, hanem a mobil eszközökön is. Vagyis a Google keresési találatai között könnyen hátra csúszhatunk, ha túl lassú az oldal ahhoz, hogy kivárják a látogatók a letöltéseket. Márpedig egy WordPress oldal alapból – bármennyire is szeretjük ezt a platformot – azt kell mondjuk, nem éppen a sebesség bajnoka, különösen, ha a tartalmak létrehozásakor nem szentelünk figyelmet az optimalizálásnak. Éppen ezért ma mutatunk két szinte nélkülözhetetlen plug-int, amelyekkel megoldható egy WordPress oldal gyorsítása.

 

WordPress oldal gyorsítása: cache és adatbázis optimalizálás

Egy weboldal sebességének elsődleges meghatározója leginkább a szerver, amelyen helyet kapott. Az osztott tárhelyek sebességét seregnyi dolog, többek között a rajtuk lévő egyéb weblapok terheltsége is befolyásolja, de egy VPS esetében sem árt, ha a hardver erősítése mellett egy kis szoftveres trükkhöz is folyamodunk. Ez pedig nem más, mint a cache használat és a kódtömörítés. Ehhez seregnyi plug-int találunk az WordPress gyűjteményében, de ami nekünk a leginkább bevált a tesztek során (és élesben is), az a WP Fastest Cache. E plug-in telepítése és konfigurálása rém egyszerű. Először is letölthető közvetlenül a WordPress plug-in gyűjteményéből, másodszor nagyjából annyi a feladatunk vele, hogy a Settings fülön bejelölünk – majdnem – minden opciót. Mivel ingyenes és prémium változata is van, az előbbiben értelemszerűen csak azokat tudjuk, amelyek fizetés nélkül a rendelkezésünkre állnak.

Ez egyébként alapnak teljesen megteszi, bár kétségtelen, hogy ha megvásároljuk a teljes verziót (domainenként kell megvenni), akkor sokkal jobb eredményt érhetünk el, mind érzésre, mind a Google Page Insight szolgáltatása szerint. A plug-in a cache menedzselésén túl gondoskodik a kódtömörítésről és a különféle modulok betöltési sorrendjének optimalizálásáról is. A nem reszponzív, hanem mobilra külön optimalizált oldalak esetében a mobil változathoz külön cache hozható létre. Meghatározhatunk kivételeket is (például az admin felületet, vásárlási űrlapokat tartalmazó aloldalakat stb.) amelyeket nem gyorsítunk, elkerülve, hogy “ott ragadjanak” esetleg adatok, amelyekkel az átlag felhasználó nem tud mit kezdeni (sokan a frisstés gomb meglétéről sem tudnak a böngészőkben). De beállíthatunk lejárati időt is a cache-ben tárolt adatokhoz, akár aloldalanként is. Emellett manuálisan is törölhetjük a cache-t, egyetlen kattintással.

Amit még nagyon lehet szeretni ebben a plug-inben, az az adatbázis takarítás lehetősége: kisöpörhetjük a posztok felesleges – automatikusan mentődő – változatait és a különféle funkciók által átmenetileg eltárolt adatokat is. Így az adatbázis mérete is drasztikusan csökkenthető. Ráadásul a plug-in tudja optimalizálni az SQL lekérések mennyiségét is.

A CDN támogatás mellett, amelyet talán kevesebben szoktak alkalmazni, van még egy hasznos funkciója a teljes verziónak: a képoptimalizálás. Itt viszont egy kicsit csal a plug-in, ugyanis nem újratömöríti a meglévő JPG és PNG fájlokat, hanem létrehoz belőlük egy webp formátumú variációt. A tárhely csökkentésére tehát alkalmatlan ez a megoldás, sőt, azt inkább növeli, de az kétségtelen, hogy a webp képek (ez a Google évekkel ezelőtt létrehozott, nyílt forráskódú képformátuma, kifejezetten webes felhasználásra) mérete töredéke a JPG és PNG változatoknak, miközben a képminőség nem romlik. Vagyis sokkal gyorsabban töltődhet be az oldal, ha webp képeket használunk! Ez remekül hangzik, viszont van egy bökkenő: a webp képeket, dacára annak, hogy hosszú évek teltek már el a megjelenésük óta, e cikk készültekor még mindig csak a Chrome és az Opera böngészők támogatják. Persze a Chrome a legszélesebb körben elterjedt böngésző, de mégis, szerintünk tudunk ennél jobb megoldást mutatni a képek optimalizálására. A webp képek megjelenítését egyébként a weboldal .htaccess állományába beírt konfiguráció segítségével oldja meg a plug-in, vagyis ha olyan böngészőben töltik le az oldalt, amelyben van webp támogatás, automatikusan azok a képek jelennek meg, míg ellenkező esetben az eredeti JPG és PNG képeink kerülnek megjelenítésre. A webp átalakítás sajnos a plug-in megvásárlása esetén sem ingyenes, 1000 kreditet kapunk (az ezer képhez elég), ha ennél többet akarunk használni, akkor további krediteket kell vásárolnunk.

 

Képek optimalizálása weboldalon, teljes kényelemben

A megfelelő cache és az adatbázis optimalizálása mellett a képek mérete is sokat nyom a latban egy weboldal betöltésekor. Így aztán, ha teljes méret fotókat (esetleg több megapixeles méretben) töltünk fel a blogbejegyzéseinkbe, vagy háttérnek, azzal brutálisan belassíthatjuk az oldalt, annak ellenére is, hogy a WordPress önmaga és a plug-inek által igényelt méretű thumbnaileket hoz létre a képek feltöltésekor, hogy mindenhol a megfelelő méretet tudja megjeleníteni. A képeknél azonban felbontás mellett sajnos a tömörítés is sokat számít, a WordPress pedig ebből a szempontból inkább a képminőséget, mintsem a fájlméretet részesíti előnyben. Így ha nem figyelünk, a képek meglehetősen nagyon lesznek WordPress oldalunkon. Szerencsére erre a problémára is vannak hatékony megoldások!

Az egyik ilyen az ingyen is használható WP Smush, amely ellentétben a fentebb említett cache plug-innel, nem webp formátumú csereképet generál, hanem az eredetit tömöríti újra, beleértve a feltöltött és a WP által létrehozott képfájlokat is. Az ingyenes verzió szépen dolgozik, bár a tömörítés mértéke megszabott és sajnos egy lépésben csak 50 képet alakít át, ami sok kép esetén macera. Persze ötvenesével megoldhatjuk, max kevésbé kényelmes, mintha egy lépésben tennénk. A modul emellett arra is figyel, hogy ha egy kép felbontása feleslegesen nagy (webre átlagban elég akár az 1000×1000 px méret is, de 2000×2000 px méretnél nagyobb képet weboldalba ágyazni az esetek többségében szinte biztosan felesleges), akkor a tömörítés mellett át is méretezi azt.

A WP Smush egyetlen hátulütője, hogy az ingyenes verzióban a tömörítés nem elég hatékony (bár a semminél több), megvenni viszont önmagában nem lehet a modult, csak a WPMU DEV csomag részeként fizethetünk elő rá, ami, ha nem akarunk mást használni az amúgy remek gyűjteményből, nem éppen ár/érték barát megoldás (havidíjas).

Ha nincs szükségünk a WPMU DEV teljes kínálatára, de többre vágyunk, mint amit az ingyenes WP Smush nyújt, akkor a legjobb választás a ShortPixel nevű plug-in. Ez egy zseniálisan kivitelezett képoptimalizáló, amely adott esetben akár a felére is csökkentheti honlapunk képeinek átlagos méretét, anélkül, hogy rontana a minőségükön.

A ShortPixel újratömöríti a JPG és PNG fájlokat (de akár a PDF dokumentumokat is), ráadásul ha kell, nem csak az adatbázisba bejegyzetteket, hanem a szerverre külön feltöltötteket is. Van veszteségmentes tömörítés is, és külön meghatározhatjuk, hogy csak az eredeti fájlokat, vagy a létrehozott thumbnaileket is átvariálja-e. Ennek akkor van jelentősége, ha elmondjuk: a ShortPixel ugyan ad havi 100 kreditet ingyen és minden kredit egy-egy kép optimalizálására váltható, de ha ennél többre van szükségünk, akkor sajnos vásárolnunk kell még krediteket (havi díjért vagy felöltős rendszerben egyaránt megoldható). Ez ugyan egyszerű és olcsó, de a mennyiség kiválasztásakor figyelembe kell venni, hogy egy kép esetén a WordPressben nem csak az eredetiről beszélünk, hanem annak különféle változatairól is. Egy feltöltött képnek átlagban 8-10 változata került tárolásra a WordPressben és bizony, mindegyik elvisz egy kreditet. Szóval vagy spórolunk és csak a fő képeket alakíttatjuk át, vagy beruházunk kicsit és akkor mindet (annyi spórolási lehetőség van, hogy ha 5%-nál kevesebbet tud tömöríteni egy képen a modul, akkor nem számít fel érte kreditet). Tárhely, letöltési sebesség (és így SEO) szempontból viszont mi ez utóbbit javasoljuk. Mellesleg ha már egy ideje töltögetjük az oldalt, örömhír, hogy akár 40 ezer képpel is pár óra alatt végez a plug-in, ráadásul háttérben is képes dolgozni, szóval közben az oldal is működik és mi is babrálhatunk az admin felületen más funkciókat. A folyamat megszakítható és bármikor folytatható. Kiegészítésként a plug-in törli a képek EXIF adatait is, ha bejelöljük ezt az opciót.

A Shortpixel az optimalizáláson kívül szintén tud webp formátumú képeket létrehozni, s ha kérjük, akkor ezeket a kódban is cseréli, pontosabban kód szinten (<picture> tag használata) oldja meg, hogy az adott böngésző melyik formátumot válassza letöltéskor. Ezt azonban körültekintően érdemes csak bekapcsolni, mert nem minden sablon viseli jól. Esetleg lehet keverni a dolgot a fenti cache plug-innel és a webp létrehozást a Shortpixelre bízni, míg a kódba írogatás opció bekapcsolása helyett inkább a WP Fastest Cache alapból bejegyzésre kerülő .htaccess módszerére hagyni a böngészőkhöz való alkalmazkodást. Ami örömhír: a webp képek generálása nem visz el kreditet!

Érdekesség még, hogy ha kérjük, a Shortpixel biztonsági mentést készít az eredeti képekről a szerveren, így azokat bármikor vissza tudjuk állítani, vagy másik eljárással újratömöríthetjük őket. Ezzel persze nem spórolunk a tárhelyen, de értelemszerűen az opció kikapcsolható és akkor viszont drasztikusan, akár a felére is csökkenhet a weboldal tárhelyigénye. Az is beállítható, hogy a frissen feltöltésre kerülő képfájlok automatikusan optimalizálásra kerüljenek a feltöltésük után.

Ne maradjon le erről sem!

Mint a legtöbb weboldal, mi is használunk sütiket az oldalon. Elfogadom Adatkezelési tájékoztató