Google világítótorony

A Lighthouse futtatható a Chrome DevToolsban, parancssorból vagy Node-modulként. A Lighthouse-nak megad egy URL-címet az ellenőrzéshez, a program lefuttat egy sor ellenőrzést az oldal ellen, majd jelentést készít arról, hogy az oldal milyen jól teljesített. A sikertelen auditokat pedig felhasználhatja az oldal javításának indikátoraként. Minden egyes audithoz tartozik egy referenciadokumentum, amely elmagyarázza, hogy miért fontos az audit, valamint azt, hogy hogyan kell kijavítani.

A Google Lighthouse egy nyílt forráskódú, automatizált eszköz a weboldalak minőségének mérésére. Bármilyen weboldallal szemben futtatható, nyilvános vagy hitelesítést igénylő. A Google Lighthouse ellenőrzi a weboldalak teljesítményét, hozzáférhetőségét és keresőmotor-optimalizálását.[1][2][3] Emellett a progresszív webes alkalmazások szabványoknak és legjobb gyakorlatoknak való megfelelésének tesztelésére is alkalmas. A Google Lighthouse-t a Google fejlesztette ki, és célja, hogy segítse a webfejlesztőket.

A Google Lighthouse használata a webalkalmazás ellenőrzéséhez

Miért a Google Lighthouse?

A Javascript-alapú keretrendszerek és könyvtárak, különösen az Angular és a React első számú futók megjelenése és meteorikus felemelkedése azt jelenti, hogy egyre több ember/szervezet vonzódik a webalkalmazások és nem a sima régi weboldalak felé. Ilyen körülmények között az alkalmazások teljesítménye a prioritások között az első helyre került.

Nemrégiben azzal bíztak meg, hogy termékeinket a felhasználói élmény szempontjából a lehető legzökkenőmentesebbé tegyük. Itt kezdtem el olyan eszközöket keresni, amelyek lehetővé teszik az alkalmazás teljesítményének elemzését, és pontosan meghatározzák azokat a szempontokat, amelyek lehúzzák a számokat. Ekkor bukkantam rá véletlenül a Google Lighthouse-ra.

Mi az a Google Lighthouse?

A Google fejlesztői weboldalának hivatalos oldala a következőképpen írja le a Google Lighthouse-t: A Google Lighthouse egy nyílt forráskódú, automatizált eszköz a weboldalak minőségének javítására. Alapvetően a Google Lighthouse egy olyan eszköz, amellyel számos paraméter alapján ellenőrizheti webes alkalmazását, többek között (de nem kizárólagosan) a teljesítményt, számos mérőszám alapján, a mobil kompatibilitást, a progresszív webalkalmazások (PWA) megvalósítását stb.

Mindössze annyit kell tenni, hogy lefuttatod egy oldalon, vagy átadsz neki egy URL-t, hátradőlsz néhány percre, és máris kapsz egy nagyon részletes jelentést, amely nem sokkal marad el attól, amit egy profi auditor körülbelül egy hét alatt állítana össze. A legjobb az egészben, hogy szinte semmit sem kell beállítani ahhoz, hogy elkezdhesd. Kezdjük azzal, hogy megnézzük a Lighthouse által használt legfontosabb funkciókat és ellenőrzési kritériumokat.

Főbb jellemzők és ellenőrzési kritériumok

A Google Lighthouse lehetőséget biztosít arra, hogy az Auditot az oldal(ak) asztali és mobil verziódra is lefuttassdAz Audit során mért legfontosabb mérőszámok a következők:

Teljesítmény: Ez a pontszám annak összesítése, hogy az oldal hogyan teljesített olyan szempontok szerint, mint (de nem kizárólagosan) a betöltési sebesség, az alapvető keret(ek) betöltéséhez szükséges idő, az értelmes tartalom megjelenítése a felhasználó számára stb. Egy laikus számára ez a pontszám azt jelzi, hogy mennyire tisztességesen teljesít az oldal, a 100-as pontszám azt jelenti, hogy a 98. percentilisben szerepel, az 50-es azt jelenti, hogy a 75. percentilisben szerepel, és így tovább.

PWA-pontszám (mobil): A Service Workerek, alkalmazásmanifesztek stb. elterjedésének köszönhetően sok modern webes alkalmazás a PWA paradigma felé mozdul el, ahol a cél az, hogy az alkalmazás a lehető legközelebb viselkedjen a natív mobilalkalmazásokhoz. A pontozás a Google által meghatározott Baseline PWA ellenőrző lista alapján történik, amely tartalmazza a Service Worker implementáció(ka)t, a nézetablakok kezelését, az offline funkcionalitást, a teljesítményt szkriptet tiltó környezetben stb.

