Betöltési sebesség javítása WordPress-ben

Szerző: Bognár Balázs | okt 12, 2019 | Divi, felhasználói élmény, keresőoptimalizálás, weboldal karbantartás, weboldalkészítés, wordpress

Vendégposzt a betöltési sebesség gyorsításáról, Jobbágy András tollából.

Senki sem szereti a lassú weboldalakat. Az interneten mindenki türelmetlen, még türelmetlenebb, mint az offline világban. A kutatások szerint elég pár pillanatnyi késés, és az átlagos felhasználó már is hajlamos továbblépni a honlapról.

Ennek ellenére nagyon sok honlaptulajdonos nem foglalkozik a betöltési sebességgel. Talán mert remélik, hogy a szuper tartalom és szép webdesign majd kárpótolja a felhasználót. Vagy csak egyszerűen nincsenek tisztában, mennyire fontos kritérium a gyorsaság egy weboldalnál.

Szeretném végigjárni ebben a cikkben, hogy miért életbevágó kérdés minden honlap számára a minél rövidebb betöltési idő. A cikk második felében konkrét tippeket is adok ahhoz, hogyan tudod gyorsítani a WordPress weboldalad. (Ha még csak most ismerkedsz a WordPress világával, ajánlom a honlapkészítés kezdőknek cikkemet.)

A betöltési sebesség és az online marketing

A betöltési sebesség nem csupán felhasználói élmény (UX), hanem kőkeményen online marketing kérdés is. Elsőre talán nem egyértelmű a kapcsolat a kettő között. A kulcs a Google algoritmusának működésében rejlik.

A Google 2010-ben jelentette be, hogy a rangsorolási metódusában fontos szerepet kap a weboldal sebesség is. Egyszerűen azért, mert a gyorsan betöltődő weboldal elégedetté teszi a felhasználókat. A Google pedig elégedett felhasználókat szeretne, hiszen a jövőben is piacvezető akar maradni a keresőmotorok között.

A gyors betöltési sebesség ezért segíthet előrébb jutni a Google keresőjében. Vagyis pozitív hatással van a honlapod online marketingjére is.

Ebből következik, hogy a lassú betöltődés viszont árt a weboldaladnak. Rontja a helyezésedet a keresőben, miközben megfojtja a felhasználói élményt is. Egy lekérésekre lassan reagáló honlapon az emberek kevesebb időt hajlamosak eltölteni, és sokkal magasabb lesz a visszafordulási arány. Ráadásul a hosszas betöltés tönkreteszi a konverziót is.

Egy, a legnagyobb webáruházak teljesítményét vizsgáló 2017-es tanulmány szerint minden 100 milliszekundumos (0,1 másodperc!) késés a betöltési sebességben hét százalékos esést jelenthet a konverziós rátában. Kettő másodperces késés pedig akár a visszafordulási arány 103 százalékos emelkedésével járhat! Elég sokkoló adat itt nálunk, a szégyenletesen lassú webáruházak* országában.
A betöltési sebesség tehát kulcskérdés, ha sikeresek akarunk lenni az e-kereskedelemben, vagy bármilyen más online üzletágban.

Mennyi az ideális betöltési sebesség?

Az ideális betöltési sebesség nagyjából 2-5 másodperc között van, azzal a megkötéssel, hogy a felmérések szerint a felhasználók 40-53 százaléka elhagy egy olyan weboldalt, ami nem töltődik be három másodperc alatt. Két másodperc felett pedig már minden másodperc a visszafordulási arány növekedésével jár. A felhasználók 47 százaléka asztali és számítógépen ráadásul két másodpercnél is rövidebb betöltési időt vár el.

Vagyis, ha nem akarod, hogy a weboldaladat a felhasználók tekintélyes része dühösen hagyja el, próbáld legalább három, de inkább két másodperc körül/alatt tartani a betöltési sebességet.

Egy 5 másodperces oldalbetöltődés már határesetnek számít – vannak akik nem várják meg és “lepattannak”.

Honnan tudom, hogy mennyire gyors a honlapom?

