Bevezetés a Chrome Lighthouse-ba

A Chrome Lighthouse már egy ideje létezik, de mi van, ha arra kérem Önt, hogy magyarázza el, mit csinál, akkor meg tudja magyarázni élénken?

Rájöttem, hogy sok webfejlesztő, köztük kezdők, még nem hallottak erről az eszközről, és akik még, még nem próbálták ki, ez nem klassz :(.

Ebben a cikkben bemutatnám Önnek a Chrome Lighthouse-t, mit csinál, és hogyan kezdje el használni.

PS: Ezt a cikket először a blogomon tették közzé

Kezdjük el :)

A Wikipedia szerint A világítótorony egy torony, épület, vagy más típusú struktúra célja, hogy fényt bocsátanak ki a rendszerből a lámpák és lencsék és arra szolgál, hogy a navigációs támogatást a tengerészeti pilóták a tengeri vagy belvízi utakon.

Oké, változtassuk ezt technikai kifejezéssé;

A világítótorony egy torony, épület vagy más típusú szerkezet, amelyet úgy terveztek, hogy fényt bocsásson ki egy rendszerből a Chrome Developer Tools „Audit” paneljén , és útmutatóként szolgáljon a fejlesztők számára.

Van valami értelme? :)

Nos, a Lighthouse a Google által kifejlesztett eszköz, amely elemzi a webalkalmazásokat és weboldalakat, összegyűjtve a modern teljesítménymutatókat és betekintést a fejlesztői bevált gyakorlatokba.

Gondoljon a Lighthouse-ra, mint egy autó sebességmérőjére, amely ellenőrzi és kiegyensúlyozza az autók sebességkorlátozását.

Alapvetően a Lighthouse a fejlesztők legjobb gyakorlataival és teljesítménymutatóival dolgozik. Ellenőrzi egy webalkalmazást, és visszajelzést ad a hibákról, a szabvány alatti gyakorlatokról, tippekről a jobb teljesítmény érdekében és azok kijavításáról.

A Google Developers Docs szerint

A Lighthouse egy nyílt forráskódú, automatizált eszköz a weboldalak minőségének javítására. Futtathatja bármely nyilvános vagy hitelesítést igénylő weboldalon. Ellenőrzi a teljesítményt, az akadálymentességet, a progresszív webalkalmazásokat és egyebeket. A Lighthouse futtatható a Chrome DevTools programban, parancssorból vagy Node modulként. Megadja a Lighthouse URL-jét az ellenőrzéshez, az ellenőrzések sorozatát futtatja az oldal ellen, majd jelentést készít arról, hogy az oldal milyen jól teljesített. Innentől kezdve használja a sikertelen ellenőrzéseket az oldal javításának mutatóiként. Minden ellenőrzéshez tartozik egy referenciadokumentum, amely elmagyarázza az ellenőrzés fontosságát, valamint annak kijavítását.

Ez nagyjából a Világítótoronyról szól. Ellenőrzi egy webalkalmazás URL-jét, és jelentést készít arról, hogy milyen rossz és jó az Ön webalkalmazása a webes szabványok és a fejlesztők bevált gyakorlatának megfelelően. A jelentés minden szakaszához csatolják azokat a dokumentációkat is, amelyek elmagyarázzák, miért ellenőrizték az alkalmazásának ezt a részét, miért kell javítaniuk az alkalmazás ezen részét és hogyan lehet javítani.

Itt található a világítótorony ellenőrzési jelentésének bemutatója ehhez a bloghoz //bolajiayodeji.com

Nagyon klassz, igaz? :)

Meg kell jegyezned, hogy az első ellenőrzésem során nem kaptam ilyen nagy pontszámokat. Az első jelentést kellett használnom az alkalmazásom teljesítményének és minőségének javításához és javításához.

A Lighthouse mögött ez az ötlet áll, amely azonosítja és megoldja azokat a gyakori problémákat, amelyek befolyásolják a webhelyek teljesítményét, az akadálymentességet és a felhasználói élményt.

Most térjünk át az érdekes részre: HOGYAN KEZDJÜK !!

A LightHouse három munkafolyamatban érhető el

  • Chrome fejlesztői eszközök
  • Parancssor (csomópont)
  • Chrome kiterjesztés

Én személy szerint inkább a LightHouse-t használom a Dev Tools-ban. A kiterjesztés használatának nincs értelme, mivel a Dev eszköz és a bővítmény ugyanazon a Chrome böngészőben működik, és a mi preferenciánk változik, használja azt, ami a legjobban megfelel.

