Hogyan növeld weboldalad sebességét? – WP Rocket javasolt beállítások

Hiába a szemet gyönyörködtető dizájn és a legprofibb szöveg a weboldaladon, ha lassan töltődik be, akkor a felhasználó még a betöltődés előtt elhagyja azt. Szóval a weboldalad sebessége, vagyis az, hogy mennyi idő alatt tölt be, egy rendkívül fontos szempont. Mert ha te lassú vagy de a konkurensed gyors, akkor hozzá fog menni a vásárló. Megmutatom, hogy mik azok az alapvető eszközök, lehetőségek, melyekkel el tudod érni, hogy gyorsabban betöltődjön a weboldalad, és végigvesszük az általam egyik legjobbnak tartott weboldal sebesség optimalizáló bővítmény, a WP Rocket ajánlott beállításait

Videós formában itt tudod megtekinteni: 

Mérési eszközök: 

Alapvetően 2 mérési eszköz lesz a segítségedre a honlap sebesség optimalizálás során. 

GTmetrix

https://gtmetrix.com/

Érdemes beregisztrálnod a GTmetrixre, hiszen akkor tudsz majd választani városok közül, hogy honnan, melyik városból történjen a mérés. Nem ugyanolyan eredményeket fogsz kapni, hogyha egy Európai városból történik a mérés, mintha az Egyesült Államokból. Válaszd azt a várost, amely a legközelebb van a weboldal látogatóid többségéhez.

Ha magyar célközönségre lősz, akkor Londont javaslom, mivel ez az a város, amely a legközelebb van Magyarországhoz, és elérhető az ingyenes felhasználói fiókkal.

Így indítsd el a sebesség tesztet:

1. Írd be a weboldalad URL-jét az „Enter URL to Analyze” mezőbe,
2. bejelentkezett állapotban kattints az „Analysis Options” gombra,
3. a „Test URL in” legördülőben válaszd ki a kívánt várost,
4. és kattints az „Analyze” gombra.

(Az ingyenes verzióban elvileg hetente 50 mérést végezhetsz, azonban én az utóbbi időben azt tapasztaltam, hogy ezt lekorlátozták 5-re. Kijelentkezett állapotban bármennyit tesztelhetsz, csak épp más eredményeket fogsz kapni, mint a weboldal látogatóid, mivel az alapértelmezett teszt helyszín Kanada.)

A teszt lefutása fél-egy-két percet vesz igénybe.

Amikor ez megtörtént különféle értékeket láthatsz az oldal tetején.

A legelső, ami szembe tűnik, az egy nagy betű, ami igazából a weboldalad sebességének osztályzata. Ez lehet A, B, C, D, E, F. Az „A” osztályzat a legjobb, az „F” a legrosszabb.

A Performance és Structure százalékos értékek minél magasabbak, annál jobbak.

Tehát minél nagyobb százalékot érsz el itt a mérésnél, az értelemszerűen azt jelenti, hogy annál gyorsabb a weboldalad.

A Web Vitals alatt lévő 3 szám minél alacsonyabb, annál jobb.

Ezen kívül, ha kicsit lejjebb tekersz, akkor Summary, Performance és Structure füleken megtalálod (angol nyelven) részletezve, hogy a honlapodnak melyek azok a részei, amelyek rendben vannak sebességoptimalizálás szempontból, és melyek azok, amelyek fejlesztésre szorulnak. (A zölddel jelölt megállapítások rendben vannak, a sárga, narancs vagy piros jelölésűek viszont fejlesztésre szorulnak, minél pirosabb, annál inkább.)

A Waterfall fülön látod, hogy milyen fájloknak kellett betöltődni a weboldalad megjelenítéséhez. Ha itt kiugróan magas értéket találsz, azt érdemes megvizsgálni, tudod-e csökkenteni az elem méretét, vagy ha nem feltétlenül van rá szükség, akkor akár teljesen kivenni az oldalról.

Ha lejjebb görgetsz találhatsz angol nyelvű leírásokat, segítséget weboldalad sebességének javítására. 

Google Page Speed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=HU

Ezzel az eszközzel nem csak asztali számítógépre tudod megmérni ingyenesen a honlapod sebességét, hanem külön mobilra is.

A képernyőn bal oldalt fent tudsz váltogatni a mobilos és az asztali mérés között.

A Google sebesség mérője már nagyrészt magyar nyelvű tanácsokkal lát el weboldalad gyorsításához.

