Hoe test u uw site met Google Lighthouse?

Een nieuwe tool van Google test en geeft u aanbevelingen om de prestaties, SEO, beveiliging, best practices en toegankelijkheid te verbeteren.

Google lanceerde onlangs Vuurtoren, een open-source tool om uw website handmatig en automatisch te controleren.

Welke statistieken worden getest door Google Lighthouse?

Er zijn meer dan 75 statistieken het test en geeft u een algemene score. Als site-eigenaar, SEO-analist en webmaster bent u misschien geïnteresseerd in enkele van de volgende populaire.

• Prestaties - tijd tot interactief, latentie, snelheidsindex, optimalisatie van bronnen, TTFB, levering van middelen, uitvoeringstijd van scripts, DOM-grootte, enz.
• SEO - Mobielvriendelijk, meta, crawling, canonical, structuur, enz.
• Beste Praktijken - Beeldoptimalisatie, JS-bibliotheken, browserfoutregistratie, toegankelijk via HTTPS, bekende JS-kwetsbaarheden, enz.
• Toegankelijkheid  - Pagina-elementen, taal, ARIA-attributen, enz.
• PWA (Progressive Web Application) - HTTP omleiden naar HTTPS, responscode ok, snel laden op 3G, splashscreen, viewport, enz.

Het is een fantastisch hulpmiddel en u kunt het op meerdere manieren gebruiken.

Dat klopt - op zoveel manieren. Als u een ontwikkelaar bent, kunt u Node.js gebruiken om een test programmatisch uit te voeren. Er zijn al een paar tools op de markt die worden aangedreven door Lighthouse en die continue site performance monitoring bieden.

Laten we eens kijken hoe u de lighthouse test op uw site uitvoert.

Begin bij de gemakkelijkste.

Maatregel door web.dev

Google heeft web.dev een paar maanden geleden uitgebracht en het werd erg populair. Online testen is eenvoudig.

Ga naar Maatregel pagina en voer de URL in om de audit uit te voeren. Het zal een paar seconden duren, en u zou de gedetailleerde rapportage met de totaalscore moeten zien.

De resultaten laten ook zien welke succesfactoren zijn getest voor de audits die zijn geslaagd en aan welke punten moet worden gewerkt.

Besteed niet te veel tijd aan het krijgen van 100. Zelfs de sites van Google scoren dat niet.

Beschouw ze als richtlijnen en probeer zoveel mogelijk te verbeteren.

Opmerking: web.dev emuleert een test met een mobiel apparaat, en tijdens het schrijven zie ik geen optie om met Desktop te testen.

Chroom

Weet u dat Lighthouse beschikbaar is in uw Chrome browser? En het goede nieuws is dat u kunt kiezen om mobiel of desktop te testen, en dat het beschikbaar is in de Developer tools.

• Chrome-browser openen
• Ga naar uw site om te testen
• Open de Developer tools (druk op F12 als u Windows gebruikt) of klik met de rechtermuisknop op de pagina en klik op Inspecteren.
• Ga naar het tabblad Audits.

Zoals u hierboven kunt zien, kunt u kiezen wat u wilt testen. Dit is geweldig om u op uw doel te concentreren en sneller de controleresultaten te krijgen.

Het uiterlijk en gevoel van Chome en web.dev is bijna gelijk.

Maar als u er goed naar kijkt, is er hier nog een extra metriekgroep -. Progressieve webapp. Dus nog een reden om Chrome niet te gebruiken.

Geekflare Vuurtoren API

U kunt de webprestatiegegevens ook krijgen met Geekflare Vuurtoren API. Dit haalt Lighthouse statistieken voor mobiel of desktop met slechts één klik in HTML-, JSON- of CSV-formaat.

U kunt het rapport ook aanpassen door de uitvoerindeling te wijzigen en/of u te richten op een bepaalde metriek, zoals SEO.

{
  "parameters": [
      "--output=html",
      "--only-categories=seo",
  ],
  "url": "example.com"
}

En gelukkig hebben we een gratis tier zonder verplichtingen met 3000 API-aanvragen per maand. De betaalde versies voegen echter ondersteuning voor meerdere locaties, residentiële proxy en hogere aanvraagsnelheden toe, beginnend bij slechts $5 per maand.

Node.js

Lighthouse is beschikbaar als een Node-module. U kunt het op uw server installeren en programmatisch of via de opdrachtregel gebruiken. Laten we snel eens kijken hoe u Lighthouse kunt installeren om enkele tests uit te voeren.

Lighthouse installeren op Ubuntu 18.x

