Hogyan gyorsítsd fel a WordPress weboldalad 2019-ben – A Nagy Sebesség Útmutató

Nem lehet elégszer hangsúlyozni, hogy egy megfelelően kiválasztott tárhelyszolgáltatón mennyi minden múlik! És mégis, mennyien beleesnek abba a hibába, hogy olcsó (- értsd: minőségileg is olcsó) tárhelyszolgáltatást választanak. Igaz, nagy a választék, de ezen a ponton megéri nem csak a pénztárca alapján dönteni. Az igényeknek megfelelően két nagyobb tárhelyszolgáltatás-kategóriát tudunk elkülöníteni, értelemszerűen a kisebbtől a nagyobb forgalmú webhelyek igényei felé haladva.

Osztott tárhelyek

Ezek a legnépszerűbb szolgáltatások, és valljuk be, egy átlagos honlap számára általában maximálisan elegendők is. Persze ez sok kompromisszummal is jár, ezek közül a leggyakrabban előforduló galiba az időszakos belassulás. Aki ilyen tárhelyet választ, az előbb-utóbb tapasztalni fogja ezt. Hogy miért?

Azért mert a szolgáltatók az osztott tárhelyeket túlzsúfolják, de legalábbis igyekszenek kimaxolni a kapacitásukat.

A gyakorlatban ez azt jelenti, hogy adott esetben több száz másik weboldal is ott csücsül a miénk mellett – és hát ugyanazokat az erőforrásokat használják, amit a mi honlapunk is szeretne. Ha viszont ezek az erőforrások épp foglaltak, akkor az oldalunk belassul, extrémebb esetben 500-as hibaüzenetet dob, még rosszabb esetben leáll (a szerverrel együtt). De a szerver valamelyik másik weboldalán lévő súlyos probléma is átgyűrűzhet a mienkre osztott szerver esetén, bár ez azért valóban ritka eset, tényleg csak nagyon gagyi szolgáltatóknál szokott előfordulni.

Mikor ajánlott: kis forgalmú weboldalak esetén, akkor is ideiglenesen

VPS tárhelyek

A tárhelyszolgáltatások második nagyobb csoportját az ún. VPS (Virtual Private Server) szolgáltatások alkotják. Ehhez már kicsit több szerverkezelési és fejlesztői tapasztalatra van szükség, hiszen itt már szabad kezet kapnak az ügyfelek a hardware-ek felett, de még mindig fontosabb szempont a költséghatékonyság a teljesítménynél. A saját virtuális számítógépre általában tetszőleges Linux operációs rendszer telepíthető root adminisztrátori hozzáféréssel.  Mivel itt az ügyfél kezeli a szervert, hozzáértő kezekben nagyszerű választás lehet, de a megfelelő hozzáértés hiányában nem érdemes rákölteni, hiszen ilyenkor a telepítéseket, a konfigurálásokat és a karbantartást is magunknak kell megoldani.

Mikor ajánlott: nagyobb forgalmú és/vagy egyéni szerverkonfigurációt igénylő weboldalak esetén

+2 tárhelytípus

Említést érdemel még az előbbieken felül két tárhelytípus:

• Amikor saját szerver üzemeltetésére adjuk a fejünket, ez azonban magasfokú szakértelmet, minőségi hardware-eket, és probléma esetén gyors rendelkezésre állást követel a tulajtól, tehát magáncélú felhasználás esetén nem elterjedt megoldás.
• Illetve egyre nagyobb teret nyernek a Managed Hosting szolgáltatások, amik borsos (osztott tárhelyekhez képest akár 8-10-szeres) felár ellenében teljes szervermenedzsmentet kínálnak a honlapnak. Ebbe beletartozik a teljes backend szerver beállítás, magas rendelkezésre állású és széleskörű segítséget nyújtó ügyfélszolgálat, automatikus biztonsági mentések és egykattintásos telepítőkörnyezetek. Vastag pénztárcával megáldott teljesen kezdőknek is ajánlott.

Bár lehet, hogy meglepő sokak számára, de a PHP 7.x verziói hatalmas, sokszor másodprecekben mérhető javulást hozhatnak a weboldal betöltődési sebességében. A PHP 5.6-ot a PHP 7.2-vel összehasonlítva közel 3-szoros sebességnövekedést ért el az utóbbi, ami szemmel látható különbséget jelent a gyakorlatban. És az új PHP verziók nemcsak gyorsabbak, hanem sokkal biztonságosabbak is a régebbi verzióknál, tehát a modernebb verziók használata nem csak ajánlott, hanem szinte kötelező, ha jó teljesítményű weboldalt szeretnénk üzemeltetni.