Böngészd át őket.

Mi a maximum sebesség, amit ki lehet hozni egy WordPress weboldalból?

Ha WordPress weboldalad van és page buildert (pl. Divi, Elementor) használsz, akkor nagyon nehéz GTmetrixben 80%, Page Speed Insights-ban mobilos nézetben pedig 50% fölé menni. 

Ezért, ha WordPresses oldallal sikerül ezeket az értékeket elérned – és nem különösen fontos számodra a weboldal betöltési sebessége –, akkor már elégedett lehetsz.

Leggyorsabb megoldás weboldalad sebességének javításához: WP Rocket

A legegyszerűbb megoldás amivel látványos sebesség növekedést tudsz elérni az az, hogy ha telepítesz egy sebesség optimalizáló bővítményt a weboldaladra. 

WordPress oldalakhoz tucatszámra vannak ilyen bővítmények, amit én ajánlok az a WP Rocket. Habár ez fizetős bővítmény, nagyon megéri az árát, sokat tud hozzáadni a weboldal sebességéhez.

A WP Rocket feltelepítése előtt mindenképp csinálj egy biztonsági mentést, mert elképzelhető, hogy bizonyos beállítások hatására szétesik a weboldalad. Miután feltelepítetted a bővítményt, a “Beállításokon” belül a WP Rocket menüpontban fogod megtalálni.

Most pedig lássuk az alapvető beállításokat: 

1. Cache (gyorsítótár)

Amikor először nyitsz meg egy weboldalt, akkor az ott található képek és egyéb weboldal fájlok (többek között kódfájlok) elraktározódnak ebben a gyorsítótárban. Amikor legközelebb megnyitod ugyanezen honlap ugyanezen aloldalát, akkor a böngésződ nem (feltétlen) a szerverről fogja meghívni újra a weboldal fájljait, hanem a cache-ből, a gyorsítótárból. Azáltal, hogy nem feltétlenül kell egy távoli szerverhez kapcsolódnia, hanem “helyileg”, a helyi számítógépedről (ami lehet a mobilod is) le tudja tölteni ezeket a fájlokat, azáltal időt nyer, rövidebb idő alatt tudja betölteni a weboldalt.

Azonban minden weboldalnak van egy cache törlési ideje, hogy mennyi idő után törli a weboldal cache-ét. Amikor ez megtörténik, utána a látogatók böngészői ismét a szerverről hívják meg a weboldal fájljait.
Egészen addig, amíg újra nem történik egy cache törlés. (Ezt megteheti a weboldal rendszere, vagy a felhasználó maga is tudja törölni a saját böngészője gyorsítótárát.)

Javasolt beállítások:

Enable caching for mobile devices: Ezen opció bepipálásával jóváhagyod, hogy mobilon is megtörténjen a cache-elés, tehát hogy a mobil eszközök böngészője eltárolja a weboldal fájlokat. (Ajánlott bekapcsolni.)

Separate cache files for mobile devices: Mivel manapság a legtöbb weboldal sablon és page builder reszponzív, ezért ezt nem kell pepipálnod (ha ilyet használsz). Ha viszont a honlapod rendelkezik kifejezetten mobilos verzióval, akkor érdemes bekapcsolnod.

User cache: Akkor van különösen jelentősége, hogyha vannak különféle felhasználók a weboldaladon. Akkor mindenképp érdemes bekapcsolnod ezt a WP Rocket beállítást.

Cache Lifespan: Azt határozza meg, hogy a WP Rocket milyen időközönként ürítse és töltse újra a cache-t (lásd fentebb).

2. File Optimization

Ez egy nagyon fontos pont.

Javasolt beállítások:

Minify HTML: Ezen opció bekapcsolásával a WP Rocket tömöríti a HTML fájlokat, ezáltal egy sokkal rövidebb karakterlánc jön létre a kódban, mint az eredeti kód, és így kisebb lesznek ez a fájlok. Ergo csökken a honlap betöltési ideje, nő a betöltési sebesség. (Ajánlott bekapcsolni.)

Optimize Google Fonts: Egy (vagy legalábbis kevesebb) szerver oldali kérésben egyesíti a külön-külön betűtípus kéréseket a WP Rocket. Lényegében a betűtípusok betöltésének sebességét optimalizálja. (Ajánlott bekapcsolni.)

