# Betöltési sebesség és teljesítmény

> Hogyan mérd az oldalad sebességét, mit jelent a Lighthouse és a Core Web Vitals, és mit tehetsz a modulokkal és a tárhellyel a gyorsabb betöltésért.

A cél az, hogy a modulokkal készült oldal látványos és gyors is legyen. A Slider Revolution új kiadásai a látványos eszközök mellett a háttérben is gyorsítanak. Egy egyszerű teszt: több sablonmintát változtatás nélkül, alapértelmezett témával, gyorsítótár-bővítmény nélkül, olcsó tárhelyre tettek, és 95 és 98 közötti Lighthouse-pontszámot, valamint 3 másodperc alatti betöltést mértek. Vagyis bonyolult beállítás nélkül is elérhető jó eredmény. Az alábbi lépésekkel még tovább finomíthatsz.

## Mennyire legyen gyors az oldal?

A Google ajánlása szerint az oldal töltsön be 3 másodperc alatt. Ahogy a betöltési idő 1-ről 10 másodpercre nő, egyre több látogató lép ki, és egyre kevesebb vált vásárlóvá. A bosszankodás kb. 3 másodpercnél kezdődik, 10 másodpercnél már teljes. Ha az oldalad tényleg különleges, 4 másodperc még belefér.

A fő ok az, hogy a látogatók elégedettek legyenek. Emellett a Core Web Vitals nevű mérőszámcsoport a Google rangsorolásában is jelzés, de csak egy a sok közül: a minőségi, releváns tartalom marad a legfontosabb. Érdemes a pontszámokat minél jobbra vinni, de nem a többi szempont rovására.

## Hogyan mérj sebességet?

A jelentések pontszámai elvonhatják a figyelmet a lényegről: arról, hány ezredmásodperc múlva használható az oldal. A jelentések segítenek megérteni, mi történik, de a tényleges betöltési idő mindig előbbre való.

### A fejlesztői eszközök Hálózat füle

Az asztali böngészők (Firefox, Safari, minden Chromium-alapú böngésző) fejlesztői eszközeinek **Network** (Hálózat) füle a legjobb mérőeszköz.

1. Nyisd meg a fejlesztői eszközöket, és válts a Hálózat fülre.
2. Jelöld be a gyorsítótár kikapcsolását.
3. Töltsd be a tesztelendő oldalt.
4. A panel alján olvasd le a második értéket, a **Load** (Betöltés) időt: ennyi idő alatt készült el mindenestül, stílusokkal és képekkel együtt az oldal.

Gyakran a legjobb módszer, ha az oldalról készítesz egy helyi (offline) másolatot, és a fejlesztői eszközökkel lassítást (throttling) állítasz be rajta a különböző kapcsolatminőségek szimulálására. Csak online tesztelve nem tudod megkülönböztetni az oldal hibáit a tárhely vagy az internetkapcsolat lassulásától.

### Lighthouse és PageSpeed Insights

A Google PageSpeed Insights eredményei a Lighthouse eszközből származnak, amely a Chrome fejlesztői eszközeiben közvetlenül is elérhető. Chrome-ban (vagy más Chromium-alapú böngészőben) nyisd meg a fejlesztői eszközöket, nyisd meg a **Lighthouse** fület, és futtasd le a **Performance** jelentést **Desktop** vagy **Mobile** módban. A felül látható mutatók a Core Web Vitals értékei.

A Lighthouse-t általában jobb közvetlenül a fejlesztői eszközökben használni, mert az eredmények egyenletesebbek, és offline is futtathatod, így a saját oldalad teljesítményét méred, a tárhelytől és a kapcsolattól függetlenül.

Két tipp:

- Tesztelés közben válaszd le (pop out) a fejlesztői eszközöket, hogy külön ablakban lebegjenek. Dokkolt állapotban a böngésző nehezebben igazodik a tesztelt elrendezésekhez, és ugyanarra az oldalra rosszabb pontszám jöhet ki.
- A tesztet mindig futtasd többször. Előfordult, hogy ugyanazon feltételek mellett a pontszám 39-ről 90-re ugrott.

## Mennyire számítson a Lighthouse mobilpontszáma?

A PageSpeed Insights első füle a **Mobile** teszt, amely erős lassítás mellett fut. Ha egy gyorsnak hitt oldal alacsony pontot kap, de a **Desktop** fülön jó eredményt látsz, valószínűleg a lassítás a magyarázat. Az alacsony mobilpontszám nagyon gyakori: a Google saját oldalai sem érnek el jó értéket, még a Core Web Vitals besorolását magyarázó dokumentációs oldal is a „fejlesztésre szorul” kategóriába esik, és egy üres, csak „Blank Page” szöveget tartalmazó WordPress-oldal is csak 94 pontot kapott.