A WordPress „lelke” PHP-ben készült, nem beszélve a hozzá készült sablonokról és pluginekről, ami a PHP-t az egyik legfontosabb nyelvvé teszi WordPress használók számára.

Sok tárhelyszolgáltató még mindig kínál tárhelyet PHP 5.6-tal (vagy még régebbi verziókkal), ezeket azonban 2019-ben már messze érdemes elkerülni, hiszen ezen verziók támogatása vagy már meg is szűnt, vagy hamarosan meg fog szűnni. Annál is inkább, mert a PHP töretlenül fejlődik, pár hete már meg is jelent a PHP 7.3, ami még a 7.2-höz képest is jelentős gyorsulást ígér!

Az egyik legfontosabb. Pont. Egy jó sablon egy jó weboldal biztos alapja. Lehet persze jó sablonnal is rossz honlapot készíteni, fordítva viszont sajnos nem szokott működni a dolog; nagyon fontos tehát a körültekintő témaválasztás. Itt érdemes megemlíteni, hogy sok sablonnak van ingyenes verziója is, azonban aki már dolgozott ingyenes és fizetős sablonnal is, az nagy valószínűséggel érteni fogja, hogy

ha honlapot szeretnénk, ne ezen a ~60$-on akarjunk spórolni!

Ez persze nem jelenti egyből azt, hogy nem is létezhet jó ingyenes sablon, ahogy azt sem, hogy minden prémium sablon automatikusan jó.

Akkor most mi van?

Ahhoz, hogy kiválasszuk a számunkra legmegfelelőbb sablont, két választási lehetőséget érdemes fontolóra venni*:

• vagy olyan sablont választunk, ami kizárólag azzal a funkcionalitással rendelkezik, amire szükségünk van
• vagy egy olyan sablont, ami kellően sokoldalú és funkciógazdag, de a számunkra haszontalan funkciókat ki tudjuk benne kapcsolni (így nem eszi feleslegesen az erőforrásokat)

*természetesen a jó kódminőség és a gyorsaság alap, másmilyen sablont ne is nézzünk

Amiket érdemes kikapcsolni, mert sokat lassíthatnak a honlapon, ha nincs rá szükségünk:

• felesleges ikonkészletek meghívása
• felesleges betűtípusok meghívása
• felesleges scriptek meghívása (pl: képgalériák, videónézegetők, sliderek, parallax effektek) « Lásd: HTTP lekérések minimalizálása

Ha az eddigiekkel megvagyunk (jó szerver, jó beállítások, prémium sablon és pluginek), akkor nagy esélye van az oldalunknak a gyors működésre. Viszont a sornak még nincs vége, ugyanis egy megfelelően beállított cache (gyorsítótár) még tovább tudja gyorsítani az oldalt. Fontos kiemelni, hogy „megfelelően beállított”, mivel egy rosszul beállított cache többet tud ártani, mint használni (sokat lassíthat, vagy adott esetben el is szállhat tőle az oldal). Ha viszont hozzáértő kezek állítják be a cache-elést, akkor ez az egyik legegyszerűbb megoldás a WordPressünk gyorsítására! De ne szaladjunk ennyire előre…

Mi az cache?

Ha megpróbáljuk röviden és érthetően leírni a folyamatot, akkor ez a következőképpen néz ki:

Minden egyes weboldal meglátogatása a WordPress-ünkben egy lekérdezés a szerverünk felé. A szerver feldolgozza ezeket a lekéréseket (beleértve az adatbázis-lekérdezéseket is), majd a feldolgozás után egy végső változatot küld a böngészőnknek, amit az meg tud jeleníteni. Ez az eredmény a weboldal, amit látunk minden fájllal és egyéb összetevőjével együtt. Valószínűleg már mindenki kikövetkeztette ebből, hogy minél nagyobb és összetettebb egy weboldal, annál több időbe telik a szervernek a lekérések feldolgozása – és ezáltal a végleges weboldal felhasználóhoz történő eljuttatása is.

És ez az a pont, amikor képbe kerül a cache, és megoldja a problémánkat! A gyorsítótárazás ugyanis nem csinál mást, mint hogy eltárol néhány fájlt a lemezen (vagy a memóriában, konfigurációtól függően) a felhasználó gépén. Tehát eltárolódik az a tartalom, ami már egyszer legenerálódott a múltban, ezáltal az újra-létrehozáshoz szükséges idő a töredékére csökkenhet. Az eredmény magáért beszél: az egyes weblapok sokkal gyorsabban töltődnek be közvetlenül a gyorsítótárból, ez pedig a korábban kifejtett marketing előnyökön túl elsőrangú élményt biztosít.