Minify CSS files: Ugyanazt csinálja, mint a Minify HTML, csak a CSS fájlokkal (ők felelnek a megjelenésért), tömöríti őket. (Ajánlott bekapcsolni.)

Combine CSS files: CSS fájlokból lehet akár nagyon sok is. Ha ezt az opciót bepipálod, akkor a WP Rocket egyetlen fájlba egyesíti neked ezen fájlok tartalmát, így csökkentve a szerverre érkező HTTP kérések számát, azaz így csökkentve a weboldal betöltési idejét. (Ajánlott bekapcsolni.)

Optimize CSS delivery: Segíti, hogy a CSS formázások előbb megjelenjenek a felhasználó számára, ezáltal az érzékelt betöltési sebesség nő. (Ajánlott bekapcsolni.)

Remove jQuery Migrate: Nem érdemes bekapcsolnod abban az esetben, ha Divit vagy Elementort – illetve hasonló page buildert – használsz. A jQuery egy kódnyelv (ha nagyon pontosan akarunk lenni, akkor egy JavaScript nyelven íródott függvénykönyvtár). Az Elementor, Divi, és egyéb hasonló page builderek jellemzően szokták alkalmazni. Ezért, ha bekapcsolod ezt a funkciót, akkor a WP Rocket eltávolítja a jQuery alap kódját és bizonyos funkciók nem fognak működni ezekben a page builderekben. (Nem ajánlott bekapcsolni.)

Minify JavaScrit Files: Ugyanazt csinálja, mint a Minify HTML, csak a JavaScript fájlokkal, tömöríti őket. (Ajánlott bekapcsolni.)

Combine JavaScript Files: Ugyanazt csinálja, mint a Combine CSS files, csak JavaScript fájlokkal. Kombinálja őket egy (de legalábbis kevesebb) fájlba.

Load JavaScript deferred: Ezzel a beállítással a WP Rocket később tölti be azon JavaScript fájlokat, amelyek nem felelősek a megjelenésért, így javítva az észlelt betöltési időt. (Ajánlott bekapcsolni.)

Safe Mode for jQuery: Hasonlót csinál, mint a fenti funkció, csak a jQueryvel. (Ajánlott bekapcsolni.)

Minden egyes beállítás megváltoztatás után érdemes letesztelned, hogy minden rendben maradt a weboldaladon. Ez ezen oldal beállításaira különösen érvényes.

Még egyszer: Fontos, hogy előtte legyen biztonsági mentésed!

3. Media

Javasolt beállítások:

A WP Rocket LazyLoad funkciója lehetővé teszi, hogy amikor a felhasználó betölti az oldalt, akkor a “lejjebb lévő”, a képernyőn aktuálisan még nem látszódó képek, videók és iframe-ek (“keretek”) még ne töltsenek be, hanem csak akkor (vagy kicsivel előtte), amikor oda görget a felhasználó. Így tehát elsőre nem töltődik be 100%-osan az oldal, csak az a része amit a felhasználó lát. Ezáltal a weboldal betöltési sebessége jelentősen felgyorsul.

Enable for images: Engedélyezi a LazyLoad funkciót a képek számára. (Ajánlott bekapcsolni.)

Enable for iframes and videos: Engedélyezi a LazyLoad funkciót az iframe-ek és videók számára. (Ajánlott bekapcsolni.)

Replace YouTube iframe with preview image: Különösen segíti a weboldal betöltési sebességét, ha beágyazott YouTube videókat használasz a honlapodon. (Ajánlott bekapcsolni.)

Disable Emoji: Eltünteti az emojikat. Ha nem nagyon használsz emojikat, illetve nincs túl nagy jelentőségük, akkor célszerű bepipálni.

Disable WordPress embeds: Megakadályozza, hogy mások beágyazhassák (és ily módon lelophassák) a weboldalad tartalmát, és eltávolítja a WordPress beágyazásával kapcsolatos JavaScript kérelmeket, csökkentve ezzel a weboldalad szerverének terhelését.

Enable WebP caching: A WebP egy speciális képformátum, ami kifejezetten webre optimalizált, tehát nagyon szépen tömöríti a képeket. (Sokkal kisebb fájlméretet tudsz vele elérni látványos minőségromlás nélkül.) Ez a funkció engedélyezi, hogy a WP Rocket WebP képekkel szolgálja ki az erre alkalmas böngészőket (ma már a legtöbb böngésző ilyen). Érdemes megjegyezni, hogy a WP Rocket maga nem hozza létre ezeket a WebP képeket, ehhez külön, erre alkalmas bővítményre van szükség.

