Melyek a jó SEO kulcsszavak? És hogyan találd meg őket? (Frissítve, 2023.12.01.)
A kulcsszókutatás fontos része a keresőoptimalizálásnak. Ezzel határozzuk meg, hogy milyen keresési..
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 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.
Amikor belépsz a Lighthouse-ba, akkor először olyan kategóriákkal találkozol, mint
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:
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.
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.
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
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.
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.
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.
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.
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.
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.
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
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.
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.
A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.