A mobilteszt a következőt emulálja:

- **Processzor:** egy 2016-os, 1,5 GHz-es Moto G4 típusú telefont. Összehasonlításul: a 2021-es népszerű telefonok leggyorsabb magja 2,2 és 3,1 GHz között jár. A tesztelt Moto G4 már a mai webes tartalmakkal (például egy 144p-s YouTube-videó) is akadozik.
- **Kapcsolat:** 1,6 Mb/s letöltési sebességet. A mobilhálózatok átlagos sebessége 2020-ban Irak kivételével minden országban meghaladta ezt (USA: 26,7 Mb/s, Németország: 28,7, Szingapúr: 47,5, Kanada: 59,0 Mb/s).

Érdemes erre a szélsőséges esetre is optimalizálni, mert ha ezt a tesztet kiválóan teljesíted, mindenki jó élményt kap. Az oldal egész stratégiáját viszont nem kell erre a tesztre építeni, és nem kell jelentős visszalépéseket tenni a pontszámért, hiszen a látogatóid többsége ennél jóval erősebb eszközt és kapcsolatot használ. A cél az egyensúly: rossz körülmények között is jó élmény, de nem a legrosszabb körülményekre szabott oldal.

### Tesztelés a mai körülményeknek megfelelően

Három módszer van:

1. **Sebességlassítás.** A Chrome fejlesztői eszközeiben egyéni lassítási profilt hozhatsz létre. Jó gyakorlat egy 7,2 Mb/s (a 2017-es globális átlag) és egy 5,6 Mb/s (a 2015-ös átlag) profil. A tényleges globális mobilátlag 2021-ben 55 Mb/s, de a régi értékekkel bőven biztonsági tartalékot építesz.
2. **Processzorlassítás.** A Chrome fejlesztői eszközei jelenleg csak 4x és 6x lassítást kínálnak. A 4x lassítás nagyjából egy tízéves telefon (például iPhone 4S) sebességére viszi a gépet. A processzor lassítását kísérleti Chrome-jelzővel (`Emulation.setCPUThrottlingRate`) vagy szálkorlátozó eszközzel (például cpulimit) is megpróbálhatod. A tapasztalat szerint a lassabb processzor jól közelíthető egy kicsit erősebb sebességlassítással, a fenti 5,6 és 7,2 Mb/s-os profilokkal: ha az oldalad ezeken jól fut, valószínűleg minden rendben van.
3. **Valódi eszköz.** Töltsd be az oldalt a saját telefonodon, és nézd meg, hogyan fut.

## Három lépés a gyorsabb modulokért

### 1. lépés: az SR7 optimalizálása

Az SR7 optimalizált inicializálási folyamatot használ, amely segít a moduloknak simán és gyorsan betöltődni. Az alapértelmezett beállítások a legtöbb esetben jók. Ha finomhangolnád, a beállítások a vezérlőpult felső sávjában a **Beállítások** gombbal nyíló globális beállítások **Optimalizálás** fülén vannak.

![Az Optimalizálás fül a globális beállításokban](./kepek/globalis-optimalizalas.webp)

*Az Optimalizálás fül a globális beállításokban* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider)