4. Preload

Activate Preloading: Ha ezt engedélyezed, akkor a WP Rocket létrehozza a gyorsítótárat, kezdve a kezdőlap linkjeivel, majd a megadott webhelytérképekkel (Activate Sitemap-based cache preloading), és készít egy előzetes betöltést (preload) az oldalról, ha:

• a Cache Lifespan opció (a Cache fülön) be van pipálva és lejárt az itt megadott idő,
• létrehozol vagy módosítasz egy oldalt (csak erre az adott oldalra vonatkozólag történik meg a preload),
• manuálisan törlöd a weboldal gyorsítótárát.

(Ajánlott bekapcsolni.)

Activate sitemap-based cache preloading: Ha ezt bepipálod, akkor a WP Rocket automatikusan észleli, hogy mely SEO bővítmény van feltelepítve a honlapodra (ezek a következők lehetnek, amit észlelni tud: Yoast SEO, All-in-one-SEO, Rank Math SEO, SEOPress). Ezután megjelenik az adott SEO bővítményhez tartozó jelölőnégyzet, amelyet bepipálva végrehajtja az előzetes töltést (preload) az adott bővítmény által generált webhelytérképen is. (Ajánlott bekapcsolni.)

5. CDN

A CDN (Content Delivery Network vagy Content Distribution Network) lényegében egy tartalomelosztó hálózat.

Részletesebben:

A weboldalad fájljai egy ahhoz hasonló háttértárolón vannak, mint amilyen a számítógéped winchestere. (Csak éppen ez a háttértároló sokkal, de sokkal nagyobb.) Ez a szerver, ahol a weboldalad ténylegesen, “fizikálisan” van. Ha a te tárhely szolgáltatód szervere mondjuk az USA-ban van (mert egy külföldi tárhelyszolgáltatót választottál), akkor az azt jelenti, hogyha valaki itt, Magyarországról megnyitja a weboldaladat, hozzá az adatoknak egészen az USA-ból kell eljutniuk. Az Egyesül Államok hozzánk egyik legkeletibb csücske, New York is uszkve 7000 km-re van tőlünk légvonalban. Baromi nagy távolság. Hatalmas utat kell megtenniük az adatoknak, és hiába az internet eszméletlen sebessége, ez akkor is extra időt igényel nekik.

Ezzel szemben, ha CDN-t használsz, az azt jelenti, hogy a világ több pontján vannak elhelyezve egyéb tároló szerverek, amelyek a központi (példánkban egy USA-beli) szerverről lemásolják az adatokat (a weboldal fájljait), és amikor egy weboldalt betöltenek, akkor innen történik a fájlok meghívása, ami már sokkal közelebb van fizikálisan.

Például lehet, hogy egy ilyen CDN pont Frankfurtban Magyarországhoz a legközelebb, akkor onnan történik a kiszolgálás. De ez máris csak 811 km légvonalban.

Ez tehát a CDN lényege és előnye.

Abban az esetben nincs különösebb jelentősége ennek a szolgáltatásnak, hogyha a te tárhelyszolgáltatód szervere Magyarországon van, és magyar a célközönséged.

Ha olyan tárhelyszolgáltatód van, ami alapvetően szolgáltat CDN-t, akkor ide, a CDN Name(s) mezőbe tudod beírni a CDN elérési útvonalát a WP Rocketben:

6. Heartbeat

Ha nem akarsz nagyon belemenni ebbe a témába technikailag, akkor a legegyszerűbb, amit tegyél meg, hogy bepipálod az itt lévő jelölőnégyzetet, lentebb pedig mindhárom opcióra “Reduce activity”-t állítasz.

A Heartbeat API kapcsolatot biztosít a valós idejű adatátvitelhez és a szerver és a böngésző közötti szinkronizáláshoz.

Például:

• Bejegyzések automatikus mentése szerkesztés közben.
• WordPress Vezérlőpulton történő értesítés
• Zárolási információ, amikor egy másik szerkesztő épp dolgozik egy bejegyzésen.
• Valós idejű adatok megjelenítése a Vezérlőpulton (pl. webshopok esetén)