A Lighthouse először csak a Chrome kiterjesztéssel volt elérhető, mielőtt hozzá lett adva a Chrome DevToolshoz.

A világítótorony használata a parancssorban nagyon klassz is, (strébereknek :))

Kezdjük el!!!

[1] Futtassa a Világítótornyot a Chrome DevTools alkalmazásban

  • Töltse le a Google Chrome böngészőt innen
Ne feledje, hogy a Lighthouse csak asztali számítógépen futtatható, mobilon nem
  • Lépjen arra az URL-re, amelyet ellenőrizni szeretne a Google Chrome-ban.
Bármelyik URL-t ellenőrizheti az interneten.
  • Nyissa meg a Chrome DevTools alkalmazást
Command+Option+C (Mac) Control+Shift+C (Windows, Linux, Chrome OS).
  • Kattintson az Audit panelre

Balra az ellenőrzött oldal nézetablaka látható, itt a blogom :). Jobb oldalon a Chrome DevTools Audit panelje található, amelyet most a Lighthouse üzemeltet

  • Kattintson az Ellenőrzések futtatása elemre
A DevTools megmutatja az ellenőrzési kategóriák listáját. Győződjön meg róla, hogy mindet bejelöli. Ha személyre szeretné szabni, hogy alkalmazásának mely részét kell ellenőrizni, akkor azt beállíthatja az ellenőrizni kívánt kategóriák ellenőrzésével.
  • 60–90 másodperc elteltével - az internet erősségétől függően a Lighthouse jelentést ad az oldalon.
Nem mintha az internet sebessége és az előre telepített bővítmények befolyásolhatják a világítótorony ellenőrzését. A jobb élmény érdekében futtasson ellenőrzéseket Icognito módbanaz interferencia elkerülése érdekében

[2] Futtassa a Lighthouse parancssort

  • Download Google Chrome web browser here
  • Download node here, If you have it installed already, skip this step!
  • Install Lighthouse
npm install -g lighthouse # or use yarn: yarn global add lighthouse
The -g flag installs it as a global module.
  • Run your audits
lighthouse 

Sample;

lighthouse //bolajiayodeji.com/

By default, Lighthouse writes the report to an HTML file. You can control the output format by passing flags.

The report can be displayed in HTML or JSON format

Output samples:

lighthouse # saves `./_.report.html` lighthouse --output json # json output sent to stdout lighthouse --output html --output-path ./report.html # saves `./report.html` # NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats lighthouse --output json --output html --output-path ./myfile.json # saves `./myfile.report.json` and `./myfile.report.html` lighthouse --output json --output html # saves `./_.report.json` and `./_.report.html` lighthouse --output-path=~/mydir/foo.out --save-assets # saves `~/mydir/foo.report.html` # saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json` lighthouse --output-path=./report.json --output json # saves `./report.json`

Run $ lighthouse --help for CLI options

[3] Run Lighthouse with the Chrome extension

As I earlier said, The DevTools workflow is the best as it provides the same benefits as the Extension workflow, with the added bonus of no installation needed.

To use this method you need to install the extension, but If you have your reasons, here is the guide;

  • Download Google Chrome web browser here
  • Install the Lighthouse Chrome Extension from the Chrome Webstore.
  • Navigate to the page you want to audit
  • Click Lighthouse Icon.
It should be next to the Chrome address bar. If not, open Chrome’s main menu (the three dots on the upper right) and access it at the top of the menu. After clicking, the Lighthouse menu expands.
  • Click Generate report.
Lighthouse runs its audits against the opened page, then opens up a new tab with a report of the results.

Bingo! You did it

That’s pretty much it, Lighthouse is a great tool, especially for beginners.

It is a very useful tool when it comes to auditing Progressive web apps.

I actually learned so much about optimization and performance standards when I started using Lighthouse. In no time you would become an expert in building full optimized web apps with great performance, accessibility and user experience. :)

Lighthouse is not magic, it was created by humans. It is open source and contributions are welcome. Check out the repository’s issue tracker to find bugs that you can fix, or audits that you can create or improve upon. The issues tracker is also a good place to discuss audit metrics, ideas for new audits, or anything else related to Lighthouse.

Thank you for reading this, after installing and using Lighthouse, share your success stories in the comments!

Also, I just launched my blog where I write articles on web and frontend development, don’t forget to visit and share!!!