Introduktion til Chrome Fyrtårn

Chrome Lighthouse har eksisteret i et stykke tid nu, men hvad hvis jeg beder dig om at forklare, hvad det gør, kan du forklare levende?

Jeg opdagede, at mange webudviklere, inklusive begyndere, ikke har hørt om dette værktøj, og de der har, har ikke prøvet det endnu, det er ikke sejt :(.

I denne artikel vil jeg introducere dig til Chrome Lighthouse, hvad det gør, og hvordan man begynder at bruge det.

PS: Denne artikel blev første gang offentliggjort på min blog

Lad os komme igang :)

Ifølge Wikipedia er et fyrtårn et tårn, en bygning eller andre typer strukturer designet til at udsende lys fra et system med lamper og linser og til at fungere som en navigationshjælp til maritime piloter til søs eller på indre vandveje.

Okay, lad os gøre dette til et teknisk udtryk;

Fyrtårn er et tårn, en bygning eller andre typer strukturer designet til at udsende lys fra et system under "Audits" -panelet i Chrome Developer Tools og til at fungere som en guide til udviklere

Giver nogen mening? :)

Nå, Lighthouse er et værktøj udviklet af Google, der analyserer webapps og websider, der samler moderne præstationsmålinger og indsigt i bedste praksis for udviklere.

Tænk på Lighthouse som speedometeret i en bil, der kontrollerer og afbalancerer bilens hastighedsgrænse.

Dybest set arbejder Lighthouse med udviklerens bedste praksis og præstationsmålinger. Det kører kontrol på en webapp og giver dig feedback om fejl, fremgangsmåder under standard, tip til bedre ydeevne og hvordan man løser dem.

Ifølge Google Developers Docs

Lighthouse er et open source, automatiseret værktøj til forbedring af kvaliteten af ​​websider. Du kan køre den mod enhver webside, offentlig eller kræver godkendelse. Det har audits for ydeevne, tilgængelighed, progressive webapps og meget mere. Du kan køre Lighthouse i Chrome DevTools fra kommandolinjen eller som et nodemodul. Du giver Lighthouse en URL til revision, den kører en række revisioner mod siden, og derefter genererer den en rapport om, hvor godt siden klarede sig. Brug derfra de fejlagtige revisioner som indikatorer for, hvordan du forbedrer siden. Hver revision har et referencedokument, der forklarer, hvorfor revisionen er vigtig, samt hvordan den løses.

Det handler stort set om fyrtårn, det reviderer webadressens URL og genererer en rapport, der fortæller dig, hvor dårlig og god din webapp er i henhold til webstandarder og udvikleres bedste praksis. Vedhæftet til hvert afsnit i rapporten er også dokumentation, der forklarer, hvorfor den del af din app blev revideret, hvorfor du skulle forbedre den del af din app, og hvordan du fikser den.

Her er en demo af Lighthouse-auditrapport for denne blog //bolajiayodeji.com

Temmelig sej, ikke? :)

Hvad du skal bemærke er, at jeg ikke fik gode scoringer som denne på min første revision. Jeg var nødt til at bruge min første rapport til at rette og forbedre ydeevnen og kvaliteten af ​​min app.

Dette er ideen bag Lighthouse, det er at identificere og rette almindelige problemer, der påvirker dine websteds ydeevne, tilgængelighed og brugeroplevelse.

Lad os nu gå til den interessante del, HVORDAN KOM I GANG !!

LightHouse fås i tre arbejdsgange

  • Chrome Developer Tools
  • Kommandolinje (knude)
  • En Chrome-udvidelse

Jeg foretrækker personligt at bruge LightHouse i Dev Tools. Brug af udvidelsen giver ikke mening, da Dev-værktøjet og udvidelsen fungerer i den samme krombrowser, ja, vores præference varierer, brug det, der fungerer bedst for dig.

Fyr var først kun tilgængelig med Chrome-udvidelsen, før den blev føjet til Chrome DevTools.

At bruge fyrtårn på kommandolinjen er også rigtig cool, (For nørder :))

Lad os komme igang!!!

[1] Kør fyr i Chrome DevTools

  • Download Google Chrome-webbrowser her
Bemærk, at fyr kun kan køres på et skrivebord og ikke mobil
  • Gå til den URL, du vil kontrollere i Google Chrome.
Du kan kontrollere enhver webadresse på nettet.
  • Åbn Chrome DevTools
Command+Option+C (Mac) Control+Shift+C (Windows, Linux, Chrome OS).
  • Klik på Revision panel

Til venstre er visningen på den side, der vil blive revideret, her er det min blog :). Til højre er Audits-panelet på Chrome DevTools, som nu er drevet af Lighthouse

  • Klik på Kør revisioner
DevTools viser dig en liste over revisionskategorier. Sørg for, at du lader dem alle være markeret. Hvis du vil personalisere, hvilken del af din app der skal revideres, kan du indstille det ved at kontrollere de kategorier, du vil kontrollere.
  • Efter 60 til 90 sekunder - afhængigt af din internetstyrke, giver Lighthouse dig en rapport på siden.
Ikke at din internethastighed og forudinstallerede udvidelser kan påvirke fyrtårnsrevisioner. For bedre oplevelse skal du køre revisioner i Icognito-tilstandfor at undgå interferens

[2] Kør fyrtårnet på kommandolinjen

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

Jeg lærte faktisk så meget om optimering og præstationsstandarder, da jeg begyndte at bruge Lighthouse. På ingen tid vil du blive ekspert i at opbygge fuldt optimerede webapps med god ydeevne, tilgængelighed og brugeroplevelse. :)

Fyr er ikke magisk, det blev skabt af mennesker. Det er open source, og bidrag er velkomne. Tjek lagerets problemsporing for at finde fejl, du kan rette, eller revisioner, som du kan oprette eller forbedre. Spørgsmålssporeren er også et godt sted at diskutere revisionsmålinger, ideer til nye revisioner eller andet, der er relateret til fyrtårnet.

Tak fordi du læste dette, efter installation og brug af Lighthouse, del dine succeshistorier i kommentarerne!

Jeg har lige lanceret min blog, hvor jeg skriver artikler på nettet og frontend-udvikling, glem ikke at besøge og dele !!!