Hoe kan u u webwerf met Google Lighthouse toets?

‘N Nuwe instrument deur Google is om u die aanbeveling te gee om prestasies, SEO, sekuriteit, beste praktyke en toeganklikheid te verbeter.


Google het onlangs bekendgestel Lighthouse, ‘n open source-instrument om u webwerf met die hand en outomaties te kontroleer.

Watter statistieke word getoets deur Google Lighthouse?

Daar is meer as 75 statistieke dit toets en gee jou algehele puntetelling. Sommige van die volgende gewilde aspekte waaraan u sou belangstel, is ‘n webwerf-eienaar, SEO-ontleder, webmeesters.

  • Optrede – tyd vir interaktiewe, latency, snelheidsindeks, optimalisering van hulpbronne, TTFB, lewering van bates, uitvoeringstyd van skrifte, DOM-grootte, ens..
  • SEO – Mobiele vriendelike, meta, kruip, kanoniek, struktuur, ens.
  • Beste praktyke – Beeldoptimalisering, JS-biblioteke, blaaierfoutopname, toeganklik via HTTPS, bekende JS-kwesbaarhede, ens.
  • Toeganklikheid  – Bladelemente, taal, ARIA-attribute, ens.
  • PWA (Progressiewe webtoepassing) – herlei HTTP na HTTPS, reaksie kode ok, vinnig laai op 3G, spatskerm, uitsig, ens..

Dit is ‘n fantastiese instrument wat u op verskillende maniere kan gebruik.

Dit is reg – soveel maniere. As u ‘n ontwikkelaar is, kan u dit met Node.js gebruik om ‘n toets programmaties uit te voer. Daar is reeds min instrumente in die mark, aangedryf deur Lighthouse wat deurlopende monitering van prestasie op die perseel bied.

Kom ons kyk hoe u ‘n vuurtoringtoets teen u webwerf uitvoer.

Begin van die maklikste een.

Meet deur web.dev

Google het web.dev ‘n paar maande terug vrygestel en ‘n goeie gewildheid verwerf. Dit is maklik om aanlyn te toets.

Gaan na meet bladsy en voer die URL in om die oudit uit te voer. Dit sal ‘n paar sekondes duur, en u moet die gedetailleerde verslaggewing met die algehele puntetelling sien.

Die resultate toon ook die suksesmetrieketoets wat so goed gedoen is vir die geslaagde oudits en daaraan aandag gegee moet word.

Moenie te veel tyd spandeer om 100 te kry nie. Selfs Google se werwe verdien dit nie.

Beskou dit as riglyne en probeer om soveel moontlik te verbeter.

Let wel: web.dev volg ‘n toets na met ‘n mobiele toestel en ek sien nie die opsie om met Desktop te toets nie, terwyl ek skryf.

Chroom

Weet jy dat vuurtoring in jou Chrome-blaaier beskikbaar is? En die goeie nuus is dat u kan kies om te toets met behulp van mobiele of desktop. Dit is beskikbaar in ontwikkelaarsnutsgoed.

  • Maak Chrome-blaaier oop
  • Gaan na u webwerf om te toets
  • Maak ontwikkelaarinstrumente oop (druk F12 as u Windows gebruik) of regs klik op die bladsy en klik op Inspekteer
  • Gaan na die oortjie-oortjie

Soos u hierbo sien, het u die opsie om te kies wat u wil toets. Dit is wonderlik, aangesien u op u doel kan fokus en die ouditresultate vinniger kan kry.

Resultate lyk en voel van Chome en web.dev is amper soortgelyk.

Maar as u noukeurig daarna kyk, is daar een ekstra groep vir statistieke hier – Progressiewe webprogram. Dit is ‘n ander rede om Chrome te oudit.

Node.js

Vuurtoring is beskikbaar as node-module. U kan dit op u bediener installeer en dit programmaties of opdragreël gebruik. Kom ons kyk vinnig hoe om vuurtoring te installeer om ‘n toets uit te voer.

Die installering van Vuurtoring op Ubuntu 18.x

Die volgende het ek getoets op DigitalOcean bediener. Lighthouse benodig Node LTS 8.9 of later en ek neem aan dat u dit reeds geïnstalleer het. Indien nie, verwys dan na hierdie Node.js-installasiegids.

U benodig ook chroom blaaier om op die bediener geïnstalleer te word. Ek het die installasie-instruksies hier bespreek.

