Mire használhatod a Lighthouse-t? Mit mutatnak meg az egyes mérőszámok? (Frissítve, 2023.10.24.)

Az elmúlt hónapokban elég sokat olvashattál nálunk is a webes vitals mutatókról, és ennek kapcsán gyakran felmerült a Lighthouse, mint mérőeszköz. A Lighthouse segítségével ugyanis pontosan meg tudod állapítani, hogy mi a gond a weboldaladdal és hogyan tudod optimalizálni a sebességét. Elmondjuk, hogyan tedd, mit olvashatsz ki az egyes mérőszámokból. (Frissítve, 2023.10.24. – Több ponton is bővítettük és aktualizáltuk a bejegyzést)

Ha meg akarod vizsgálni a weboldalad teljesítményét technikai szempontból, akkor elég egy tesztet lefuttatni, melyet a Google által prezentált Lighthouse böngészőn belül meg tud tenni egy perc alatt. (A teljesítmény a weboldalaknál azt jelenti, hogy milyen gyorsan képes megmutatni egy böngésző a weboldalt a felhasználónak.) A Lighthouse a Chromiumot használja böngészőként arra, hogy felépítse a weboldalakat és futtassa a teszteket. Ingyenes eszközről van szó, melynek forráskódja nyilvános.

A Lighthouse története

A Chromium projekt 2020. május 5-én jelentett be három olyan mérőszámot, melyekkel a Google által támogatott nyílt forráskódú böngésző teljesítményt tud mérni. Ezek voltak a webes vitals mutatók, melyek célja, hogy felhasználó-központú módon mérjék a weboldalak teljesítményét. Hamarosan a Chrome DevTools Audits panelt átnevezték Lighthouse-ra, illetve a Pagespeed Insigths és a Search Console is ezekre a mérőszámokra kezdett hivatkozni.

A Lighthouse ugyanakkor némileg különbözik a webes vitals mutatóktól. Természetesen a webes vitals mutatók három mérőszáma is szerepel a Lighthouse-ban, azonban ezek (a legnagyobb vizuális tartalomválasz,  az első vizuális tartalomválasz és az interaktivitásig eltelt idő, vagyis a total blocking time, illetve az elrendezés összmozgása) csak 70 százalékát teszik ki a Lighthouse által mutatott teljesítmény-pontszámnak.

Amit még fontos tudni, hogy a Lighthouse által mutatott eredmények úgynevezett emulált tesztek révén keletkeznek. Valós felhasználók esetében egy weboldal sebességét viszont olyan tényezők is meghatározzák, mint a hálózat sebessége, az eszköz teljesítménye, illetve a felhasználó távolsága a weboldalt kiszolgáló szervertől. A Lighthouse adatai ezeket nem veszik figyelembe. Ehelyett egy középkategóriás eszközt szimulálva próbálja bemutatni, hogy mivel szembesül egy átlagos felhasználó a weboldalad esetében.

Fontos tehát, hogy míg a webes vitals mutatók alapjául szolgáló adatokat valódi Chrome-felhasználóktól gyűjtik a Chrome User Experience Report (CrUX) részeként, addig a Lighthouse nem ezekkel az adatokkal dolgozik.

Ezek tehát úgynevezett laboratóriumi tesztek egy ellenőrzött környezetben, előre meghatározott eszközökkel és hálózati beállításokkal, melyek segítenek abban, hogy a teljesítményproblémákat meghatározzuk egy weboldalnál. Ami persze nem azt jelenti, hogy minden valós felhasználó ezekkel a problémákkal találkozik, ugyanakkor erős a korreláció a Lighthouse által mutatott adatok és a valós felhasználói adatok között.

Utóbbi miatt persze nem kell lemondani a Lighthouse-ról, csak először érdemes megvizsgálni a Chrome Felhasználói Élmény Jelentést (CrUX), majd aztán a Lighthouse kibővített tesztelési lehetőségeit a problémát okozó kódok megtalálásához. Ráadásul, ha a weboldal még nem került publikálásra, akkor a Lighthouse pont alkalmas lesz annak tesztelésére.

Hogyan mér a Lighthouse?