Az API 15-60 másodpercenként lefuttat egy feladatsort, és ehhez használja az admin-ajax.php fájlt. Ez alapvetően hasznos, sok tárhelyszolgáltatónál az admin-ajax.php fájl túlzott használata magas processzor használatot, ezáltal túlterhelést eredményez a szerveren, ami akár a fiók (és így a weboldal) felfüggesztéséhez is vezethet.

A WP Rocket ezen funkciója azt hivatott szolgálni, hogy szabályozni tudjuk ezeket a kéréseket, megelőzve ezzel a túlterhelést, és így a leállást.

Használatához először is pipáld be a Control Heartbeat funkciót.

A következő lehetőségek közül tudsz választani szabályozás tekintetében:

• Do no limit: Ne csináljon semmit az API-val (ne szabályozza).
• Reduce activity: Csökkentse az aktivitást. (Ezzel az intervallumok percenként 1 találatról kétpercenként egy találatra csökkennek.) (Ajánlott beállítás.)
• Disable: Kapcsolja ki teljesen. (Az API teljes kikapcsolása hatással lehet a WordPress sablonjaira és egyéb bővítményeire. Ha esetleg emellett döntesz, akkor utána mindenképp tesztelj végig mindent, hogy megfelelően működik-e.)

A Behavior on backend beállítással az admin felületen történő hívásokat, a Behavior in post editor beállítással a bejegyzés szerkesztőben történő hívásokat, a Behavior in frontend beállítással a felhasználók által is látható felületen történő hívásokat tudod szabályozni.

Még egy eszköz a weboldal sebességének javítására

A képek, videók mérete erősen befolyásolja a weboldal betöltésének sebességét.

Minden egyes felesleges pixel tovább növeli a kép méretét, és minél nagyon egy képfájl mérete, annál lassabban fog betöltődni a kép maga is, és így természetesen az egész honlapod.

A teljes oldalszélességű képekre az 1920 pixel szélességet javaslom, mivel ez a legnagyobb monitor méret, ami elterjedt, amit sokan használnak. Minden más, kisebb méretű kép maximum akkora legyen, mint amekkorában ténylegesen használod.

Azon túl, hogy maga a kép felbontása rendben van, még úgy tudod csökkenteni magának a képfájlnak a méretét, ha tömöríted.

Amikor elmented a képfájlt, akkor célszerű 60%-os tömörítést alkalmaznod. Ez még szemmel nem annyira látható minőségromlást eredményez (sasszemű grafikusok lehet, hogy ezt is kiszúrják, de ők vannak kisebbségben, és jellemzően nem nekik készül a weboldal :)). Képeket tömöríteni tudsz például Photoshop-ban és Pixlr-ben.

A Pixlr egy ingyenes, online használható, Photoshop-hoz hasonló alkalmazás.

Amit még meg tudsz tenni a weboldal sebességének növelése érdekében az az, hogy mobil nézetben leveszel minden funkciót, ami nem feltétlenül szükséges, például animációt, beúszást, átváltozást.

Szívesen olvasnál még hasonlókról? Rendszeresen megjelenő hírleveleimben ilyen és egyéb, vállalkozással, online marketinggel, web-/landing oldal készítéssel kapcsolatos fontos tudnivalókat osztok meg. Ha szeretnéd kimaxolni a vállalkozásodban lévő potenciált, akkor iratkozz fel ezekre a hasznos levelekre!

Keresztnév

E-mail

Feliratkozom a hasznos levelekre!

Végszó

Ezen eszközök segítségével tudod optimalizálni weboldalad sebességét, annak érdekében, hogy ne menjenek el idő előtt a látogatóid, és így több bevételt tudj termelni honlapoddal.

Bízom benne, hogy minél többet kamatoztatni tudsz a fent felsoroltak közül és ezáltal a te weboldalad is szuper gyors lesz. 

Ha mélyebben érdekel a téma, szeretnél másokkal is beszélgetni erről, vagy kérdésed van hozzá, akkor lépj be a ProduktON! közösségbe Facebookon, ahol hozzád hasonló magyar kisvállalkozókkal beszélgethetsz, és ingyenesen kérdezhetsz tőlem weboldalas, marketinges szakmai témákban, és természetesen az én segítségemre is számíthatsz, mindezt egyelőre teljesen ingyenesen.

Ha komolyabb szakértői támogatásra lenne szükséged weboldalad gyorsításához, akkor vedd fel velem a kapcsolatot itt, és megbeszéljük a részleteket, hogy pontosan hogyan tudlak támogatni téged ebben!