És hogyan tudom ezt használni a gyakorlatban?

Alapvetően két irányból is megközelíthetjük a dolgot:

Szerver-szintű cache

Szolgáltatója válogatja, hogy elérhető-e vagy sem, ha azonban igen, akkor ez az egyik legegyszerűbb módja a cache-elésnek. Bekapcsoljuk, és jó esetben működik. Éppen ezért erre a cikkben nem is térnék ki részletesebben, sokkal érdekesebb ugyanis, ha megnézzük mi van akkor, ha nem működik a szerver-szintű cachelés, vagy a szolgáltatónk egyaltalán nem is biztosít rá lehetőséget.

Cache beállítása plugin segítségével

Ha szolgáltatói szinten nem biztosított a gyorsítótárazás, akkor sem kell lemondanunk a cache-ről, hiszen WordPress rendszerre természetesen cache pluginból is annyi van, mint égen a csillag. Itt is nagyon fontos tehát a körültekintő választás és a még körültekintőbb beállítás. Általánosságokat itt sem nagyon lehet mondani, hiszen választástól függően minden cache plugin beállítása más és más. Abban viszont tudunk segíteni, hogy mutassunk pár jól működő, általunk is tesztelt és használt, azaz bevált cache plugint a teljesség igénye nélkül. Íme:

Swift Performance

Kezes, jól testreszabható és nagyon nagy tudású cache plugin. Rendelkezik teljes értékű ingyenes verzióval is, azonban a teljesértékű és mindenre kiterjedő funkcionalitást csak a fizetős verzió biztosítja (pl.: képoptimalizáló, de erről majd később).

W3 Total Cache

Az egyik legnépszerűbb, ingyenes, és nagyon részletesen beállítható pluginról van szó. Az optimális beállítás sok időt vesz igénybe, de megéri a szöszölést.

WP Rocket

Szintén nagyon népszerű, de fizetős megoldás. Egyszerű adminisztrációs felület és gyors beállítás jellemzi – kezdők is tudják használni.

És el is jutottunk a legtöbb weboldal fizikai (tárolókapacitásban mért) méretét leginkább meghatározó weboldal-összetevőnkhöz: a képekhez. A legtöbb weboldal méretének több, mint 50%-át teszik ki a képek, még megfelelően optimalizált képek esetében is (optimizálatlanul ez az arány bőven 90% fölé is csúszhat). Vitán felül álló tény tehát, hogy egy weboldalra szánt képet feltöltés előtt optimalizálni KELL! A nagy méretű képek ugyanis hihetetlen módon képesek belassítani oldalt.

Gondoljunk csak bele, hogy manapság egy nagyobb felbontású, akár mobillal készített kép is simán elérheti a 4-5MB-ot. Ha egy jól optimalizált weboldal óhajtott méretét 1-2MB-nak vesszük, akkor könnyen belátható, hogy akár már egyetlen optimalizálatlan képpel megháromszorozható a betöltődési sebesség. Ezt tehát igyekezzünk minden esetben elkerülni, ha akarunk még látogatókat az oldalunkon! De hogyan lehetséges jól optimalzálni a képeket? Itt is két „iskola” létezik alapvetően, de a legjobb, ha egyszerre alkalmazzuk a kettőt:

Kézi optimalizálás

A képek formázásának elsődleges célja a legalacsonyabb fájlméret és az elfogadható minőség közötti egyensúly megtalálása. Erre nincsenek konkrét szabályok, bízni kell magunkban vagy a grafikus szakemberben. Minden valamire való képszerkesztő programban lehetőségünk van webre optimalizáltan kimenteni a képeket, azonban nagyon oda kell figyelni a megfelelő fájlformátum használatára, valamint a tömörítés fajtájára és mértékére (veszteséges/veszteségmentes).

Ökölszabályként azonban elmondható, hogy szerencsés, ha egy kép a mentés után sem több 300 kB-nál.

Képoptimalizálás plugin segítségével

Természetesen a WordPress ahol tud segít, tehát ezen a téren is rengeteg plugin közül válogathatunk. Az egyik legjobb (fizetős) megoldás a cache-résznél is említett Swift Performance plugin prémium verziója, ami nagyon hatékonyan, külső szolgáltatás használatával tömöríti a feltöltött képeinket (akár feltöltés után egyből, a háttérben is).