Amikor belépsz a Lighthouse-ba, akkor először olyan kategóriákkal találkozol, mint

• Teljesítmény
• Kisegítő lehetőségek
• Bevált módszerek
• Keresőoptimalizálás

Mindegyiknél 0-tól 100-ig terjedő pontszámot jeleníthet meg a Lighthouse. Ezek a pontszámok egyéni ellenőrzőlisták elemeiből állnak össze. Találkozhatsz még egy ötödik elemmel, mely a PWA (progresszív webes alkalmazások) nevet viseli és olyan funkciókat vizsgál, melyek segítségével a weboldal úgy viselkedik, mint egy natív mobilalkalmazás.

De hogy egy kicsit bonyolultabb legyen, úgynevezett „Módok” közül is választani lehet. Ezek lehetnek:

• navigálás
• időtartam
• pillanatkép

Ezek közül a navigálás kiválasztása esetén az történik, hogy a kiválasztott oldalt újratölti a Lighthouse, értékeli a teljesítmény és a SEO-t. Az időtartam esetében a már megnyitott oldalról gyűjt adatokat, például arról, hogy mennyi ideig tart egy interakció. A pillanatkép elemzi a hozzáférhetőséget és a SEO-t az oldal adott állapotában.

Az időtartam mód például azért lehet érdekes, mert az mutatja meg például az Interaction to Next Paint (az interakciótól a következő vizuális válaszig eltelt idő) mutatót, ami a webes vitals mutatók része 2024 márciusától.

A Lighthouse a cikk frissítésének időpontjában, 2023 októberében már a 11-es verziónál jár, mely öt mérőszámot tartalmaz, melyek mind részei az összteljesítménynek. Azt, hogy ezek a mérőszámok milyen súlyúak az összteljesítményt tekintve, folyamatosan változik, így a 6-os és 7-es verzióban még más súlyozással találkozhattunk, mint a 8-as és 9-esben.

Milyen mutatókat használ a Lighthouse?

Az itt felsorolt mutatók egy részét, már a webes vitals mutatókról szóló anyagunkban átvettük, azonban most is átfutjuk őket, ráadásul lesz még 3, melyek ott nem szerepeltek.

Largest Contentful Paint (LCP) – A legnagyobb vizuális tartalomválasz

• Az LCP-vel azt lehet kifejezni, hogy miként tapasztalja meg az oldal betöltődését a felhasználó.
• A Lighthouse teljesítménypontszámnak a 25 százalékát teszi ki jelenleg a mutató, de ez változhat.
• Azt méri, hogy az oldal legnagyobb képe vagy szövegblokkja mikor lesz látható a felhasználó számára.
• Része a webes vitals mutatóknak.
• A cél az, hogy az értékét 2,5 másodperc alá szorítsd. Ez színkóddal zöldet jelent.

Az LCP részei lehetnek a szövegek, a képek, háttérképek, videók a weboldalon. Érdemes tudni, hogy aloldalanként változik az érték, így több oldal esetében is meg kell nézni, hogy mit mutat. Rossz LCP-t okozhat

• a hosszú szerver válaszidő
• a JavaScript és a CSS
• erőforrások betöltési ideje
• kliens-oldali megjelenítés

Ezek alapján a javításhoz egyrészt szükség lehet a szerver optimalizálására, CDN használatára, gyorsítótárazásra, a külső kapcsolatok miné korábbi létrehozása. Ha a JavaScript és a CSS okozza a gondot, akkor a CSS és a JavaScript csökkentése és tömörítése, a nem fontos CSS-ek és JavaScriptek halasztása a megoldás. Ha az ok az erőforrás betöltési ideje, akkor a képek optimalizálására és tömörítésére van szükség, a fontos erőforrások előtöltésére, a szövegek tömörítésére, a hálózati kapcsolat alapján akár eltérő megjelenítésre. Ha pedig a kliens-oldali megjelenítéssel van gond, akkor csökkenteni kell a fontos JavaScriptet és egy másik renderelési megoldást használni.

Total blocking time