Net soos ander modules, is dit eenvoudig om die vuurtoring te installeer.

  • Teken in op u bediener
  • Voer die volgende opdrag uit om te installeer

npm installeer -g vuurtoring

Ek gebruik hier -g sodat dit geïnstalleer word as ‘n globale module.

[Email protected]: ~ # npm installeer -g vuurtoring
/ Usr / bin / vuurtoring -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ Usr / bin / Chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [Email protected] postinstall / usr / lib / node_modules / vuurtoring / node_modules / ax-core
> node build / utils / postinstall.js

+ [Email protected]
het 179 pakkette bygevoeg van 119 bydraers in 10.094’s
[Email protected]: ~ #

Sodra dit geïnstalleer is, voer die vuurtoringopdrag uit om te verseker dat dit korrek geïnstalleer is.

[Email protected]: ~ # vuurtoring
Verskaf asseblief ‘n url

Spesifiseer – help vir beskikbare opsies
[Email protected]: ~ #

Goeie vuurtoring is gereed om die oudit uit te voer. Kom ons probeer ‘n paar toetsopsies.

Om ‘n toets met ‘n koplose blaaier uit te voer

vuurtoring-URL – chroom-vlae ="–onthoofde"

U moet ‘n absolute URL insluitend http of https verskaf.

ex:

[Email protected]: ~ $ vuurtoring https://geekflare.com – chrome-vlae ="–onthoofde"
ChromeLauncher wag vir blaaier. + 0ms
ChromeLauncher wag vir blaaier … + 1 ms
ChromeLauncher wag vir blaaier ….. + 511 ms
ChromeLauncher wag vir die blaaier ….. + 2 ms
status Verbinding met die leser + 176ms
status Herstel van die staat met ongeveer: leeg + 24ms
status Prestasiemasjien + 30 ms
status Inisialisering… + 508 ms
status Laai bladsy & wag vir laaiboek-skrifte, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, PasswordReactiveWebs , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
status Herwin in-bladsy: Scripts + 2s
status Herwin in-bladsy: CSSUsage + 0ms
status Herwin van die in-bladsy: Viewport + 0ms
status Herwin in-bladsy: ViewportDimensions + 0ms
status Herwin in-bladsy: ThemeColor + 0ms
status Herwin in-bladsy: Manifest + 0ms
status Herwin in-bladsy: RuntimeExceptions + 0ms
status Herwin in-bladsy: ChromeConsoleMessages + 0ms
status Herwin van in-bladsy: ImageUsage + 0ms
status Herwin in-bladsy: toeganklikheid + 0ms
status Herwin in-bladsy: LinkElements + 0ms
status Herwin in-bladsy: AnchorsWithNoRelNoopener + 1ms
status Herwin in-bladsy: AppCacheManifest + 0ms
status Herwin in-bladsy: Doctype + 0ms
status Herwin in-bladsy: DOMStats + 0ms
status Herwin in-bladsy: JSLibraries + 0ms
status Herwin in-bladsy: OptimizedImages + 0ms
status Herwin van die in-bladsy: WagwoordinvoereWithPreventedPaste + 0ms
status Herwin in-bladsy: ResponseCompression + 0ms
status Herwin in-bladsy: Tags BlockingFirstPaint + 0ms
status Herwin in-bladsy: MetaDescription + 0ms
status Herwin in-bladsy: FontSize + 0ms
status Herwin in-bladsy: CrawlableLinks + 0ms
status Herwin van in-bladsy: MetaRobots + 0ms
status Herwin in-bladsy: Hreflang + 0ms
status Herwin in-bladsy: EmbeddedContent + 0ms
status Herwin in-bladsy: Canonical + 0ms
status Herwin in-bladsy: RobotsTxt + 0ms
status Herhaal spoor + 1ms
status Herwin devtoolsLog & netwerkrekords + 110 ms
status herwin: skrifte + 27 ms
status herwin: CSSUsage + 53ms
status herwin: Viewport + 192ms
status herwin: ViewportDimensions + 5ms
status Herwinning: ThemeColor + 13ms
status herwin: manifest + 2ms
status herwin: RuntimeExceptions + 295ms
status herwin: ChromeConsoleMessages + 1ms
status herwin: ImageUsage + 2ms
status herwin: toeganklikheid + 22 ms
status herwin: LinkElements + 526ms
status Herwin: AnchorsWithNoRelNoopener + 10ms
status herwin: AppCacheManifest + 6ms
status herwin: Doctype + 20ms
status herwin: DOMStats + 4ms
status herwin: JSLibraries + 50ms
status herwin: OptimizedImages + 25ms
status Herwin: WagwoordinvoereWithPreventedPaste + 234ms
status herwin: ResponseCompression + 3ms
status herwin: tagsBlockingFirstPaint + 7ms
status herwin: MetaDescription + 6ms
status herwin: FontSize + 7ms
status herwin: CrawlableLinks + 245ms
status herwin: MetaRobots + 6ms
status Herwin: Hreflang + 2ms
status herwin: EmbeddedContent + 2ms
status herwin: Kanoniek + 3ms
status herwin: RobotsTxt + 6ms
status Herstel van die staat met ongeveer: leeg + 19ms
status Laai bladsy & wag vir die aflaai ServiceWorker, Offline, StartUrl + 24ms
status Herwin in-bladsy: ServiceWorker + 59ms
status Herwin in-bladsy: Vanlyn + 0ms
status Herwin in-bladsy: StartUrl + 1ms
status Herwin devtoolsLog & netwerkrekords + 0ms
status herwin: ServiceWorker + 2ms
status herwin: Vanlyn + 1 ms
status herwin: StartUrl + 1ms
status Herstel van die staat met ongeveer: leeg + 5ms
status Laai bladsy & wag vir aflaai HTTPRedirect, HTMLWithoutJavaScript + 48ms
status Herwin in-bladsy: HTTPRirect + 260 ms
status Herwin in-bladsy: HTMLWithoutJavaScript + 0ms
status Herwin devtoolsLog & netwerkrekords + 0ms
status herwin: HTTPRirect + 7ms
status herwin: HTMLWithoutJavaScript + 12ms
status Ontkoppel van die blaaier … + 7ms
status Analise en uitvoering van oudits … + 6ms
status Evaluering: gebruik HTTPS + 3ms
status Evaluering: herlei HTTP-verkeer na HTTPS + 24ms
status Evaluering: registreer ‘n dienswerker wat bladsy- en start_url + 1ms beheer
status Evaluering: huidige bladsy reageer met ‘n 200 as hulle vanlyn + 0 ms
status Evaluering: het ‘n ‘tag met’ breedte ‘of’ aanvanklike skaal ‘+ 1 ms
status Evaluering: Bevat inhoud as JavaScript nie beskikbaar is nie + 1 ms
status Evaluering: eerste inhoud verf + 6ms
status Evaluering: Eerste betekenisvolle verf + 54ms
status Evaluering: bladsylading is vinnig genoeg in mobiele netwerke + 10 ms
status Evaluering: Snelheidsindeks + 33 ms
status Evaluering: Screenshot Thumbnails + 529ms
status Evaluering: Finale skermafdruk + 287ms
status Evaluering: Geskatte invoerlading + 2 ms
status Evaluering: Geen blaaierfoute is by die konsole aangemeld nie + 16ms
status Evaluering: die reaksietyd van die bediener is laag (TTFB) + 1 ms
status Evaluering: Eerste CPU Idle + 1ms
status Evaluering: tyd vir interaktief + 30 ms
status Evaluering: Gebruikers se tydsberekening en -metings + 0ms
status Evaluering: minimaliseer kritiese versoeke Diepte + 2 ms
status Evaluering: Vermy meerdere bladsyherleidings + 3 ms
status Evaluering: Webprogrammanifes voldoen aan die installeerbaarheidsvereistes + 2 ms
status Evaluasie: gekonfigureer vir ‘n pasgemaakte plonsskerm + 1 ms
status Evaluering: stel ‘n adreskleur-temakleur + 0ms in
status Evaluering: die inhoud is korrek vir die uitsig + 1 ms
status Evaluering: vertoon prente met die korrekte beeldverhouding + 0ms
status Evaluering: vermy verouderde API’s + 1 ms
status Evaluering: minimaliseer die werk van die hoof draad + 0ms
status Evaluering: uitvoering van JavaScript + 11 ms
status Evaluering: Laai sleutelversoeke vooraf + 3 ms
status Evaluering: Verbind weer met die vereiste oorsprong + 2 ms
status Evaluering: alle teks bly sigbaar tydens webfont + + 2 ms
status Evaluering: Netwerkversoeke + 1 ms
status Evaluering: statistieke + 2ms
status Evaluering: start_url reageer met ‘n 200 as hulle vanlyn + 1 ms is
status Evaluering: webwerf werk kruis-blaaier + 1ms
status Evaluering: bladsyoorgange voel nie asof hulle op die netwerk + 0 ms blokkeer nie
status Evaluering: elke bladsy het ‘n URL + 0 ms
status Evaluering: ‘[aria – *]’ eienskappe pas by hul rolle + 1ms
status Evaluering: `[rol]` s het almal `[aria – *]` eienskappe + 1ms nodig
status Evaluering: elemente met ‘[rol]’ wat spesifieke kinders ‘[rol]’ benodig, is teenwoordig + 0ms
status Evaluering: `[rol]` s word vervat deur hul vereiste ouerelement + 1ms
status Evaluering: ‘[rol]’ waardes is geldig + 1 ms
status Evaluering: `[aria – *]` eienskappe het geldige waardes + 0ms
status Evaluering: ‘[aria – *]’ kenmerke is geldig en is nie verkeerd gespel nie + 1ms
status Evaluering: “ elemente bevat ‘n ‘element met’ [kind ="onderskrifte"] `+ 1 ms
status Evaluering: knoppies het ‘n toeganklike naam + 1ms
status Evaluering: Die bladsy bevat ‘n opskrif, ‘n skakel oor, of landmerkgebied + 1 ms
status Evaluering: agtergrond- en voorgrondkleure het ‘n voldoende kontrasverhouding + 1 ms
status Evaluering: “ bevat slegs ‘ordelik’ en ‘groepe’ of ‘elemente’. + 1ms
status Evaluering: Definisie-lysitems word toegedraai in “ elemente + 0ms
status Evaluering: Die dokument het ‘n element + 1 ms
status Evaluering: ‘[id]’ -kenmerke op die bladsy is uniek + 1 ms
status Evaluering: “ of ” elemente het ‘n titel + 1ms
status Evaluering: “ element het ‘n `[lang]` kenmerk + 0ms
status Evaluasie: “ element het ‘n geldige waarde vir die kenmerk ‘[lang]’ + 1ms
status Evaluering: Beeldelemente het ‘[alt]’ eienskappe + 1 ms
status Evaluering: “ elemente het ‘[alt]’ teks + 1ms
status Evaluering: vormelemente het bykomstige etikette + 0ms
status Evaluering: Aanbieding `