Hozzáférhetőség: Amint azt már kitalálhattad, ez a mérőszám azt méri, hogy mennyire hozzáférhető a weboldalad, az oldaladon megvalósítható akadálymentesítési funkciók sokaságán keresztül (például az "aria-" attribútumok, mint az aria-required, a hangfeliratok, a gombok nevei, stb.) A többi mérőszámmal ellentétben azonban az akadálymentességi mérőszámok a megfelelt/nem felelt meg alapon pontoznak, azaz ha az oldal minden lehetséges eleme nem képernyőolvasó-barát (a HTML5 olyan funkciókat vezetett be, amelyek megkönnyítik az oldalak értelmezését a látássérültek által használt képernyőolvasók számára, mint például a címkék neve, az olyan címkék, mint a <section>, <article> stb.), akkor 0 pontot kapsz erre a pontszámra.

Ezeknek a pontszámoknak az összesítése a te akadálymentességi metrikus pontszámod. Legjobb gyakorlatok: Mint azt minden fejlesztő tudja, van néhány olyan gyakorlat, amelyet empirikus adatok alapján a "legjobbnak" tartanak. Ez a mérőszám számos ilyen pont összesítése, többek között, de nem kizárólagosan a következők: HTTPS használata.

Az elavult kódelemek, például címkék, direktívák, könyvtárak stb. használatának elkerülése. Jelszó bevitel beillesztés tiltott beillesztéssel. Geo-Location és cookie-használati figyelmeztetések betöltéskor stb.

Most, hogy tudjuk, mire képes a Google Lighthouse, nézzük meg, hogyan kezdhetjük el használni. Az első lépés természetesen az eszköz beállítása lenne. A jó hír itt, ahogy már utaltam rá, hogy a Google Lighthouse már ott van veled és készen áll, ha a Google Chrome-ot használod (erősen ajánlom, hogy tedd meg, ha még nem tetted). Bár itt is van egy népszerű választás, a pontosság kedvéért felsorolom a Google Lighthouse használatának összes módját.

A Chrome DevTools-on keresztül

Ha használtad már a DevTools-t, akkor a "Konzol", "Hálózat", "Alkalmazás" stb. mellett talán találkoztál már az "Ellenőrzések" füllel. Ez az Audits funkció a Google Lighthouse segítségével működik.

Google Chrome letöltése asztali számítógépre.

A Google Chrome-ban lépj az ellenőrizni kívánt URL-címre. Ez lehet egy élő webes alkalmazás, vagy a helyi fejlesztői szerver a localhost-on.

Nyisd meg a Chrome DevTools-t (Command+Option+J macOS-en, Control+Shift+J Windows-on).

Kattints az Audits fülre.

Kattints az 'Auditok futtatása' gombra, dőlj hátra és várd meg, amíg a folyamat lefut.

A Lighthouse NPM csomag és a CLI használata

Ha a parancssor rajongója vagy, akkor így használhatod a Google Lighthouse-t és annak CLI-jét. Feltételezve, hogy telepítette a Node-ot a rendszerére:

Töltsd le a Google Chrome for Desktop programot.

Nyisd meg a Terminált (vagy Windowson a parancssort).

Futtasd a következő parancsot

npm install -g lighthouse

Futtass egy ellenőrzést a következő paranccsal

lighthouse <url>

A különböző ellenőrzési opciókat a következő futtatással láthatod

lighthouse --help

Ennek a csomagnak köszönhetően a Lighthouse-t programozottan is futtathatod, az alkalmazásod részeként, ha szeretnéd.

Chrome-bővítményként

Hacsak nincs nagyon különleges oka a bővítmény használatára, maradj a DevTools munkafolyamatnál, mivel az pontosan ugyanazt teszi, anélkül, hogy bármilyen telepítést kellene végezni.

Töltsd le a Google Chrome asztali változatát.

Telepítsd a Lighthouse Chrome-bővítményt a Chrome Webstore-ból.

Menj az ellenőrizni kívánt oldalra

Kattints a Lighthouse . A Chrome címsor mellett kell lennie. Ha nem, nyitod meg a Chrome főmenüjét, és a menü tetején érd el. A kattintás után a Lighthouse menü kibővül.

