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

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.

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 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 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 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 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.