A képen a modulbetöltés, a PageSpeed-mérés és a képoptimalizálás beállításai látszanak. Az egyes beállítások leírása a [Globális beállítások](https://hub.hellowp.io/hu/plugins/revslider/globalis-beallitasok/) fejezetben van.

### 2. lépés: képek mérete

Az SR7 a képeket automatikusan optimalizálja (átméretezés, tömörítés, formátumváltás), ezért a korábbi verziók külön fájlméret-optimalizáló eszköze már nincs benne. A hatása azonban jól mutatja, mit érdemes figyelni: egy három, változtatás nélkül feltöltött képből álló demóslider 2578 KB letöltéssel, 5,6 Mb/s lassítással 3,00 másodperc alatt töltött be, és bár a Lighthouse 99 pontot adott, az audit jelezte az „enormous network payloads” (túl nagy hálózati terhelés) problémát. Kisebb képváltozatokkal a letöltés 957 KB-ra, a betöltés 1,59 másodpercre csökkent, és a jelzés is eltűnt. Vagyis egy pontszám önmagában nem elég az optimalizáláshoz, és a képméret a leggyorsabb módja a nyerésnek. A képoptimalizálás beállításairól a [Képoptimalizálás](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-kepoptimalizalas/) fejezetben olvashatsz.

### 3. lépés: a „lejjebb tolás” trükk

Ha elsősorban a Lighthouse-pontszám számít, egy trükk segít: told lejjebb az oldalon a modult. A Core Web Vitals több értéke a nézetablakban elsőként megjelenő tartalomtól függ. Ha a modul fölé könnyű elemeket (fejléc, menü, szöveg) teszel, azokat dolgozza fel először a böngésző, és a pontszám nő. Például egy 90 pontos oldalon néhány bekezdés és címsor a slider fölé 95 pontra emelte az eredményt, miközben a tényleges betöltési idő alig változott (1,75 és 1,79 másodperc). Ez tehát nem gyorsít, csak a pontszámot javítja, ezért akkor használd, ha a Core Web Vitals értékek kiemelten fontosak.

## A modulon kívüli gyorsítók

### Gyors téma

A témák teljesítménye nagyon eltérő lehet. Mivel a tartalom betöltése 1-2 másodpercet visz el, a témának tartalom nélkül nagyjából 1-2 másodperc alatt kell betöltenie. A kiválasztott téma demóoldalát próbáld ki: mérd a betöltést és a Lighthouse-pontszámot. A legtöbb demóban nincs üres oldal, de van tipográfiai bemutató oldal, amely a legkevesebb tartalmat hordozza, így ez jó alapmérés. Ha nem találsz gyors témát, használhatod az alapértelmezett Twenty Twenty-One témát, és testreszabhatod a Testreszabóval. Vagy megkerülheted a témát a Slider Revolution üres oldal sablonjával, és a tartalmat modulokból építheted fel.

### Gyors tárhely

Négy szempontot érdemes nézni:

- **Beépített CDN.** A tartalomszolgáltató hálózat (CDN) a világ több pontján lévő szerverek rendszere: az oldal másolata mindegyiken megvan, a látogató a hozzá legközelebbi szerverről kapja. Külső CDN (például Cloudflare) bármely tárhellyel használható, de a tárhelybe épített szorosabban integrálódik.
- **Szerveroldali gyorsítótár és tömörítés.** Jó megoldás például az NGINX-alapú gyorsítótár, tömörítésnél pedig a gzip. A [Szerver- és böngészőtömörítés](https://hub.hellowp.io/hu/plugins/revslider/teljesitmeny-hibaelharitas-tomorites/) fejezetben bővebben olvashatsz róla.
- **WordPressre szabott infrastruktúra.** A megosztott tárhelyen is lehet gyors oldalt üzemeltetni, de általában könnyebb az eredményt elérni a „managed” (kezelt) WordPress-tárhellyel, amely a WordPress minden infrastruktúra-, frissítési és biztonsági feladatát elvégzi.
- **Biztonság.** Ha a tárhely nem védi az oldalt a robotoktól, azok elhasználhatják az oldalnak szánt memória és processzoridő jelentős részét, és a valódi látogatók lassú oldalt kapnak, sőt, elég nagy roham az oldalt le is bénítja. Keress olyan szolgáltatót, amely leírja, mit tesz a rosszindulatú robotok ellen, és statisztikát ad az eredményeiről.

## Opcionális extrák

Ezek hatása a körülményeidtől függ: néha nagy gyorsulás, néha kicsit rosszabb eredmény, néha semmi változás. Mivel ingyen kipróbálhatók, érdemes tesztelni őket.

- **WebP képformátum.** A Lighthouse javasolhatja a „Serve images in next-gen format” (korszerű képformátum használata) lépést, például a WebP-t, amely a JPEG, PNG és GIF képek helyett használható. Nem mindig kisebb a fájl: egy 380 képes tömeges optimalizálás (ingyenes EWWW Image Optimizer) összesen 720,92 KB-ot takarított meg. Néhány száz képnél ez kevés, néhány ezernél már sok. Kézzel is újraexportálhatsz képeket olyan szerkesztővel, amely WebP-exportot tud (Krita, GIMP, Photoshop WebP-bővítménnyel).
- **Gyorsítótár-bővítmény.** A vizsgálatok szerint a Slider Revolution tartalmának sebességére nincs jelentős hatása, de az oldal egészének működéséhez és a szerver terhelésének csökkentéséhez szinte biztosan hasznos. Ingyenes lehetőség például a W3 Total Cache, a WP Super Cache és a LiteSpeed Cache; fizetős például a WP Rocket és a Hummingbird. A WP Rocket beállítása a modulok mellett a [WP Rocket kompatibilitás](https://hub.hellowp.io/hu/plugins/revslider/teljesitmeny-hibaelharitas-wp-rocket/) fejezetben van.
- **Tömeges képoptimalizálók.** Az átméretezésen és a WebP-átalakításon túl metaadatot is eltávolíthatnak, és egyesek CDN-en át szolgálnak ki. Ingyenes példák: EWWW Image Optimizer, Imagify, WebP Express, Smush.