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

Tartalomjegyzék
Bővített tartalomjegyzék

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.

Eltávolította a Google a TTI-mutatót a Lighthouse-ból

Korábban szerepelt a tesztben az interaktivitásig eltelt idő (Time to interactive), melyet azonban 2023-ban eltávolított belőle a Google. A TTI-vel azt mérte a Lighthouse, hogy a felhasználók számára mennyi idő elteltével válik interaktívvá a weboldal, vagyis mikor fog tudni kattintani vagy a navigációt használni a felhasználó.

A Google ugyanakkor úgy ítélte meg, hogy más mérőszámok, mint az LCP, a sebességindex vagy a TBT együttesen már elég jól kifejezik azt, hogy egy weboldal mikor néz ki betöltöttnek. Mint bejelentésükben írják: az LCP és a sebességindex jobb heurisztikát jelent, mint az aktív hálózati lekérések száma. Emellett a TBT jobban korrelál a webes vitals mutatókkal.

A több mint 13 millió weboldalon végzett teszt azt jelezte, hogy a weboldalak 90 százalékánál jelentkezik javulás a pontszámban, és a weboldalak 50 százaléka 5 pontnál nagyobb változást tapasztal.

A TTI súlya már a Lighthouse 8 óta csökkent, ami lehetővé tette, hogy eközben más mérőszámok súlya növekedjen. Erre azért került sor, mert javult a weboldalsebesség felhasználói élmény mutatóinak pontossága, valamint, hogy arra ösztökéljék a weboldalakat, hogy a JavaScriptek csökkentésére összpontosítsanak, ezek ugyanis egyre nagyobbak lettek.

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:

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.

Széchenyi 2020