Az oldalsebesség mérésére több ingyenes eszköz is létezik. Használhatod például a GTmetrix vagy a Dotcom-monitor tesztjét. Az előbbi jellemzője, hogy rengeteg tippet ad a weboldal sebesség növelésére, az utóbbié pedig, hogy a világ 24 különböző pontjáról futtatja lesz a tesztet, ezért nagyon jó megoldás, ha a nemzetközi piacra szeretnél betörni a weboldaladdal.

Az én személyes kedvencem a Google saját sebesség tesztje (Ez még pontosabban fogalmazva a weboldal “teljesítményét” méri, melynek természetesen fontos része a sebesség is). Egy nullától százig terjedő skálán osztályozza a weboldalakat, és külön eredményt ad meg az asztali és a mobilos nézetre. Érdemes figyelembe venni a teszt javaslatait, mert ha követjük őket, nagyon szép eredményeket lehet elérni egy átlagos WordPress weboldallal is.

Egy tipp a Google sebesség teszt használatához: alapvetően nem az abszolút eredmény a fontos, tehát önmagában nem az, hogy 65, 70 vagy 82 pontot kaptál. De azt azért mindenképpen ajánlom, hogy a fent már részletezett okok miatt igyekezz három másodperc alatt tartani a betöltési időt.

Amire inkább figyelned kell, hogy a versenytársaidhoz képest legyél tartósan jobb a betöltési sebesség terén, mert ez komoly előnyt jelenthet neked a keresőben. Ha a konkurens weblapok 40 pontot kapnak a teszten, a tied szerezzen legalább 55 pontot. Ha hetvenet, akkor a tied legyen 80 felett, és így tovább. És most lássuk, mit tehetsz, hogy szuper gyors legyen a honlapod.

Betöltési sebesség: az alapok

Az első, és legfontosabb, hogy az alapok rendben legyenek, mert megfelelő üzemeltetési környezet nélkül akármit csinálsz, mindig lassú lesz a weboldalad. Mit értek ez alatt?

• Jó tárhely
• Jó sablon
• Rendszeresen karbantartott és frissített eszközök

Kezdjük a tárhellyel. Tele az internet magyar és külföldi szolgáltatók ajánlataival, de egyáltalán nem egyszerű feladat igazán jót választani közülük, pláne ha gyorsat akarunk. Sokszor sajnos csak utólag derül ki, hogy a papíron remek választásnak tűnő szolgáltatás lassú tárhelyet ad.
Általánosságban elmondható, hogy az olcsó (30-40 ezer forint/év alatt) szegmensben nagyon könnyű rossz szolgáltatásba belefutni. Rossz alatt nem azt értem, hogy neked kell foglalkozni a sebesség optimalizációval, hanem azt, hogy bármit is csinálsz, mindig lassú marad a honlapod. A lassú tárhely jele, amikor a Google tesztje tartósan nagyon magas, több másodperces értéket ad meg a szerver válaszidejére (TTFB). Ilyenkor általában a szolgáltatóváltás hoz csak érdemi eredményt.

Amennyiben szeretnél biztosra menni, érdemes drágább szolgáltatást választani, például egy jó managed hosting szolgáltatást, ami leveszi a válladról az összes tárhellyel kapcsolatos terhet. Ha sok-sok ezer látogatód van, vagy ennyire számítasz, válassz virtuális dedikált szervert (VPS). Webáruház esetén keress direkt erre specializálódott tárhelyet.

Viszont ha csak egy átlagos forgalmú (havi 5000 látogató alatt) weboldalad van, és szívesen foglalkozol legalább alapszinten a tárhellyel kapcsolatos tennivalókkal, például a sebesség optimalizációval is, vagy csak nem akarsz havi szinten sok ezer forintot elkölteni tárhelyre, akkor nyugodtan próbálj ki több egyszerű osztott tárhelyet. Lehet, hogy nem elsőre, de előbb-utóbb találni fogsz olyat, ami passzol az igényeidhez.

Ha már van egy jó tárhelyed, szükséged lesz még egy kiváló minőségű WordPress sablonra.
Amennyiben pénzt akarsz keresni a honlapoddal, vagy egyszerűen csak nem akarsz kockáztatni, mindenképpen válassz prémium (fizetős) sablont.

