Lighthouse is een open-source, geautomatiseerde tool waarmee u de kwaliteit van webpagina's kunt verbeteren. U kunt het op elke webpagina uitvoeren, openbaar of waarvoor authenticatie vereist is. Het heeft audits voor prestaties, toegankelijkheid, progressieve web-apps, SEO en meer.
U kunt Lighthouse uitvoeren in Chrome DevTools, vanaf de opdrachtregel of als een Node-module. Geef Lighthouse een URL om te controleren, het voert een reeks audits uit op de pagina en genereert vervolgens een rapport over hoe goed de pagina heeft gepresteerd. Gebruik de mislukte audits als indicatoren voor het verbeteren van de pagina. Elke audit heeft een referentie waarin wordt uitgelegd waarom de audit belangrijk is en hoe u deze kunt oplossen.
U kunt Lighthouse CI ook gebruiken om regressies op uw sites te voorkomen.
Ga aan de slag
Kies de Lighthouse-workflow die het beste bij u past:
- In Chrome DevTools . Controleer pagina's die authenticatie vereisen en lees uw rapporten in een gebruiksvriendelijk formaat, rechtstreeks vanuit de browser.
- Vanaf de opdrachtregel . Automatiseer uw Lighthouse-runs met shellscripts.
- Als een knooppuntmodule . Integreer Lighthouse in uw continue integratiesystemen.
- Vanuit een webinterface . Voer Lighthouse uit en link naar rapporten, geen installatie nodig.
Voer Lighthouse uit in Chrome DevTools
Lighthouse heeft een eigen paneel in Chrome DevTools. Een rapport uitvoeren:
- Download Google Chrome voor desktop .
- Open Chrome en ga naar de URL die u wilt controleren. U kunt elke URL op internet controleren.
- Open Chrome DevTools .
Klik op het tabblad Vuurtoren .
Aan de linkerkant bevindt zich de viewport van de webpagina die moet worden gecontroleerd. Rechts is het Chrome DevTools Lighthouse -paneel. Klik op Paginabelasting analyseren . DevTools toont u een lijst met auditcategorieën. Laat ze allemaal ingeschakeld.
Klik op Audit uitvoeren . Na 30 tot 60 seconden geeft Lighthouse u een rapport op de pagina.
Een Lighthouse-rapport in Chrome DevTools.
Installeer het Node-opdrachtregelprogramma en voer het uit
Om de Node-module te installeren:
- Download Google Chrome voor desktop .
- Installeer de huidige langetermijnondersteuningsversie van Node .
- Vuurtoren installeren. De vlag
-ginstalleert het als een globale module.
npm install -g lighthouse
Om een audit uit te voeren:
lighthouse <url>
Om alle opties te zien:
lighthouse --help
Voer de knooppuntmodule programmatisch uit
Zie Programmatisch gebruiken voor een voorbeeld van het programmatisch uitvoeren van Lighthouse, als een knooppuntmodule.
Voer PageSpeed Insights uit
Lighthouse uitvoeren op PageSpeed Insights:
- Ga naar PageSpeed Insights .
- Voer een webpagina-URL in.
Klik op Analyseren .
De PageSpeed Insights-website.
Voer Lighthouse uit als een Chrome-extensie
Om de extensie te installeren:
- Download Google Chrome voor desktop .
- Installeer de Lighthouse Chrome-extensie vanuit de Chrome Webstore.
Om een audit uit te voeren:
- Ga in Chrome naar de pagina die u wilt controleren.
Klik
Lighthouse , naast de Chrome-adresbalk of in het extensiemenu van Chrome. Eenmaal erop geklikt, wordt het Lighthouse-menu uitgevouwen. 
De extensie vraagt u om een rapport te genereren. Klik op Rapport genereren . Lighthouse voert zijn audits uit op de momenteel gerichte pagina en opent vervolgens een nieuw tabblad met een rapport van de resultaten.
Een Lighthouse-rapport gegenereerd op basis van de extensie.
Deel en bekijk rapporten online
Gebruik de Lighthouse Viewer om rapporten online te bekijken en te delen.
Deel rapporten als JSON
De Lighthouse Viewer heeft de JSON-uitvoer van een Lighthouse-rapport nodig. Genereer de JSON-uitvoer als volgt:
- Uit een Lighthouse-rapport . Klik op voor het menu en klik vervolgens op
Opslaan als JSON - Commandoregel . Uitvoeren:
shell lighthouse --output json --output-path <path/for/output.json>
Om de rapportgegevens te bekijken:
- Open de Vuurtorenviewer .
- Sleep het JSON-bestand naar de Viewer of klik ergens in de Viewer om uw bestandsnavigator te openen en het bestand te selecteren.
Deel rapporten als GitHub Gists
Als u JSON-bestanden niet handmatig wilt doorgeven, kunt u uw rapporten ook delen als geheime GitHub-gegevens. Een voordeel van GISTs is gratis versiebeheer.
Een rapport exporteren als samenvatting van het rapport:
- Klik op het menu en klik vervolgens op
Openen in Viewer . Het rapport is te vinden op https://googlechrome.github.io/lighthouse/viewer/. - Klik vanuit de Viewer op het menu en klik vervolgens opOpslaan als Gist . De eerste keer dat je dit doet, vraagt een pop-up toestemming om toegang te krijgen tot je basisgegevens van GitHub, en om je kerngegevens te lezen en te schrijven.
Om een rapport als essentie uit de CLI-versie van Lighthouse te exporteren, maakt u handmatig een essentie en kopieert en plakt u de JSON-uitvoer van het rapport in de essentie. De hoofdbestandsnaam met de JSON-uitvoer moet eindigen op .lighthouse.report.json . Zie Rapporten delen als JSON voor een voorbeeld van hoe u JSON-uitvoer kunt genereren via het opdrachtregelprogramma.
Een rapport bekijken dat als samenvatting is opgeslagen:
- Voeg
?gist=<ID>toe aan de URL van de viewer, waarbij<ID>de ID van de essentie is.text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID> - Open de Viewer en plak de URL van een essentie erin.
Uitbreidbaarheid van de vuurtoren
Lighthouse streeft ernaar om begeleiding te bieden die relevant en bruikbaar is voor alle webontwikkelaars. Hiervoor zijn er twee functies beschikbaar waarmee u Lighthouse kunt afstemmen op uw specifieke behoeften.
Stapel pakketten
Ontwikkelaars gebruiken veel verschillende technologieën (backend, contentmanagementsystemen en JavaScript-frameworks) om hun webpagina's te bouwen. In plaats van algemene aanbevelingen naar voren te brengen, biedt Lighthouse relevant en uitvoerbaar advies, afhankelijk van de gebruikte tools.
Met stapelpakketten kan Lighthouse detecteren op welk platform uw site is gebouwd en specifieke, op stapels gebaseerde aanbevelingen weergeven. Deze aanbevelingen worden gedefinieerd en samengesteld door experts uit de gemeenschap.
Als u een stapelpakket wilt bijdragen, raadpleegt u de richtlijnen voor bijdragen .
Lighthouse-plug-ins
Met Lighthouse-plug-ins kunnen domeinexperts de functionaliteit van Lighthouse uitbreiden voor de specifieke behoeften van hun gemeenschap. U kunt de gegevens die Lighthouse verzamelt gebruiken om nieuwe audits te creëren. In de kern is een Lighthouse-plug-in een knooppuntmodule die een reeks controles implementeert die door Lighthouse moeten worden uitgevoerd en als een nieuwe categorie aan het rapport moeten worden toegevoegd.
Voor meer informatie over hoe u uw eigen plug-in kunt maken, raadpleegt u ons Plug-inhandboek in de Lighthouse GitHub-repository.
Integreer Vuurtoren
Als u een bedrijf of individu bent dat Lighthouse integreert als onderdeel van de producten of diensten die u aanbiedt, is dat geweldig! We willen dat zoveel mogelijk mensen Lighthouse gebruiken.
Raadpleeg de richtlijnen en merkmiddelen voor de integratie van Lighthouse om aan te tonen dat Lighthouse wordt gebruikt en tegelijkertijd ons merk wordt beschermd.
Draag bij aan Vuurtoren
Lighthouse is open source en bijdragen zijn welkom ! Bekijk de Issuetracker van de repository om bugs te vinden die u kunt oplossen , of audits die u kunt maken of verbeteren. De Issues zijn een goede plek om prestatiestatistieken, ideeën voor nieuwe audits of andere zaken die verband houden met Lighthouse te bespreken.