• A TBT fejezi ki a válaszkészséget a felhasználói bevitelekre.
• 30 százalékos súlya van a Lighthouse teljesítménypontszámnál, ami később változhat
• A TBT azt méri, hogy mennyi idő telik el az első vizuális tartalomválasz és az interaktivitás között.
• Ez a szám a First Input Delay lab mérési megfelelője, így a webes vitals mutatókhoz tartozik.
• A cél, hogy 300 milliszekundum alá kerüljön az értéke.

A TBT tehát a hosszú feladatokat méri, azokat, amelyek 50 ms-nél tovább tartanak. Amikor a böngésző betölti az oldalad, akkor szkriptek sora vár a végrehajtásra. Bármilyen bevitel a felhasználó részéről ugyanebbe a sorba kerül. Amikor a böngésző nem válaszol a felhasználó jelzésére, mert éppen más feladatokat hajt végre, akkor ezt a felhasználó késésként érzékeli.

A túlságosan magas TBT értéket valamilyen nehéz JavaScript okozza. Ezeket a túl hosszú feladatokat érdemes feldarabolni, és csökkenteni a JavaScript végrehajtási idejét.

Az első vizuális tartalomválasz (First Contentful Paint, FCP)

• Az FCP jelzi azt az időt, amikor a rendszer megjeleníti az első szöveget vagy képet.
• 10 százalékkal részesedik a Lighthouse pontszámból, ami változhat később
• Azt az időt méri, hogy mikor láthatja a felhasználó azt, hogy a kért oldal megjelenik.
• A pontszámhoz a weboldal FCP-pontszámát összehasonlítják a HTTP Archive-ban található valós oldalak FCP-idejével.
• A cél az, hogy értéke 2 másodperc alatt legyen.

Minden, ami az első megjelenő elem előtt történik, beleszámít az FCP-be, kivéve az iframe-ek. Ahhoz, hogy a tartalom a felhasználó számára megjelenjen, a böngészőnek be kell töltenie, elemeznie, és fel kell dolgoznia minden külső stíluslapot, mellyel találkozik. Ezért meg kell keresni azokat a CSS-eket, melyeket nem használ a weboldal.

Speed Index

• A Sebességindex mutató azt jelzi, hogy az adott oldal tartalmai milyen gyorsan válnak láthatóvá.
• 10 százalékos a súlya a Lighthouse pontszámban, de később változhat
• Nem a webes vitals mutatók része.
• A Speed Index mérőszámok a Speedline nevű csomóponti modulból származnak. A Speedline pontszámok a nézetablak méretétől függően változnak, és egy algoritmus számolja ki minden egyes frame teljességét.
• A cél a 4,3 másodperc alatti érték elérése.

A sebességindex értéke a kritikus megjelenítési útvonalat tükrözi. A kritikus itt azt jelenti, hogy az adott forrás szükséges az első tartalom megjelenítéséhez vagy pedig az oldal fő funkciójához tartozik. Minél hosszabb és sűrűbb az út, annál lassabban jeleníti meg a weboldalad a vizuális elemeket.

A javításához minimalizálni kell a fő szálon végzett munkát, csökkenteni a JavaScript végrehajtási idejét, mérsékelni a kritikus kérések mélységét, eltávolítani a megjelenést blokkoló forrásokat és a kijelzőn nem megjelenő képek betöltését halasztani.

Az Elrendezés összmozgása (Cumulative Layout Shift, CLS)

• Azt mutatja meg, hogy mennyire látja vizuálisan stabilnak az oldalt a felhasználó.
• Jelenleg 25 százalékos a súlya a teljesítményben, ami azonban időnként változik.
• Azt méri, hogy mennyit mozdulnak el az oldalelemek a betöltés végén.
• A CLS-t nem idővel mérik, hanem frame-ek számán alapul, melyekben mozognak az elemek és hogy ezek az elemek hány pixelt mozdulnak.
• A cél itt az, hogy 0,1 pont alatt legyen a mozgás.

Olyan elemek okoznak mozgást, mint a méret nélküli képek, reklámok, beágyazások, iframe-ek szintén méretek nélkül, a dinamikus tartalmak, webes fontok, és olyan műveletek, melyek a DOM frissítése előtt hálózati válaszra várnak.