Személyes tapasztalatom alapján a Divit, a StudioPress termékeit, valamint az Oxygent tudom ajánlani. Mindegyiknél alapvető fejlesztési szempont a gyorsaság, bármelyikkel jó eredményeket lehet elérni a sebesség optimalizálás területén (is).

És végül nem szabad megfeledkezni a rendszeres karbantartás fontosságáról sem. Hiába választottál szuper tárhelyet és kiváló minőségű sablont, hiába döntöttél körültekintően arról, hogy milyen bővítményeket (plugin) telepítesz a honlapodra, ha nem figyelsz a frissítésekre, az egész fabatkát sem fog érni fél-egy év múlva.

A hanyagul, vagy sehogy karbantartott weboldal egy idő után belassul, és működési zavarok jelentkeznek. Végül a honlap szép csendben kileheli a lelkét – általában mindig a legrosszabb pillanatban.

Hat módszer WordPress weboldalak gyorsítására

Ha a fentiek rendben vannak, de továbbra sem vagy megelégedve a weboldalad sebességével, akkor még mindig tudsz mit tenni. Mutatok néhány eszközt / módszert, amivel a személyes tapasztalatom szerint sokat lehet javítani a betöltési sebességen.

1. GZIP tömörítés beállítása

Ez azért lényeges, mert ha tömörítve szolgálja ki a szerver a honlapodat, a felhasználóknak sokkal kisebb adatmennyiséget kell letölteniük, amikor a weboldalra kattintanak. Kisebb adatmennyiség pedig egyenlő a gyorsabb lekéréssel.
Ha a tárhelyed online kezelőfelülete cPanel (ez a leggyakoribb megoldás), akkor a Gzip tömörítést a Szoftver >> Webhely optimalizáció >> Az összes tartalom tömörítése úton keresztül tudod beállítani. A Gzip tömörítést tudja emellett szinte az összes elterjedt cache bővítmény (például a WP Fastest Cache és a W3 Total Cache) is.

2. Legfrissebb PHP verzió beállítása

A PHP egy nagyon népszerű, nyílt forráskódú, szerver oldali webes programnyelv, ezen íródott a WordPress magja is. Nagyon nem mindegy, hogy a PHP melyik verziója fut a tárhelyeden.
Sok hazai tárhelyszolgáltató a már teljesen elavultnak számító 5.6-os verziót használja alapbeállításként. A WordPress viszont már csak a 7-es verziót támogatja, ami sokkal-sokkal gyorsabb, mint a régebbi változatok.
A PHP verziót a cPanelen a Multi PHPManager >> PHP verzió beállítása útvonalon állítható át. Válaszd a lehető legfrissebb verziót, ami jelenleg (2019 őszén) a 7.3-as.

3. Képek optimalizálása

Rengeteg weboldal azért nagyon lassú, mert tele van rakva szép nagy, több megás képekkel, amiket aztán csak vért izzadva tudnak betölteni a böngészők. A megoldás szerencsére egyszerű: tömöríteni kell a képeket.
Ezt megteheted felöltés előtt online eszközökkel, jó tapasztalataim vannak például a JPEG Optimizer, a Compressor.io vagy a Compress PNG webes alkalmazással. (De a TinyPNG is egy régi jó bevált oldal képek tömörítésére.)

A TinyPNG oldalon egyszerűen csak a “Fogd és vidd” módszerrel kell a tömörítendő képeket az ablakra húzni.

Feltöltés után is tömörítheted a képeket bővítményekkel. Ilyen plugin például az Imagify, havi 25 MB-ot tömöríthetsz vele ingyenesen.

Tartsd a képek méretét 200 kB alatt.

Elsőre talán nem hiszed, de 200 kB igazából tényleg mindenre untig elég lesz. Sőt, legtöbbször sokkal kisebb méretű képek is bőven élvezhetőek, még nagyobb (pl. 2000 x 1000 pixeles) méretben is.

4. Lusta betöltés alkalmazása