Kattints a 'Jelentés létrehozása' gombra.

Személy szerint én jobban szeretem a DevTools megközelítést, mivel a szükséges beállítás szinte semmit sem igényel az ellenőrzések elindításához. Az NPM csomagot akkor részesítem előnyben, amikor a Lighthouse-t programozottan kellett használnom.

Indítsd el az auditálást!

Auditálási lehetőségek

A Google Lighthouse lehetővé teszi

Hogy Auditokat futtass az alkalmazás mobil és asztali verziódra is - ez a testreszabás első szintje, az "eszköz". Ezután kiválasztjuk, hogy mely szempontokat szeretnénk auditálni. A következők közül választhatunk:

Teljesítmény

Progresszív webes alkalmazások

Legjobb gyakorlatok

Hozzáférhetőség

SEO. Igen, itt kaphatsz pontszámot az oldalad SEO-jára vonatkozóan. Az értékelt paraméterek között olyan jellemzők szerepelnek, mint

A dokumentum meta leírással rendelkezik, Cím elem megléte (vagy hiánya),Olvasható betűméret használata,A linkek nem rendelkeznek leírássalSikertelen HTTP státuszkódok, mint 400, 404, 500 stb. jelenléte.

Hogy mit vizsgálnak ezek a szempontok, azt már láttuk egy korábbi részben, a SEO pontszám pedig a legjobb SEO gyakorlatokon alapul. A másik lehetőség, amit a Google Lighthouse biztosít, a Throttling. Alapvetően ez egy lehetőség arra, hogy szimulálja az oldal/alkalmazás teljesítményét egy lassabb internetkapcsolaton vagy a fogadó gép CPU teljesítményén. Itt választhat a következők közül:

Szimulált gyors 3G, 4x CPU lassulás

Alkalmazott gyors 3G, 4x CPU lassulás

Nincs fojtás

Végül van egy opció a "Tárolás törlése", amelyet bejelölhet, így a böngésző tárolója, amely a helyi tárolóban, az indexelt DB-ben stb. van elosztva, az Audit előtt törlődik. Ez különösen akkor hasznos, ha a lehető legpontosabb pontszámot szeretné a Teljesítmény és a PWA mérőszámok esetében.

Ugyanezek a beállítások mind az asztali, mind a mobileszközök auditálásánál rendelkezésre állnak.

Következtetés

Buktatók és hiányosságok

A Google Lighthouse egy hatékony eszköz, azonban van néhány buktatója is. Nézzünk meg néhányat:

A generált pontszámok a széles körben elfogadott normákon vagy a Google Lighthouse más alkalmazásokra vonatkozó adatain alapulnak. Tehát amit lát, az nem biztos, hogy abszolút pontszám vagy ítélet. Ezek az összesített értékek inkább azt mutatják, hogy az Ön oldala hogyan áll sok más oldalhoz képest, valamint az értékelési metrikák tekintetében.

Az a hálózat, amelyben az ellenőrzéseket futtatod, hatással lehet a pontszámra, különösen a teljesítmény szempontjából - ugyanarra az oldalra vonatkozó jelentés a különböző hálózatokban kellőképpen eltérhetsz.

Az auditálási lehetőségek fojtása a legjobb esetben is csak szimulációja annak, hogy milyenek lennének a jelzett feltételek. Mivel ez nem operációs rendszer- vagy rendszerszinten történik, az eredmények nem biztos, hogy nagyon pontosak.

A böngészőbővítmények használata ronthatja a pontszámokat. Én magam is használok néhány bővítményt, például a Dark Reader nevű, általam nagyon kedvelt bővítményt, de az általam tesztelt oldalak teljesítményét eléggé lecsökkentette. Ezért ajánlott az Auditot a Chrome inkognitó módjában futtatni.

A Google Lighthouse, mint nyílt forráskódú projekt még mindig folyamatban lévő munka, mégis az egyik legerősebb és leghitelesebb eszköz, amely a rendelkezésünkre áll az oldalaink auditálásához. Igen, rengeteg fejlesztés fog folyamatosan érkezni, és csak jobb lesz a jelenlegi változatnál.

Tehát amikor legközelebb szeretné felpörgetni a lassú alkalmazás/termék teljesítményét, használja a Google Lighthouse meglátásait, hogy végigvezesse a folyamaton. Biztos vagyok benne, hogy jelentős eredményeket fog elérni.