• A javításhoz a stabilitást kell fokozni, tehát például, ha van egy lassan betöltődő hirdetésed, akkor egy placeholdert használhatsz itt ugyanakkora méretben.
• A képeknek és a videóknak meg kell határozni a méretét.
• Ne kerüljön új tartalom a már meglévő fölé.
• Előre be kell tölteni a fontokat.

Hogyan vizsgáld meg a weboldalad a Lighthouse-zal?

Ha Chrome böngészőt használsz, akkor a „További eszközök” – „Fejlesztői eszközök” résznél éred el a felső menüsorban a beépített Lighthouse-t. A tesztet érdemes incognito módban elvégezni. Ugyanakkor az is egy jó megoldás, ha a PageSpeed Insightsot futtatod, ahol egyszerűen csak meg kell adni a vizsgálni kívánt URL-t.

Ennek kapcsán merülhet fel az a kérdés is, hogy

Miben különbözik a Lighthouse és a PageSpeed Insights?

A PageSpeed Insights valójában egy lehetőség ma már arra, hogy lefuttass egy Lighthouse-tesztet, amit egyébként több más eszköz is tartalmaz már. A különbség abban áll, hogy a normál Lighthouse-jelentés az automatikus sebességtesztet futtat, ami nem mutat valós felhasználói számokat.

Ugyanakkor, ha a PageSpeed Insights-t használod, akkor valós felhasználói adatokat is kapsz a Lighthouse teszteredmények mellé.

A Lighthouse és a valós adatok között mindig lesz eltérés, amiről azt kell tudni, hogy például a Lighthouse 150 milliszekundumos hálózati késleltetést használ, míg a valóságban ez lehet kisebb, de ugyanez érvényes a mobil sávszélességre, melynél 1,6 megabit/másodperc értéket használ a Lighthouse, de a valóságos adat ettől valószínűleg eltér.

Sokakban felmerülhet az is kérdésként, hogy szinte minden egyes mérésnél más és más pontszámot mutat számukra a Lighthouse, ami némi bizonytalanságot kelthet a mérés megbízhatóságát illetően. Ez azonban nem hiba, a pontos eredményeket olyan tényezők befolyásolják még az emulált teszteknél is, mint a böngészőbővítmények (érdemes inkognitó módban, bővítmények nélkül tesztelni), az internetkapcsolat, vagy akár egy hirdetés megjelenése az adott oldalon.

A lényeg, hogy ha lefuttatsz egy Lighthouse-tesztet, akkor az megmutatja, hogy kellően gyors-e a weboldalad, és hogy nem merül-e fel valamilyen nyilvánvaló SEO-probléma.

Mire figyelj a mérésnél?

Amit fontos tudni, hogy a Lighthouse egyetlen oldalt mér egyszerre. Egyetlen oldal viszont nem mutatja meg a teljes weboldalad teljesítményét. Tehát az, hogy mondjuk a főoldalad gyors, nem jelenti azt, hogy a weboldalad többi oldala is az.

A weboldaladon belül ezért több oldalt is tesztelni kell. Ehhez meg kellene határozni a fő oldaltípusokat a weboldaladon, illetve ezek arányát a számukat tekintve egymáshoz képest, és ugyanilyen arányban kellene tesztelned is ezeket a Lighthouse-zal, mielőtt nekiállnál optimalizálni.

Miután elkezdted a teszteket a legfontosabb oldalaidon és a megfelelő arányú mintaoldalakon, az eredményeket és a megoldások listáját jegyezd fel. Kényelmesebbé teszi az áttekintést, ha a Lighthouse Viewert is használod. Az eredményeket különböző formátumban el is mentheted a jelentés jobb felső sarkában található, három ponttal jelzett eszköz menüből.

A lényeg, hogy minden terület esetén érdemes a pontszámot 90 százalék felett, azaz zöld jelzésben tartani. Tippeket az optimalizáláshoz a „lehetőségek” résznél kapsz az egyes kategóriákban, ahol a Lighthouse azt is meghatározza, mennyire fontosak az egyes javítanivalók.

Címkék: seo