Hatásos és nagyon egyszerű trükk a “lusta betöltés”. A lényege, hogy a weboldal lekérésekor elsőre csak azok a “hajtás feletti” (above the fold) tartalmak töltődnek be, amelyek görgetés nélkül, egyből megjelennek a böngészőben a felhasználó szemei előtt.
A honlap többi, “hajtás alatti” (below the fold) része csupán akkor töltődik le, amikor a felhasználó odagörget. Ezzel csökkenteni lehet az egyidejű HTTP lekérések számát, az eredmény pedig egy gyorsabb honlap lesz.
A lusta betöltést könnyen beállíthatod az úgynevezett Lazy Load bővítményekkel. A kedvencem a képek, videók és iFrame-k késleltetett betöltésére fejlesztett Lazy Load by WP Rocket alkalmazás. Villám gyorsan lehet konfigurálni és nagyon hatékony.

5. Gyorsítótárazás (cache)

A rövid betöltési idő elérésének egyik legfontosabb eszköze a hatékony gyorsítótárazás (cache). A lényege, hogy amikor egy felhasználó a weboldaladra kattint, a böngésző gyorsítótára lementi a honlap statikus, nem változó részeit, így a legközelebbi látogatáskor már csak a változó, dinamikus elemeket kell újból letöltenie. A betöltési sebesség ezáltal sokkal jobb lesz – de csak akkor, ha jól van beállítva a gyorsítótár-házirend.
A leghatékonyabb megoldás, ha a tárhelyhez tartozik szerver oldali cache szolgáltatás. Ezt azonban csak a drágább szolgáltatók tudják. A másik megoldás egy cache bővítmény telepítése.
A cache bővítményeket alapvetően két “iskolába” lehet kategorizálni kezelési bonyolultság szerint. Léteznek nagyon egyszerűen beállítható és kezelhető pluginok, ilyen az ingyenes  WP Fastest Cache vagy a fizetős WP Rocket. Előnyük, hogy minimális háttértudás szükséges csupán a konfigurálásukhoz, néhány lehetőségből választhatunk, és kész is vagyunk.
Általában kicsit hatékonyabbak az olyan belemenősebb, sokkal több választást felajánló bővítmények, mint az ingyenes W3 Total Cache, vagy a magyar fejlesztésű, fizetős Swift Performance (van ingyenes verziója is). Főleg az előbbinél pepecs munka a helyes konfiguráció megtalálása, de ha sikerül, nagyon szép eredményt lehet elérni vele.

A Swift Performance plugin admin felülete

6. Adatbázis takarítás

A WordPress weboldalak minden tartalmat és beállítást MySQL adatbázis táblákban tárolnak. Az adatbázisban nyomot hagy minden változtatás, bejegyzés módosítás, telepítés és törlés, stb. Olyan ez, mint a por lakásban, rendszeres takarítás nélkül egy idő után mindent belep. A “teleporolt” adatbázis pedig belassul, növeli a betöltési időt.

Az adatbázis kitakarításához egy sor bővítményt használhatsz. A legjobb talán a WP-Optimize. Pofon egyszerű a kezelése, csupán a WordPress admin kezelőfelületen a WP-Optimize >> Database menüpontban rá kell nyomnod a Run all selected optimizations lehetőségre, és megvárni, amíg végigfut a folyamat.

Érdemes ezt pár havonta elvégezni, főleg, ha gyakran adsz hozzá új tartalmat a honlapodhoz, például blogot írsz. Egyet nem szabad elfelejteni: készíts mindig biztonsági mentést az adatbázis karbantartása előtt!

Összegzés

Ha az összes, fent részletezett megoldáson végigmentél, a WordPress honlapod mostanra biztosan sokkal gyorsabb lett, mint eredetileg volt. Gratulálok! Amennyiben kérdésed van, vagy segítségre van szükséged, nyugodtan írj hozzászólást.

Írta: Jobbágy András, a Honlapszaki.hu tulajdonosa és bloggere.

* 2 példa rendkívül gyenge Google PageSpeed Insights értékekre a hazai webáruházak világából: itt  és itt…