Létezik persze ingyenes megoldás is, a TinyPNG 500 tömörített kép/hó-ig hasonlóan színvonalas munkát végez, így ha valaki eddig nem használt ilyet, de megnézné  ingyenesen, hogy mennyit gyorsul optimalizált képekkel a weboldala, érdemes tenni vele egy próbát!

A cikkben eddig azzal foglalkoztunk, hogy hogyan növeljük a weboldal sebességét. Most nézzünk meg, hogy mit sikerült elérni a gyakorlatban! Összegyűjtöttük a (szerintünk) legfontosabb online mérőeszközöket, amikkel skálázhatóvá tehetjük a weboldalunk sebességét, illetve az esetleges javítani és fejlesztenivalókról is információkat kaphatunk – a lista nem teljes, de már csak ezeket az eszközöket használva is teljes képet kaphatunk a weboldalunk sebességéről.

Összességében elmondható, hogy ezeknél az eszközöknél a legszerencsésebb a minél nagyobb helyiértékű és minél zöldebb színű eredmény! 🙂

1. Google PageSpeed Insights

Nehéz felállítani egy sorrendet, de talán érdemes a Google dedikált eszközével kezdeni a sort, hiszen legtöbb esetben mégiscsalk a Google robotjainak akarjuk megfeleltetni az oldalunkat az előkelő helyezés érdekében.

Az eszköz által adott pontszám 0 és 100 pont közötti értéket vehet fel. Minél magasabb a kapott pont, annál jobb, a 85 (vagy annál magasabb) pontszám pedig egy jól teljesítő és gyors weboldalt jelöl.

Google Mobile Website Test

A Google tapasztalatai szerint a látogatóink fele elhagyja az oldalunkat, ha nincs mobilra optimalizálva. Ezért adták ki a Mobile Website Speed Testing Tool névre keresztelt szolgáltatásukat, ami a PageSpeed Insights mérésein alapul, de a nevéhez hűen alapvetően mobil-orientáltan közelíti meg a weboldal sebesség-kérdést.

Pro tipp: ennél az eszköznél a 100 pont elérése lényegében lehetetlen, mert a WP beállításai, a sablon, pluginek és külső szkriptek miatt az az oldal sem fog maximális értéket kapni, amelyik tökéletesen rendben van. Ez tehát határozottan nem a fejlesztő hibája, a minél magasabb pontszámra azonban ilyenkor is lehet törekedni 🙂

Google Analytics Sebesség Teszt

Igen, a Google Analytics is képes mérni egy webhely sebességét. Ha tehát telepítve van az oldalon a mérőkód (és aki bármilyen szinten is hasznot akar húzni a weboldalából üzletileg, annak telepítve van), akkor nincs más hátra, mint az irányítópulton belül a Viselkedés menüpontra kattinva előcsalogatni a Webhelysebesség fület, ahol hosszútávú adatokból kinyerve láthatjuk többek között az oldalunk átlagolt betöltődési sebességét (illetve ezer másik, hasznos adatot), így talán a pillantnyi szerver-leterheltségtől leginkább független képet ennek az eszköznek a használatával kaphatjuk.

2. Pingdom

A Pingdom egyike a legnagyobb webhely-felügyeleti szolgáltatásoknak, de a legismertebb szolgáltatása az ingyenes weboldal sebességmérő eszköze.

Szintén 0 és 100 pont között mér, az itt kapott érték azonban 12 különálló egységre bontható – amikre szintén egyéni értékeket kap az oldalunk. A szolgáltatás nagy előnye, hogy tárolja az egyes oldalakon végrehajtott összes teszt eredményét, ezáltal később össze is lehet hasonlítani weboldalunk sebességének változását.

3. GTmetrix

A GTmetrix szintén nagyon és méltán népszerű weboldal sebességelemző eszköz. A használata ennek az egyik legegyszerűbb, kezdők is hamar el tudják sajátítani.

Az eszköz egyik leghasznosabb tulajdonsága, hogy átfogó elemzést biztosít a Google PageSpeed Insights és a YSlow eredményeinek összefoglalásával. Ebben az oldal tetején felsorolva láthatjuk a teljes betöltődési időt, az oldal méretét és a lekérések számát is. Az eszköz egy vízesés-diagramban is megjeleníti a lekérések listáját, így könnyedén azonosíthatóak a problémás területek.