A WordPress weboldal gyorsítás esszenciálisan fontos az online jelenléted szempontjából. A lassú betöltési idő növeli a kilépési arányt, csökkenti az átalakítási arányt, és általában rossz felhasználói élményt eredményez.
Ezen túlmenően a Google az oldal sebességét a SEO rangsorolási tényezők között használja, tehát egy lassú WordPress weboldal ronthatja a marketing erőfeszítéseidet is.
Az idő, amit a betöltésnél megspórolsz, hatalmas előnyöket hoz majd a weboldalad sikere szempontjából.
A betöltési idő mire vonatkozik?
Amikor az emberek a WordPress weboldal betöltési idejéről beszélnek, gyakran egyetlen szám adatra gondolnak.
Ha a weboldalad betöltődési sebességét tesztelő eszköz azt mondja, hogy a weboldalad 2 másodperc alatt betöltődik, akkor minden látogató 2 másodperces oldalbetöltési időt fog tapasztalni?
Sajnos a válasz nem.
A valóságban az emberek teljesen különböző körülmények között látogathatják meg a weboldaladat:
- Különböző eszközökről, mint például egy csúcskategóriás Macbook Pro vagy egy mezei Android okostelefon.
- Különböző kapcsolati sebességekkel, mint például egy roppant gyors vezetékes kapcsolat vagy ingyenes wifi hálózat.
- Különböző helyekről, mint például Budapest vagy isten háta mögötti farm.
Ha valaki egy Android telefonon és lassú 4G kapcsolaton keresztül látogatja meg a weboldaladat, akkor azt fogja érezni, hogy a weboldalad lassabban töltődik be, mint az, aki egy vadonatúj Macbook Prot és egy nagyon gyors vezetékes kapcsolatot használ.
Ennek részben a kapcsolati sebesség különbség az oka, részben az, hogy egy Android telefonnak sokkal több időre van szüksége a weboldalad JavaScript feldolgozásához, mint egy erőteljes Macbook Pro.
Na de…
Mi számít gyors betöltési időnek?
Nincs konkrét szám, de a legtöbb jelenlegi adat alapján kijelenthetjük, hogy3 másodpercen alatt érdemes maradni:
- AGoogle telefonok esetében 3 másodpercnél rövidebb időt javasol.
- APingdom szerint „amint az oldalbetöltési idő meghaladja a 3 másodpercet, a kilépési arány drasztikusan megnő”.
- ASection.io mérései alapján az oldalbetöltési idő növekedésével együtt nő a kilépési arány és csökken az oldalmegtekintések száma.
A Google jutalmazza azokat a weboldalakat, amelyek jó felhasználói élményt nyújtanak. Ehhez figyelembe veszi az oldalbetöltési időt és a mobilbarát kialakítást is a keresési találatok rangsorolásakor.
Az átlagos weboldal betöltési ideje 2,5 másodperc asztali gépeken és 8,6 másodperc mobil eszközökön. Általában a weboldalak mobil esetén átlagosan 70,9%-kal hosszabb időt vesznek igénybe a betöltéshez, mint asztali gépeken.
Hogyan mérheted pontosan a WordPress weboldalad sebességét
Ahhoz, hogy a WordPress gyorsítással kapcsolatban fejlesztéseket hajthass végre, először meg kell értened a weboldalad jelenlegi oldalbetöltési idejét.
Ehhez ajánljuk aGTmetrix vagy aGoogle Pagespeed használatát. Menjünk végig mindkettőn.
Először a GTmetrix. Egyszerűen csak add meg a weboldalad URL-jét, és a segédeszköz részletes információkat nyújt arról, mennyi ideig tart az oldal betöltése.
Ne koncentrálj túlságosan az absztrakt pontszámokra, amiket néhány eszköz ad. Bár ezek a pontszámok hasznosak lehetnek problémák diagnosztizálásához, az egyetlen valóban fontos dolog a weboldalad tényleges oldalbetöltési ideje.
Végezz egy vízesés elemzést az HTTP-kérésekről
Ha van kedved a saját magad kísérletezéséhez, nagyon ajánlott kicsit tanulmányozni, mi történik a háttérben, amikor az oldalad betöltődik. Ehhez a legjobb módszer a vízesés elemzés.
A vízesés elemzés minden egyes HTTP-kérést megmutat az oldalon.
Amikor valaki meglátogatja a weboldalad, a böngészőnek minden olyan erőforrást le kell kérnie, amire az oldal betöltéséhez szüksége van.
Pár példa:
- Minden egyes kép egy külön HTTP-kérés.
- Minden CSS fájl egy HTTP-kérés.
- Minden script egy HTTP-kérés (beleértve a külső scripteket, mint a Google Fonts vagy Analytics).
Minden kérés más-más ideig tart. Például egy képért tett HTTP-kérés akár 500 miliszekundumot (ms) is igénybe vehet, míg egy kis méretű script betöltése mondjuk csak 50 ms-t vesz igénybe.
Emellett ezeket a kéréseket különböző sorrendben töltik be. A böngésző, mint egy könyvet, fentről lefelé olvassa a weboldal kódját, és ahogy találkozik különböző elemekkel, úgy kéri be azokat.
A vízesés elemzés segítségével megtudhatod:
- Hány HTTP-kérés szükséges egy oldalhoz.
- Milyen sorrendben történnek ezek az HTTP-kérések.
- Mennyi ideig tart az egyes HTTP-kérések betöltése.
Hogyan használd a vízesés elemzést
Egy vízesés elemzés futtatásához javasoljuk a korábban említett GTmetrix eszközt, mert rendelkezik egy igazán szép felülettel.
Add meg a GTmetrixben azt az oldalt, amelyet elemezni szeretnél. Majd a eredmények betöltése után kattints aWaterfall fülre.
Hogyan használd a vízesés elemzést? Először is, minden sor a táblázatban egyedi kérést jelöl.
Ahhoz, hogy lásd, honnan érkezik egy kérés, vidd a kurzort a URL oszlop elemei fölé. Ezután nézd meg az URL-t, amely megmutatja, honnan jön pontosan az erőforrás. Ilyen lehet például: “https://www.google-analytics.com/analytics.js” vagy “https://domainneved.hu/wp-content/uploads/2023/06/logo.png”.
Következő lépésként a Timeline oszlopban nézd meg, mennyi ideig tart az egyes kérések betöltése.
Különös figyelmet kell fordítani azokra a kérésekre, amelyek a legtovább tartanak, mert vannak a legnagyobb hatással az oldalbetöltési időre. Ezért olyan fontos az képek optimalizálása!
Miután átnézted az összes kérést, sokkal pontosabb képet kapsz arról, mi lassítja le a weboldaladat.
Most eljött az idő, hogy javítsunk rajta.
De először nézzük meg a Google PageSpeed Insights használatát is. Először gépeld be a weboldalad URL-jét, majd nyomj egy entert. Várj néhány másodpercet, amíg elvégzi a vizsgálatot.
Amikor elkészült, látni fogod az eredményeket. Az alábbi példában eléggé rossz eredményt kaptunk!
Ha lefelé görgetsz, több részletes eredményt láthatsz, valamint néhány javaslatot az egyes mérőszámok javítására.
Legjobb módszerek a WordPress weboldalad gyorsításához
Most, hogy tudod, hogyan mérheted a weboldal sebességét, ugorjunk közvetlenül a módszerekre! Íme a legjobb módszerek a WordPress weboldal sebességének felgyorsítására.
1. Válassz lightweight WordPress sablont alapnak
Az útmutatónk minden lépése segít felgyorsítani a WordPresst. De mielőtt megvalósítanád őket, fontos, hogy megbizonyosodj róla, hogy megfelelő alapokkal rendelkezel.
Egy WordPress weboldalon a sablonok jelentik az alapokat. A sablonod jelentős szerepet játszik a weboldalad oldalbetöltési idejében, ezért fontos, hogy válassz egy gyorsan betöltő sablont, ami sikeres alapot teremt számodra.
2. Használj magas teljesítményű WordPress tárhelyszolgáltatást
Az összes többi lépés ezen a listán segíthet a WordPress weboldal gyorsításában, de a tárhelyed még mindig az egyik legfontosabb tényező a gyors betöltődés érdekében. Ezért ez a 2. lépés.
Ha a tárhelyed lassú, akkor semmiféle teljesítményoptimalizálás nem fogja lehetővé tenni a gyors betöltést.
Miért a Tárhely.Eu a legjobb választás és miért ezt választja a legtöbb weboldal-tulajdonos Magyarországon?
- Mert páratlan csúcstechnológiánk, erőforrásaink és megoldásaink exkluzív lehetőséget nyújtanak ügyfeleinknek weboldalaik gyorsítására.
- Mert egyedülálló optimalizáló és gyorsító rendszereink, szakértő csapatunk 10.000+ weboldal gyorsításában nyújtott már segítséget.
- Robosztus erőforrásokkal még a kisebb tárhely csomagokhoz is komoly erőforrásokat biztosítunk.
3. Optimalizáld a WordPress képeidet
A képek teszik ki a jelentős részét egy weboldal tartalom méretének, éppen ezért nagy előnyt jelent, ha olyan módot találsz, amellyel minőségromlás nélkül tudod csökkenteni a méretüket.
Sok WordPress felhasználó gondolkodás nélkül tölti fel az akár 3 MB-nál vagy 3000px-nél is nagyobb képeket. Ez azt jelenti, hogy a weboldalad nagyobb fájlokat tölt be, mint amire valójában szükség lenne. Ez a WordPress weboldal gyorsítás szöveg ellentéteként jelentősen lelassítja az oldal betöltési idejét.
Két fő része van a képek optimalizálásának:
Először át kell méretezned a kép méreteit.
A legtöbb WordPress sablonnak van egy “tartalomterülete”, amely durván 1000-1500px széles szokott lenni. Általában olyan képet érdemes feltölteni, amely fele olyan széles, de biztosan nem haladja meg a tartalomterület szélességét.
Ha feltöltesz egy 3000px széles képet, semmilyen előnyét nem fogod tudni élvezni, mert a sablonod úgyis le fogja méretezni. Gyakorlatilag feleslegesen növeled a weboldalad tartalom méretét.
Ezt javíthatod úgy, hogy automatikusan átméretezed a képeket bizonyos maximális méretekhez, amelyek a sablonod alapján vannak meghatározva.
Másodszor pedig van a képtömörítés.
A képtömörítés tovább csökkenti a képek fájlméretét (MB) anélkül, hogy befolyásolná a méreteiket (szélesség-magasság). Két fajtája van a tömörítésnek:
- Veszteséges – Nagyobb mértékű fájlméret-csökkentéssel, de kisebb minőségveszteséggel jár.
- Veszteségmentes – Kisebb mértékű fájlméret-csökkentés, de minőségvesztés nélkül.
Ha fotózás vagy más olyan szakterületen dolgozol, ahol a képminőség rendkívül fontos, valószínűleg a veszteségmentes tömörítést választod. Egyébként a legtöbb weboldalan a veszteséges tömörítés is jó választás lehet, mivel az emberi szem nem vesz észre túl nagy különbséget.
Egy WordPress képtömörítő bővítménnyel ez egyszerűen megvalósítható. Fontos megérteni a képtömörítés működését a sok képet tartalmazó weboldalakon, mert enélkül lassabb lesz a weboldalad.
Jelentős segítség lehet az is, ha a megfelelő képformátumot választod. Itt jön képbe a WebP formátum. A WebP olyan, mint egy képfeldolgozó zseni: képes jelentősen csökkenteni a fájlméretet anélkül, hogy a képminőség rovására menne. Ez a formátum akár 25-34%-kal kisebb fájlméretet eredményez, mint a JPEG, és még átlátszóságot is támogat, amit eddig csak a PNG tudott.
Van két remek bővítmény, amellyel automatikusan optimalizálhatod a képeket a WordPress-ben
- Optimole
- ShortPixel Adaptive Images (ez eltér az alap ShortPixel bővítménytől, de az is jó választás).
Az új és régi képek automatikus optimalizálásán felül ezek a bővítmények olyan további funkciókkal is rendelkeznek, mint:
- A látogatók eszközéhez dinamikusan igazított méretű képet szolgáltatnak. Ez azt jelenti, hogy ha valaki okostelefonon böngészik, akkor alacsonyabb felbontású képet kap, mint valaki, aki egy nagy felbontású képernyővel rendelkező laptopon böngészik.
- Egy globális “tartalomszállító” hálózatról (CDN) szolgáltatják a képeket. Ez felgyorsítja a oldalbetöltési időt. Az Optimole az Amazon CloudFront-ot használja, míg a ShortPixel nem teszi közzé, milyen infrastruktúrát használ.
- Úgynevezett “lazy load” módon töltik be a képeket. Ez felgyorsítja az érzékelt betöltési időt, mivel a látható tartomány alatt elhelyezkedő képeket csak akkor tölti be, amikor a felhasználó elkezd lefelé görgetni. A “látható tartomány alatt” olyan képeket értünk, amelyek nem azonnal láthatóak, amikor egy felhasználó egy oldalra érkezik. Azaz a felhasználónak le kell görgetnie, hogy megnézze őket.
Hogyan állítsd be az Optimole-t
Mindkét bővítmény remek, de ebben a bemutatóban az Optimole-t fogjuk használni, mert az ingyenes verzió működése miatt sokkal elérhetőbb a legtöbb WordPress felhasználó számára.
Az Optimole ingyenes verziója lehetővé teszi a korlátlan kép optimalizálását havonta 5000 látogatóig. A jó hír az, hogy még akkor is, ha egy látogató több oldalt is megtekint, csak egy látogatásként számít.
A következő lépésekkel kezdjük:
- Telepítsd és aktiváld az ingyenes Optimole bővítményt.
- Kövesd a bővítmény utasításait, és regisztrálj egy ingyenes fiókot. Kapni fogsz egy e-mailt egy API-kulccsal, amire szükséged lesz az aktiváláshoz.
Ezt másold ki, majd illeszd be az API-kulcs mezőbe a WordPress vezérlőpulton. - Kattints a „Csatlakozás az OptiMole szolgáltatáshoz” gombra.
Egy sikeres üzenetet kell látnod, ami jelzi, hogy a weboldalad csatlakoztatva van.
Az Optimole most automatikusan optimalizálni fogja mind az új, mind a régi képeket, és beépített CDN-jén keresztül szolgálja majd ki őket.
Ha meg szeretnéd változtatni a tömörítési szintet vagy más beállításokat, menj a beállítások fülre, majd kattints a Haladó lehetőségre:
És ennyi! A képeid most optimalizáltak.
4. Telepíts egy oldaloptimalizáló bővítményt
Másik kiváló módszer a WordPress weboldal gyorsításához az oldaloptimalizáló bővítmények alkalmazása. Számos különböző bővítmény áll rendelkezésre, mind fizetős, mind ingyenes változatban.
Talán az egyik legjobb fizetős bővítmény aWP Rocket. Van benne oldalgyorsító (cache), JS és CSS fájl minimalizáló, Gzip tömörítés, “lazy load” és még sok más. Ennek a díja évente 59 dollár egyetlen weboldalra.
Ha ingyenes bővítményt szeretnél használni, érdemes kipróbálni aW3 Total Cache-t. Ingyenesen használható, és működik bármilyen típusú webtárhelyen.
Ennek a bővítménynek is a funkciói közé tartoznak az alábbiak.
Oldal gyorsítótár
A W3 Total Cache automatikusan gyorsítótárazza (cache-eli) az oldalakat, bejegyzéseket, keresési eredményeket és más elemeket. Ezáltal gyorsabban fognak betöltődni.
Ha a tárhelyed támogatja, bekapcsolhatod az objektum gyorsítótárazást is a további optimalizálás érdekében.
JS és CSS fájlok minimalizálása
A bővítmény minimalizálja a JavaScript és CSS fájlokat, ezáltal kisebb lesz a méretük, és kevesebb helyet foglalnak a weboldaladon. Ez csökkenti az oldal betöltési idejét.
Gzip tömörítés engedélyezése
A Gzip tömöríti a weboldalakat és stíluslapokat, így az egész weboldal mérete sokkal kisebb lesz. Ez a gyakorlatban általánosan ajánlott.
Ez a beállítás alapértelmezetten engedélyezve van a W3 Total Cache-ben, de ha ellenőrizni szeretnéd, akkor a Teljesítmény > Általános beállítások alatt található, a Böngésző gyorsítótár menüpont alatt.
Lazy load, más néven késleltetett betöltés használata
A lazy load olyan folyamat, amely során a képek és tartalmak csak akkor töltődnek be, amikor a felhasználó lefelé görget a lap egy adott részére. Lazy load nélkül az egész oldal betöltődik, még akkor is, ha a felhasználó az első bekezdés elolvasása után bezárja a lapot.
Alapértelmezetten a legújabb WordPress verziókban engedélyezve van ez a beállítás. Azonban még mindig érdemes lehet a W3 Total Cache használata, nézzük, hol lehet bekapcsolni.
A W3 Total Cache-ban a lazy load beállításait a Teljesítmény > Felhasználói élmény menüpont alatt találod. A bekapcsoláshoz prémium fiókra lesz szükséged a W3 Total Cache-ben.
Query String-ek eltávolítása
A query string egy konkrét erőforrást kérdez le a tárhelyről egy URL-en keresztül. Minél több lekérdezést tartalmaz egy weboldal, annál lassabban fog betöltődni.
Ha egy URL-ben megjelenik egy kérdőjel (?), akkor általában egy query string következik.
Alapértelmezetten ez a beállítás nincs engedélyezve. Az engedélyezéséhez menj a Teljesítmény > Böngésző gyorsítótár menüpont alá a WordPress oldalsávon. Görgess le a “Query string-ek eltávolítása a statikus erőforrásokból” lehetőségig.
Hogyan alkalmazd az oldal gyorsítótárazást a WordPressben
A gyorsítótárazás bekapcsolásához a W3 Total Cache-ben menj a Teljesítmény > Általános beállítások menüpont alá a WordPress oldalsávon.
Görgess le a oldal gyorsítótár részhez, és pipáld be a jelölőnégyzetet a bekapcsoláshoz.
Azonban légy óvatos az oldal gyorsítótárazással, ha dinamikus oldalad van. A gyorsítótárazás felülírhatja a megjelenítendő tartalmat, és lehet, hogy csak többedik frissítésre jelenik meg a helyes tartalom, vagy csak a cache törlése után.
5. Használd a legfrissebb PHP verziót
A WordPress weboldal gyorsításához tudnod kell, hogy a PHP az a programnyelv, amin a WordPress motorja működik. Fontos, hogy mindig a legfrissebb PHP verziót használd, mivel az újabb verziók hatékonyabbak és biztonságosabbak, és ezáltal gyorsabbá teszik a weboldaladat.
Általában a tárhelyszolgáltató kezeli a PHP verziót és frissíti azt. Azonban érdemes ellenőrizni, hogy milyen verzió van telepítve.
A PHP verzió gyors ellenőrzéséhez menj a WordPress oldalsávban az Eszközök > weboldal állapota menüpontra. Ezután kattints az Információ fülre.
Görgess le és keresd meg a Szerver fület. Ott megtalálod a PHP verziót.
Ha régebbi verziót használsz, és frissíteni szeretnéd, akkor többféle lehetőséged is van, hogy ezt megtedd. Megkérhet a tárhelyszolgáltatódat, vagy magad is elvégezheted a frissítést a cPanelen keresztül.
Végszó
Ezek voltak az alap beállítási lehetőségek a WordPress weboldal gyorsításához. Következő posztunkban a haladó beállításokat vesszük sorra.
Ha úgy érzed, hogy ezek a lépések túl bonyolultak, akkor van egy jó hírünk! Nem kell atomfizikusnak lenned ahhoz, hogy optimalizáld és gyorsítsd a WordPress weboldalad. Nálunk, a Tárhely.eu-nál, létrehoztunk egy optimalizáló és gyorsító rendszert, ami segít a fent leírtakat – és még sok mást – egyszerűen, néhány kattintással megvalósítani. Próbáld ki, és tapasztald meg milyen, amikor néhány perc alatt a legjobb állapotba optimalizálod a weboldaladat!