Mire használhatod a Lighthouse-t? Mit mutatnak meg az egyes mérőszámok?

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.02.28. – Egy új fejezettel bővítettünk: Eltávolítja a Google a TTI-mutatót a Lighthouse-ból)

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

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.

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?

A Lighthouse 9-es verziója 7 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.

Sokakban felmerülhet 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.

Mit mér 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 a mutató.
• 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
• 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.
• 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.
• 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ó.
• 15 százalékos a súlya a teljesítményben.
• 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.

Az interaktivitásig eltelt idő (Time to interactive)

• A betöltési reakciókészséget fejezi ki, meghatározza, hogy hol tűnik interaktívnak az oldal.
• 10 százalék a súlya a teljesítmény pontszámban.
• Azt méri, hogy mennyi idő telik el a betöltődés indulása és a fő források interaktívvá válása között.
• A cél az, hogy 3,8 másodperc alatt legyen az értéke.

Egy oldal egyébként akkor számít teljesen interaktívnak, amikor megjelenik a tartalom (amit az első vizuális tartalomválasz mér), az eseménykezelők regisztrálva vannak a legtöbb látható oldalelemhez, és az oldal a felhasználói interakcióra 50 milliszekundumon belül válaszol.

 

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.

Címkék: seo

Hozzászólás jelenleg nem lehetséges.