A tipikus 21. századi ember állandóan siet valahova, hogy dolgozzon, tanuljon, sportoljon, szórakozzon vagy épp pihenjen. Tudatosan tervezi meg a programjait, mert tudja, hogy különben könnyen “kicsúszik” az időből és akkor biztosan kimarad valami fontos a napirendjéből. Na, most képzeld el, hogy ez az ember rákattint a weboldaladra és az az Istenért se akar betölteni. Talán türelmetlenül vár néhány másodpercet (látogatók 90% maximum 3-4 másodpercet) és ha nem tölt be vagy nem kifejezett szándékkal érkezik, akkor egyszerűen csak rálép a “vissza” gombra és örökre elfelejti, hogy valaha meg akarta nézni, majd a konkurensnél fog kikötni. Emellett még azt is fontos megjegyezni, hogy a lassan betöltő weblapokat nem csak a felhasználók nem díjazzák, hanem a Google se. Ez azt jelenti, hogy a keresési listában ezeket az oldalak rendszerint hátra sorolja a keresőóriás, pont a rossz felhasználói élmény miatt.
A weboldalad betöltési sebessége tehát nem elhanyagolható szempont. Feltéve persze, ha azt szeretnéd, hogy legyenek látogatóid rajta és ez által be tudja tölteni a szerepét. Mostani cikkünk témája a WordPress gyorsítás, sebesség optimalizálás lesz, egészen pontosan arról, hogy hogyan lehet egyszerűen véghez vinni a gyorsítást anélkül, hogy bármilyen programozói tudásod lenne hozzá.
Mi az a betöltési sebesség?
Először is érdemes tisztázni, hogy pontosan mi is az a betöltési sebesség. Ez az adat azt mutatja meg, hogy a weblapod a linkre való kattintást követően mennyi idő alatt válik láthatóvá és tud kattintani, olvasni, interakcióba lépni. Ha az internetezőknek több időt kell várniuk pár másodpercnél, akkor az idő alatt a képernyőjükön csak egy homokórát látnak vagy egy kör grafikát, aminek a széle körbe-körbe jár. Szóval csak a töltő képernyőt. Ez nyilvánvalóan sokat ront a felhasználói élményükön, ha egyáltalán éreznek magukban annyi türelmet, hogy kivárják az oldal betöltést. Ha nem, akkor 0 élménnyel máris távoznak, te pedig értékes látogatókat, sőt potenciális vásárlókat, ügyfeleket veszítesz.
Sokat elmond, hogy egy 1999-es statisztika szerint a látogatók átlagosan 9 másodpercet voltak hajlandóak várakozni a weboldalak betöltésére. 2020-ra viszont ez az adat kb. 2-3 másodpercre redukálódott. Ezt a kevés időt talán kivárjuk még, de ha egy szempillantás alatt nem látjuk magunk előtt, amit szeretnénk, akkor máris azt gondoljuk, hogy “lassú ez a weboldal”. Ha belegondolunk, ez nem is annyira meglepő, hiszen többségünk már nagyságrendekkel gyorsabb internet-hozzáféréssel rendelkezünk mint anno és emiatt hozzászoktunk ahhoz, hogy a tartalmakat késlekedés nélkül, villámgyorsan megkapjuk. Látható tehát, hogy az idő mennyire fontos tényezővé vált a mai világban és ez bizony a weblap tulajdonosokra is kihatással van.
A weboldalad sebességének mérése
Könnyen meglehet, hogy fogalmad sincs, mennyi idő alatt tölt be a weblapod. Lehet, hogy csak kaptál egy “fülest” az egyik ismerősödtől, hogy türelmes várakozás ellenére sem jelent meg neki a tartalom vagy te magad észlelted a problémát. Bárhogy is legyen, a weboldalad sebességét könnyen meg tudod mérni. Erre van például a Google saját tesztoldala, a PageSpeed Insights, ami 0-100-ig terjedő skálán vizsgálja az oldalak sebességét. Azért ez az egyik legjobb “mérőoldal”, mert itt a statisztikán túlmenően sok hasznos tippet kapsz a sebesség optimalizálással kapcsolatban. Azt is érdemes figyelembe venned, hogy attól, mert neked gyorsan betölt, nem azt jelenti, hogy a látogatóidnak is. Például ha gyakran megnyitod a honlapod, akkor az nagy eséllyel a böngésződ cache-ében már ott van és így nem valós eredményt ad.
Más oldalak, ahol szintén el tudod végezni a tesztet:
- GTMetrix: Nagyon sok hasznos infót ad és UK helyről mérve egész pontos eredményt ad.
- Pingdoom: Németországból ez adja a legpontosabb eredményt az idő tekintetében.
- PageSpeedInsight: A Google hivatalos mérője, mely a sebesség mellett már felhasználói élmény szerint is pontoz. Ez a legszigorúbb pontozású mérő.
- Dot-Com Tools: Több városból és kontinensről is tesztelheted a honlapod betöltési sebességét.
Tipp: Saját oldalad valós betöltési sebességét úgy ellenőrizheted, ha egy inkognító ablakot nyitsz a böngésződben és beírod a honlapod címét.
Mitől függ a betöltési sebesség?
Mielőtt rátérnénk a konkrét WordPress gyorsítás tippekre egy kicsit arról is szeretnénk beszélni, hogy mitől függ a weboldalak betöltési sebessége. Nem árt ha kicsit átlátjuk mi is a háttere ezeknek.
Pontokba szedve, hogy leggyakrabban mi lassíthatja a weblapodat:
- Rossz minőségű tárhely/hosting használata
- Indokolatlanul sok és/vagy rosszul megírt bővítmények feltelepítése
- Rosszul megírt sablon alkalmazása
- PHP verziófrissítés hiánya (újabb PHP verziók gyorsabbak)
- Nincs megfelelő cache-elés, képoptimalizálás
Ezek az alapvető dolgok, amik nagymértékben meghatározzák, hogy az oldalad betöltése mennyi időt vesz igénybe. Ha a mérők azt mutatják, hogy a weblapod WordPress sebesség optimalizálásért kiált, akkor első lépésként ezeket kell rendbe tenned. Szóval nézzük is meg őket kicsit részletesebben.
1. Rossz minőségű tárhely, hosting
Laikusként talán nem is gondolnád, hogy tárhely és tárhely között milyen nagy különbségek lehetnek. Az ember szeretne egy WordPress honlapot, lehetőleg minél kevesebb ráfordításból, megvásárolja az első “szembejövő” szolgáltatótól a tárhelyet és vígan elvan vele. Igen ám, de amikor kiderül, hogy a weblap lassabban töltődik be, mint az elvárható lenne, akkor meglehet, hogy pont a tárhely a ludas. A minőség abból adódik, hogy az oldalad nem akad meg a szerveren, hanem szépen süvít rajta, úgy, ahogy kell. Tipikusan problémásak az ingyenes vagy a túlontúl olcsó tárhelyek, amiket szinte az ember után dobnak. Erről a WordPress Budapest MeetUp során volt előadás:
Az egymásra mutogatás … Igen, több tárhelyszolgáltató szeret arra hivatkozni, hogy a WordPress lassú. Egy gyenge minőségű környezetben persze. Avagy ha egy rossz bővítményt, sablont használunk, akkor is. Azonban ha egyik tárhelyszolgáltatónál lassú a honlapod, míg ugyan azt az oldalt másik tárhelyszolgáltatónál tesztelve jóval gyorsabb, akkor ott kiugrik a szög zsákból.
2. Indokolatlanul sok és/vagy rosszul megírt bővítmények
A WordPress honlapok egyik legnagyobb előnye, hogy kedvünk szerint telepíthetjük a hasznosabbnál hasznosabb bővítményeket. Legyen szó kapcsolatfelvételi űrlapokról, képmegjelenítőkről, galériákról, felugró ablakokról, közösségi ikonokról, bármelyiket létrehozhatjuk és tetszésünk szerint formázhatjuk egy bővítménnyel. Csakhogy, a bővítmények erőforrást igényelnek és lassítják a honlapot, még a legegyszerűbbek is. Nem szabad tehát végtelen mennyiségben letölteni őket és arra is érdemes figyelni, hogy ne vesztegeljenek kikapcsolt állapotban se. Nézd végig, mire van tényleg szükséged és mit tudsz mellőzni. Amiket pedig nem használsz, azokat ne csak kikapcsold, hanem töröld is, már csak a biztonság növelése miatt is.
Vajon mennyi az ideális bővítmény mennyiség? Ez minden projektnél és készítő személynél eltérő. Én azt preferálom, hogy az összes kisebb funkciót saját magam lefejlesztem és beépítem, nem pedig bővítményként illesztem be. Számomra az ideális a 5-10 bővítmény alatti mennyiség. Aki nem fejlesztő, csak honlapépítő, ott a 40 is előfordulhat. Egyszóval nincs egzakt módon meghatározható ideális bővítmény szám. Arra kell törekedni, hogy minél kevesebb legyen.
3. Rosszul megírt sablon alkalmazása
Igen, tisztában vagyunk vele, hogy a full extrás, mindennel felszerelt WordPress sablonok mennyire jól néznek ki. Ezekre öröm ránézni és hát, a használatuk is megéri az árukat, hiszen tényleg sokfajta igényt ki tudnak elégíteni. A gond csak az, hogy sok fullos, mindentudó sablon rengeteg felesleges kóddal és állománnyal van “teletömve”, amik elképesztően lassúvá tudják tenni a weboldalt. Szóval igen, szépek, hasznosak, de ha technikailag nem megfelelőek, akkor több a hátrányuk, mint az előnyük. Ha neked is ilyen sablonod van, akkor érdemes elgondolkodnod a mielőbbi váltáson, hiszen mit ér egy csodálatos weblap, ha egy látogatója sincs? A fölösleges, em használt funkciók pedig mind lassíthatják a betöltés sebességét, főleg ha nem elég átgondolt a sablon kivitelezése.
4. PHP verziófrissítés hiánya
A PHP az egyik legnépszerűbb webes programnyelv, amiről azért érdemes beszélni, mert a WordPress egy PHP alapú tartalomkezelő (CMS) rendszer. Ez azt jelenti, hogy a megfelelően gyors működéséhez szükség van a PHP verziófrissítésre. Sok tárhelyszolgáltatónál az 5.6-os változatot használja az alapbeállításában a tárhely, ami már elavultnak számít. Ha fogalmad sincs, hogy a te weboldalad hányas verzióval megy, akkor a WordPress honlapod admin felületére lépj be, menjt az Eszközök / Webhely egészség menüpontra, majd felül az Információ fülre kattintva, a Kiszolgáló blokkot lenyitva tudod ellenőrizni.
A WordPress számára az ideális mindig a WordPress követelmények figyelembevételével válasszunk tárhelyszolgáltatót. Az egyes PHP verziók frissítése is jelentős, akár 5-10%-os gyorsítást is hozhat, amit tovább javíthatunk a megfelelő (WordPress 5.5 fölött opcache) PHP modul engedélyezésével.
Hogyan frissítsem a PHP verziót? Ezt a tárhelyszolgáltatódtól kell kérned vagy kérdezned. Nagyon sokféle tárhely admin felület van, nem is beszélve az egyedi megoldásokról.
5. Megfelelő cache-elés, képoptimalizálás
A honlapok betöltési sebességén (és az értékelők pontszámain) sokat tud dobni egy jól beállított cache bővítményt. Ezek segítségével csökkenthetjük például az adatbázisunkra jutó terhelést és elérhetjük, hogy egyszerre több látogató, jobb betöltési sebességgel böngészhesse honlapunk. Azonban ehhez érteni is kell. Egy rosszul beállított cache akár több gondot okozhat, mint előnyt. Persze vannak olyan bővítmények, amik automatikusan ajánlanak beállítást.
Az ajánlottabb cache bővítmények:
- Swift Perfomance
- WP-Rocket
- WP Fastest Cache
- WP Super Cache
A weboldalak lassú működését sok esetben a túlméretezett képek okozzák. Ha rendszerint kép átméretezés vagy tömörítés nélkül töltesz fel képanyagokat, akkor azok szinte biztos, hogy lassítják a betöltést. Ideális esetben egy kép nem haladja meg a 200 Kbyte-ot. A képek optimalizálására is több lehetőségünk van. Mi magunk is kimentjük úgy, hogy már eleve kis méretben töltjük fel a honlapunkra. Ha nem akarsz a képtömörítéssel foglalkozni, akkor egy erre a célra kifejlesztett bővítményt is használhatsz. Feltéve persze, ha az oldalad nincs tele már amúgy is pluginokkal, mert akkor meg azok okoznak lassulást.
Néhány ajánlott képoptimalizáló bővítmény:
- ShortPixel Image Optimizer
- Compress JPEG & PNG images
- Smush – Lazy Load Images, Optimize & Compress Images
- Imagify – Image Optimization & Convert WebP
Igen, korábban arról volt szó, hogy minél kevesebb plugint használjunk. Mérlegelni kell. Aki rendszeresen tölt fel képeket, azok számára megéri a képoptimalizáló bővítmény folyamatos használata. Akik csak évente pár alkalommal, nekik azt tanácsolnám, hogy akkor telepítsék a bővítményt, amikor feltöltenek, utána kapcsoják ki és töröljék.
Tippek a WordPress gyorsítás terén
Most jöjjenek a megígért tippek, amikkel sokat javíthatsz a weboldalad sebességén, ha az alapok – tárhely, bővítménykezelés, sablon, PHP frissítés – rendben vannak. Mivel elsődlegesen az alapoknak kell rendben lenniük.
Az első és erősen ajánlott lépés a WordPress biztonsági mentés készítés, hogy probléma esetén legyen lehetőségünk a kiindulási állapotra visszaállni.
Gzip tömörítés
A Gzip egy tömörített fájltípus. Ideális esetben, amikor a látogatóid rákattintanak a weboldaladra, akkor ezt a Gzip tömörített fájlt töltik le, ami a kisebb adatmennyiség miatt sokkal gyorsabb kezelhetőséget tesz lehetővé. Ha nem tudod, hogy a te weblapodnál mi a helyzet ezen a fronton, akkor a cPanelen érdemes nézelődnöd. Ha esetleg nincs hozzáférésed a kezelőfelülethez, akkor pedig keresd fel a tárhely szolgáltatódat, remélhetőleg készségesen segítenek.
Gyorsítótárazás (Ez a cache)
Amikor egy látogató először lép a weboldaladra, akkor a böngészője automatikusan eltárol bizonyos adatokat. Ez azért nagyon jó, mert legközelebb már nem kell mindent lekérnie a szerverről, emiatt pedig sokkal gyorsabban töltődik be weblap. Ez azonban csak akkor történik így, ha megfelelően be van állítva a gyorsítótárazás. Ez ideális esetben szerver szinten érhető el a tárhelyszolgáltatóknál, de ha erre nincs lehetőség, akkor egy erre a célra kifejlesztett bővítménnyel, például a WP Fastest Cache pluginnal is jó eredményeket érhetsz el.
Adatbázis tisztítás
Végül, de nem utolsó sorban az adatbázis tisztítást szeretnénk ajánlani. A WordPress honlapok esetében a MySQL adatbázis tárolja a tartalmakat, ahol megfelelő karbantartás hiányában könnyen felhalmozódhat a virtuális szemét. Ez igazából nem az üzemeltetők hibája, már pusztán azzal is keletkeznek felesleges állományok, ha bejegyzéseket írunk vagy bővítményeket telepítünk. Az adatbázis tisztításra remekül használható a WP-Optimize plugin, ami mondhatni gombnyomásra távolítja el a szemetet.
Használjunk websafe betűtípust
Ezek a betűtípusok minden operációs rendszeren megtalálhatóak és nincs szükség arra, hogy külső forrásból kelljen betöltenie honlapunknak. Például a Google Fonts-ok használatát is érdemes mellőzni vagy legalább is limitálni. Itt mérlegelni kell a felhasználói élmény és sebesség arányát. A legegyszerűbb, ha minimalizáljuk a használt betűtípusokat.
Haladóbb tippek a sebesség optimalizálás terén
Lekérések számának csökkentése
Amennyire tudod, csökkentsd a szükséges css és js fájlok mennyiség. Ügyelj rá, hogy csak azokat töltsd be egy url-en, amik feltétlen szükségesek. Továbbá, ha a funkció ne kívánja meg, akkor a meghívások a láblécben, a forráskód vége felé történjen.
Használj szerveroldali cache-t
Többféle szerveroldali cache megoldás elérhető, főleg a jobb, minőségibb hosting szolgáltatóknál. Ezek helyes beállítása és használata, jelentős gyorsulást ad.
Domain szintű tűzfal
A kártékony robotok próbálkozásai fölöslegesen eszik a tárhelyünk, szerverünk erőforrásait. Ezeket már domain szinten, konkrétan a szerver elérése előtt érdemes szűrni. Így megelőzhető és elkerülhető, hogy a sokat lassító biztonsági bővítményeket használni kelljen.
OPcache és Lazyload
A WordPress 5.5 óta sokkal jobb opcache támogatás van alapértelmezetten a WP-s honlapokban, amik főként a sok adatot (bejegyzést, terméket) tároló oldalaknál ad érezhető javulást, gyorsulást. Továbbá van gyári LazyLoad megoldás is már. Ezeket érdemes használni és a PHP modult bekapcsolni, majd tesztelni.
Külső forrásokat proxy-zuk lokálba
Külső szerverről meghívott js-eket és css-eket töltsük lokálból, mivel biztosabb megoldás. Arra ügyeljünk, hogy a lokálban tárolt változat rendszeresen frissüljön.
Összefoglalva
A honlapod sebesség optimalizálása igényel egy kis idő- és energiaráfordítást a részedről, de hidd el, megéri foglalkoznod vele. Egy lassú weblapnak a 21. században már nincs helye az interneten, mert senki nem fog több időt várni az oldalbetöltésre, mint amit feltétlenül muszáj. Ez nagyjából 2-3 másodperc. Ha a te oldalad ennél lassabb, akkor fogadd meg a tippjeinket és meglátod, a látogatók, na meg a Google is hálásak lesznek érte! Ha nincs időd, energiád ezzel foglalkozni, akkor pedig érdemes szakember kezébe adni és úgy gondolni rá, mint egy befektetésre.
Ha mindezek után sem elég gyors a weblapod, akkor további lépéseket kell tenned a sebesség optimalizálás érdekében. Ne feledd, hogy senki sem – feltételezhetően te sem – szereted a lomha weblapokat, amiknek a betöltése egy örökkévalóságnak tűnik! Ezzel látogatókat, üzleti weboldal esetén vásárlókat, ügyfeleket veszítesz, s ez által jelentős bevételtől eshetsz el. A WordPress gyorsítás tehát mindenképpen megéri a fáradozást.