Het volgende heb ik getest op de DigitalOcean server. Lighthouse vereist Node LTS 8.9 of later, en ik neem aan dat u dat al geïnstalleerd hebt. Zo niet, raadpleeg dan dit Node.js installatiegids.

U hebt ook een browser chroom die op de server geïnstalleerd moet worden. Ik heb de installatie behandeld instructie hier.

Het installeren van Lighthouse is eenvoudig, zoals u dat ook bij andere modules doet.

• Inloggen op uw server
• Voer de volgende opdracht uit om te installeren

npm install -g lighthouse

Ik gebruik -g hier, zodat het als een globale module wordt geïnstalleerd.

root@geekflarelab:~# npm install -g lighthouse
/usr/bin/lighthouse -> /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

> axe-core@3.1.2 postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core
> node build/utils/postinstall.js

+ lighthouse@4.0.0
added 179 packages from 119 contributors in 10.094s
root@geekflarelab:~#

Voer na de installatie het volgende uit lighthouse commando om er zeker van te zijn dat het correct geïnstalleerd is.

root@geekflarelab:~# lighthouse
Please provide a url

Specify --help for available options
root@geekflarelab:~#

Goed, de vuurtoren is klaar om de audit uit te voeren. Laten we wat testopties proberen.

Een test uitvoeren met een headless browser

lighthouse URL --chrome-flags="--headless"

U moet een absolute URL opgeven, inclusief HTTP of HTTPS.

Ex:

chandan@geekflarelab:~$ lighthouse https://geekflare.com --chrome-flags="--headless"
  ChromeLauncher Wacht op browser. +0ms
  ChromeLauncher Wacht op browser... +1ms
  ChromeLauncher Wacht op browser..... +511ms
  ChromeLauncher Wacht op browser.....✓ +2ms
  status Verbinding maken met browser +176ms
  status Status resetten met <a href="https://geekflare.com/aboutblank-in-chrome-firefox-safari/">over:blanco</a> +24ms
  status Benchmarking machine +30ms
  status Initialiseren... +508ms
  status Pagina laden &amp; wachten op onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt +27ms
  status Ophalen in-pagina: Scripts +2s
  status Ophalen in-pagina: CSSUsage +0ms
  status Ophalen in-pagina: Viewport +0ms
  status Opgehaald in-pagina: ViewportDimensions +0ms
  status Opgehaald in-pagina: ThemaKleur +0ms
  status Opgehaald in-pagina: Manifest ophalen +0ms
  status Opgehaald in-pagina: RuntimeExceptions +0ms
  status Ophalen in-pagina: ChromeConsoleMessages +0ms
  status Ophalen in-pagina: ImageUsage +0ms
  status Ophalen in-pagina: Toegankelijkheid +0ms
  status Ophalen in-pagina: LinkElements ophalen +0ms
  status Ophalen in-pagina: AnkersMetGeenRelNoopener +1ms
  status Ophalen in-pagina: AppCacheManifest +0ms
  status Ophalen in-pagina: Doctype +0ms
  status Ophalen in-pagina: DOMStats ophalen +0ms
  status Opgehaald in-pagina: JSLibraries ophalen +0ms
  status Opgehaald in-pagina: OptimizedImages +0ms
  status Opgehaald in-pagina: PasswordInputsWithPreventedPaste +0ms
  status Opgehaald in-pagina: ResponseCompressie +0ms
  status Opgehaald in-pagina: TagsBlockingFirstPaint +0ms
  status Opgehaald in-pagina: MetaDescription +0ms
  status Opgehaald in-pagina: FontSize +0ms
  status Opgehaald in-pagina: CrawlableLinks +0ms
  status Ophalen in-pagina: MetaRobots +0ms
  status Opzoeken in-pagina: Hreflang +0ms
  status Ophalen in-pagina: Ingebedde inhoud +0ms
  status Opzoeken in-pagina: Canoniek +0ms
  status Ophalen in-pagina: RobotsTekst +0ms
  status Trace ophalen +1ms
  status DevtoolsLog &amp; netwerkrecords ophalen +110ms
  status Ophalen: Scripts +27ms
  status Ophalen: CSSUsage +53ms
  status Ophalen: Viewport +192ms
  status Opgehaald: ViewportDimensies +5ms
  status Ophalen: ThemaKleur +13ms
  status Ophalen: Manifest +2ms
  status Ophalen: RuntimeExceptions +295ms
  status Ophalen: ChromeConsoleMessages +1ms
  status Ophalen: ImageUsage +2ms
  status Ophalen: Toegankelijkheid +22ms
  status Ophalen: LinkElements +526ms
  status Ophalen: AnkersMetGeenRelNoopener +10ms
  status Ophalen: AppCacheManifest ophalen +6ms
  status Ophalen: Doctype +20ms
  status Ophalen: DOMStats ophalen +4ms
  status Ophalen: JSLibraries +50ms
  status Ophalen: OptimizedImages +25ms
  status Ophalen: PasswordInputsWithPreventedPaste +234ms
  status Ophalen: ResponseCompressie +3ms
  status Ontvangen: TagsBlockingFirstPaint +7ms
  status Ophalen: MetaDescription +6ms
  status Opgehaald: Lettergrootte +7ms
  status Ophalen: CrawlableLinks +245ms
  status Ophalen: MetaRobots +6ms
  status Ophalen: Hreflang +2ms
  status Ophalen: EmbeddedContent +2ms
  status Ophalen: Canoniek +3ms
  status Ophalen: RobotsTxt +6ms
  status Status resetten met <a href="https://geekflare.com/aboutblank-in-chrome-firefox-safari/">over:blanco</a> +19ms
  status Pagina laden &amp; wachten op onload ServiceWorker, Offline, StartUrl +24ms
  status Ophalen in-pagina: ServiceWorker +59ms
  status Ophalen in-pagina: Offline +0ms
  status Ophalen in-pagina: StartUrl +1ms
  status Opvragen devtoolsLog &amp; netwerkrecords +0ms
  status Ophalen: ServiceWorker +2ms
  status Ophalen: Offline +1ms
  status Ophalen: StartUrl +1ms
  status Status resetten met <a href="https://geekflare.com/aboutblank-in-chrome-firefox-safari/">over:blanco</a> +5ms
  status Pagina laden &amp; wachten op onload HTTPRedirect, HTMLWithoutJavaScript +48ms
  status Ophalen in-pagina: HTTPRedirect +260ms
  status Ophalen in-pagina: HTMLWithoutJavaScript +0ms
  status Opvragen devtoolsLog &amp; netwerkrecords +0ms
  status Ophalen: HTTPRedirect +7ms
  status Ophalen: HTMLWithoutJavaScript +12ms
  status Verbinding met browser verbreken... +7ms
  status Audits analyseren en uitvoeren... +6ms
  status Evalueren: Gebruikt HTTPS +3ms
  status Evalueren: Leidt HTTP-verkeer om naar HTTPS +24ms
  status Evaluerend: Registreert een service worker die pagina en start_url controleert +1ms
  status Evaluerend: Huidige pagina antwoordt met een 200 wanneer offline +0ms
  status Evaluerend: Heeft een `<meta name="viewport">` tag met `width` of `initial-scale` +1ms
  status Evalueren: Bevat enige inhoud als JavaScript niet beschikbaar is +1ms
  status Evalueren: Eerste Contentful Paint +6ms
  status Evalueren: Eerste betekenisvolle paint +54ms
  status Evalueren: Pagina laden is snel genoeg op mobiele netwerken +10ms
  status Evalueren: Snelheidsindex +33ms
  status Evalueren: Miniaturen schermafbeeldingen +529ms
  status Evalueren: Laatste schermafbeelding +287ms
  status Evalueren: Geschatte Ingangsvertraging +2ms
  status Evalueren: Geen browserfouten naar de console gelogd +16ms
  status Evalueren: Reactietijden server zijn laag (TTFB) +1ms
  status Evalueren: Eerste CPU inactief +1ms
  status Evalueren: Tijd tot Interactief +30ms
  status Evalueren: User Timing markeringen en metingen +0ms
  status Evalueren: Minimaliseer Kritieke Verzoeken Diepte +2ms
  status Evalueren: Meerdere pagina's vermijden +3ms
  status Evalueren: Het manifest van de webapp voldoet aan de vereisten voor installeerbaarheid +2ms
  status Evalueren: Geconfigureerd voor een aangepast splash-scherm +1ms
  status Evalueren: Stelt een themakleur in voor de adresbalk +0ms
  status Evalueren: Inhoud heeft de juiste grootte voor de viewport +1ms
  status Evalueren: Geeft afbeeldingen met de juiste beeldverhouding weer +0ms
  status Evalueren: Vermijdt verouderde API's +1ms
  status Evalueren: Minimaliseert main-thread werk +0ms
  status Evalueren: JavaScript uitvoeringstijd +11ms
  status Evalueren: Vooraf laden van toetsverzoeken +3ms
  status Evalueren: Vooraf verbinden met vereiste oorsprong +2ms
  status Evalueren: Alle tekst blijft zichtbaar tijdens het laden van het webfont +2ms
  status Evalueren: Netwerkverzoeken +1ms
  status Evalueren: Metriek +2ms
  status Evaluating: start_url reageert met een 200 wanneer offline +1ms
  status Evalueren: Site werkt cross-browser +1ms
  status Evalueren: Paginaovergangen hebben niet het gevoel dat ze blokkeren op het netwerk +0ms
  status Evalueren: Elke pagina heeft een URL +0ms
  status Evalueren: `[aria-*]` attributen komen overeen met hun rollen +1ms
  status Evalueren: `[role]`s hebben alle vereiste `[aria-*]` attributen +1ms
  status Evalueren: Elementen met `[role]` die specifieke kinderen `[role]` vereisen, zijn aanwezig +0ms
  status Evalueren: `[role]`s worden bevat door hun vereiste ouderelement +1ms
  status Evalueren: `[role]` waarden zijn geldig +1ms
  status Evalueren: `[aria-*]` attributen hebben geldige waarden +0ms
  status Evalueren: `[aria-*]` attributen zijn geldig en niet verkeerd gespeld +1ms
  status Evalueren: `<audio>` elementen bevatten een `<track>` element met `[kind="captions"]` +1ms
  status Evalueren: Knoppen hebben een toegankelijke naam +1ms
  status Evalueren: De pagina bevat een koptekst, link om over te slaan of oriëntatiepunt +1ms
  status Evalueren: Achtergrond- en voorgrondkleuren hebben voldoende contrast +1ms
  status Evalueren: `<dl>`'s bevatten alleen correct geordende `<dt>` en `<dd>` groepen, `<script>` or `<template>elementen. +1ms
  status Evalueren: Definitie lijstitems zijn verpakt in `<dl>elementen +0ms
  status Evalueren: Document heeft een `<title>` element +1ms
  status Evalueren: `[id]` attributen op de pagina zijn uniek +1ms
  status Evalueren: `` of `` elementen hebben een titel +1ms
  status Evalueren: `` element heeft een `[lang]` attribuut +0ms
  status Aan het evalueren: `` element heeft een geldige waarde voor zijn `[lang]` attribuut +1ms
  status Aan het evalueren: Beeldelementen hebben `[alt]` attributen +1ms
  status Evalueren: `` elementen hebben `[alt]` tekst +1ms
  status Evalueren: Formulierelementen hebben bijbehorende labels +0ms
  status Evalueren: Presentatieve `<table>` elementen vermijden het gebruik van `<th>`, `<caption>` of het `[summary]` attribuut. +1ms
  status Evalueren: Links hebben een duidelijke naam +1ms
  status Evalueren: Lijsten bevatten alleen `<li>` elementen en script ondersteunende elementen (`` en ``). +1ms
  status Evalueren: Lijstitems (`<li>`) staan in `<ul>` of `<ol>` bovenliggende elementen +1ms
  status Evalueren: Het document maakt geen gebruik van `` +0ms
  status Evalueren: `[user-scalable="no"]` wordt niet gebruikt in het `` element en het `[maximum-scale]` attribuut is niet kleiner dan 5. +1ms
  status Evalueren: `<object>` elementen hebben `[alt]` tekst +1ms
  status Evalueren: Geen enkel element heeft een `[tabindex]` waarde groter dan 0 +1ms
  status Evalueren: Cellen in een `<table>` element die het `[headers]` attribuut gebruiken verwijzen alleen naar andere cellen van diezelfde tabel. +1ms
  status Evalueren: `<th>` elementen en elementen met `[role="columnheader"/"rowheader"]` hebben gegevenscellen die ze beschrijven. +0ms
  status Evalueren: `[lang]` attributen hebben een geldige waarde +1ms
  status Evalueren: `<video>` elementen bevatten een `<track>` element met `[kind="captions"]` +1ms
  status Evalueren: `<video>` elementen bevatten een `<track>` element met `[kind="description"]` +1ms
  status Evalueren: `[accesskey]` waarden zijn uniek +1ms
  status Evalueren: Aangepaste besturingselementen hebben bijbehorende labels +0ms
  status Evalueren: Aangepaste besturingselementen hebben ARIA-rollen +1ms
  status Evalueren: De focus van de gebruiker zit niet per ongeluk vast in een gebied +0ms
  status Evalueren: Interactieve besturingselementen zijn via het toetsenbord te bedienen +0ms
  status Evalueren: Koppen slaan geen niveaus over +0ms
  status Evalueren: Interactieve elementen geven hun doel en status aan +1ms
  status Evalueren: De pagina heeft een logische tabvolgorde +0ms
  status Evaluerend: De aandacht van de gebruiker wordt gericht op nieuwe inhoud die aan de pagina is toegevoegd +1ms
  status Evalueren: Inhoud buiten het scherm is verborgen voor hulptechnologie +0ms
  status Evaluerend: HTML5 herkenningspunten worden gebruikt om de navigatie te verbeteren +0ms
  status Evalueren: Visuele volgorde op de pagina volgt DOM-volgorde +0ms
  status Evaluerend: Gebruikt een efficiënt cachebeleid voor statische activa +1ms
  status Evalueren: Vermijdt enorme netwerkbelasting +3ms
  status Evalueren: Offscreen afbeeldingen uitstellen +1ms
  status Evalueren: <a href="https://geekflare.com/eliminate-render-blocking-wordpress-plugins/">Renderblokkerende bronnen</a> elimineren +12ms
  status Evalueren: CSS minimaliseren +28ms
  status Evalueren: JavaScript minimaliseren +64ms
  status Evalueren: Ongebruikte CSS uitstellen +69ms
  status Evalueren: Afbeeldingen in next-gen formaten serveren +12ms
  status Evalueren: Afbeeldingen efficiënt coderen +11ms
  status Evalueren: Tekstcompressie inschakelen +6ms
  status Evalueren: Afbeeldingen de juiste grootte geven +6ms
  status Evalueren: Gebruik videoformaten voor geanimeerde inhoud +7ms
  status Evalueren: Vermijdt applicatiecache +11ms
  status Evalueren: Pagina heeft het HTML doctype +0ms
  status Evalueren: Vermijdt een te grote DOM-grootte +1ms
  status Evalueren: Koppelingen naar cross-origin bestemmingen zijn veilig +2ms
  status Evalueren: Vermijdt het aanvragen van de geolocatie-toestemming bij het laden van de pagina +1ms
  status Evaluerend: Vermijdt `document.write()` +0ms
  status Evalueren: Vermijdt front-end JavaScript-bibliotheken met bekende beveiligingsproblemen +0ms
  status Evalueren: JavaScript-bibliotheken gedetecteerd +9ms
  status Evalueren: Vermijdt het aanvragen van de notificatie-toestemming bij het laden van de pagina +1ms
  status Evaluerend: Staat gebruikers toe om in wachtwoordvelden te plakken +0ms
  status Evaluerend: Gebruikt HTTP/2 voor zijn eigen bronnen +0ms
  status Evalueren: Gebruikt passieve luisteraars om de scrollprestaties te verbeteren +1ms
  status Evaluerend: Document heeft een metabeschrijving +0ms
  status Evalueren: Pagina heeft een succesvolle HTTP-statuscode +1ms
  status Evalueren: Document gebruikt leesbare lettergroottes +5ms
  status Evalueren: Links hebben beschrijvende tekst +1ms
  status Evalueren: Pagina wordt niet geblokkeerd voor indexering +1ms
  status Evaluerend: robots.txt is geldig +2ms
  status Evalueren: Document heeft een geldige `hreflang` +1ms
  status Evalueren: Document vermijdt plugins +1ms
  status Evalueren: Document heeft een geldige `rel=canonical` +0ms
  status Evalueren: Pagina is mobielvriendelijk +1ms
  status Evalueren: Gestructureerde gegevens zijn geldig +0ms
  status Genereert resultaten... +0ms
  ChromeLauncher Beëindigt Chrome instantie 7098 +59ms
  Printer html uitvoer geschreven naar /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html +46ms
  CLI-tip: Voer lighthouse uit met `--view` om het HTML-rapport onmiddellijk in uw browser te openen +1ms

In de op één na laatste regel kunt u zien dat het pad om het rapport te vinden is afgedrukt. Standaard wordt er een rapport in HTML-formaat gegenereerd, dat u kunt bekijken door het op uw pc te downloaden of door het via een webserver te serveren.

Maar wat als u een rapport moet genereren in JSON formaat?

Het is als volgt te doen.

lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json

Door Lighthouse CLI te gebruiken, heeft u de volledige controle om het te gebruiken zoals u dat wilt. Ik zou sterk aanraden om de GitHub opslagplaats voor meer informatie over het gebruik van CLI of programmatisch.

Conclusie

Google Lighthouse lijkt een veelbelovend hulpmiddel om een continuïteitstest uit te voeren om de prestaties en bruikbaarheid van uw site te verbeteren. Als u WordPress gebruikt en uw site sneller wilt laten laden, kijk dan eens naar Raket.