`elemente vermy die gebruik van die kenmerk` `,` `of die ‘[opsomming’]. + 1ms
status Evaluering: Skakels het ‘n waarneembare naam + 1 ms
status Evaluering: lyste bevat slegs `
  • `elemente en skrifondersteunende elemente (` `en` `). + 1ms
    status Evaluering: lys items (`
  • `) is vervat in`
      `of`
        `ouerelemente + 1 ms
        status Evaluering: die dokument gebruik nie “ + 0ms
        status Evaluering: `[gebruiker-skaalbaar ="geen"] `word nie in die` `element gebruik nie en die kenmerk ‘[maksimum-skaal]’ is nie minder nie as 5. + 1ms
        status Evaluering: “ elemente het ‘[alt]’ teks + 1ms
        status Evaluering: Geen element het ‘n ‘[tabindex]’ waarde groter as 0 + 1 ms
        status Evaluering: selle in ‘n `
  • ‘element wat die kenmerk’ [headers] ‘gebruik, verwys slegs na ander selle van dieselfde tabel. + 1ms
    status Evaluering: ‘elemente en elemente met’ [rol ="columnheader"/"rowheader"] `het dataselle wat hulle beskryf. + 0ms
    status Evaluering: ‘[lang]’ -kenmerke het ‘n geldige waarde + 1 ms
    status Evaluering: “ elemente bevat ‘n ‘element met’ [kind ="onderskrifte"] `+ 1 ms
    status Evaluering: “ elemente bevat ‘n ‘element met’ [kind ="beskrywing"] `+ 1 ms
    status Evaluering: ‘[accesskey]’ waardes is uniek + 1 ms
    status Evaluering: Pasgemaakte kontroles het etikette + 0ms
    status Evaluering: Pasgemaakte kontroles het ARIA-rolle + 1 ms
    status Evaluering: gebruikersfokus word nie per ongeluk in ‘n streek + 0 ms vasgevang nie
    status Evaluering: interaktiewe kontroles is op die sleutelbord gefokus + 0 ms
    status Evaluering: opskrifte slaan nie die vlak van + 0ms oor nie
    status Evaluering: interaktiewe elemente dui hul doel en toestand + 1ms aan
    status Evaluering: die bladsy het ‘n logiese tabbladorde + 0ms
    status Evaluering: die fokus van die gebruiker word gerig op nuwe inhoud wat op die bladsy + 1ms gevoeg is
    status Evaluering: inhoud op die skerm is weggesteek vir hulptegnologie + 0 ms
    status Evaluering: HTML5-landmerkelemente word gebruik om navigasie + 0ms te verbeter
    status Evaluering: Visuele volgorde op die bladsy volg DOM-volgorde + 0ms
    status Evaluering: gebruik doeltreffende kasbeleid vir statiese bates + 1 ms
    status Evaluering: vermy geweldige netwerklading + 3 ms
    status Evaluering: Stel prentjies op die skerm + 1 ms uit
    status Evaluering: Skakel hulpbronblokkeerbronne + 12 ms uit
    status Evaluering: Verklein CSS + 28ms
    status Evaluering: verklein JavaScript + 64 ms
    status Evaluering: Stel ongebruikte CSS + 69ms uit
    status Evaluering: Bedien beelde in volgende gen-formate + 12ms
    status Evaluering: kodering van beelde effektief + 11 ms
    status Evaluering: Aktiveer tekskompressie + 6ms
    status Evaluering: Behoorlike grootte beelde + 6 ms
    status Evaluering: gebruik videoformate vir geanimeerde inhoud + 7 ms
    status Evaluasie: vermy Cache + 11ms van toepassing
    status Evaluering: bladsy het die HTML-leerstof + 0ms
    status Evaluering: vermy ‘n buitensporige DOM-grootte + 1 ms
    status Evaluering: Skakels na bestemmings tussen oorsprong is veilig + 2 ms
    status Evaluering: vermy die toestemming vir geolokalisering op bladsylading + 1ms
    status Evaluering: vermy `document.write ()` + 0ms
    status Evaluering: vermy JavaScript-biblioteke aan die voorkant met bekende beveiligingsgevoelens + 0ms
    status Evaluering: opgespoor JavaScript-biblioteke + 9 ms
    status Evaluering: vermy om die kennisgewing toestemming te vra op bladsylading + 1 ms
    status Evaluering: laat gebruikers toe om in wagwoordvelde + 0ms in te plak
    status Evaluering: gebruik HTTP / 2 vir sy eie hulpbronne + 0ms
    status Evaluering: gebruik passiewe luisteraars om blaaiprestasie + 1ms te verbeter
    status Evaluering: dokument het ‘n metabeskrywing + 0ms
    status Evaluering: bladsy het suksesvolle HTTP-statuskode + 1 ms
    status Evaluering: dokument gebruik leesbare skrifgroottes + 5 ms
    status Evaluering: Skakels het beskrywende teks + 1ms
    status Evaluering: bladsy is nie blokkeer van die indeksering van + 1 ms nie
    status Evaluering: robots.txt is geldig + 2ms
    status Evaluering: dokument het ‘n geldige `hreflang` + 1ms
    status Evaluering: dokument vermy plugins + 1ms
    status Evaluering: dokument het ‘n geldige `rel = canonical` + 0ms
    status Evaluering: bladsy is mobiele vriendelik + 1ms
    status Evaluering: Gestruktureerde data is geldig + 0ms
    status Genereer resultate … + 0ms
    ChromeLauncher maak Chrome-instansie 7098 + 59ms dood
    Drukker HTML-uitvoer geskryf na /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: Begin vuurtoring met ‘–view’ om die HTML-verslag onmiddellik in u blaaier + 1ms oop te maak

    In die tweede laaste reël, kan u sien dat dit die pad waarop ek die verslag kan vind, gedruk het. Dit sal standaard ‘n verslag in HTML-formaat genereer wat u kan besigtig deur dit op u rekenaar af te laai of dit via een of ander webbediener te bedien.

    Maar wat as u ‘n verslag in moet opstel? into formaat?

    Dit kan soos volg gedoen word.

    vuurtoring-URL – chroom-vlae ="–onthoofde" –uitvoer json –output-pad URL.json

    Deur Lighthouse CLI te gebruik, is u in volle beheer om die manier waarop u dit wil gebruik, te gebruik. Ek sal sterk aanbeveel om na die GitHub-bewaarplek om meer te leer oor die gebruik van CLI of programmaties.

    Afsluiting

    Google Lighthouse lyk belowend om ‘n kontinuïteitstoets uit te voer om die werkverrigting en bruikbaarheid van die werf te verbeter. As u WordPress gebruik en u werf vinniger wil laai, gaan kyk gerus vuurpyl.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map