Inleiding tot vuurtoren

Lighthouse is een open-source, geautomatiseerde tool waarmee u de kwaliteit van webpagina's kunt verbeteren. U kunt het op elke webpagina gebruiken, openbaar of met authenticatie. Het bevat audits voor prestaties, toegankelijkheid, 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. Lighthouse voert een reeks controles uit op de pagina en genereert vervolgens een rapport over hoe goed de pagina presteert. Gebruik de mislukte controles als indicatoren voor hoe u de pagina kunt verbeteren. Elke controle bevat een referentie die uitlegt waarom de controle belangrijk is en hoe u deze kunt oplossen.

U kunt Lighthouse CI ook gebruiken om regressies op uw sites te voorkomen.

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 gebruiksvriendelijke indeling, rechtstreeks vanuit de browser.
• Vanaf de opdrachtregel . Automatiseer uw Lighthouse-runs met shellscripts.
• Als Node-module . Integreer Lighthouse in uw systemen voor continue integratie.
• Vanuit een webinterface . Voer Lighthouse uit en maak een koppeling naar rapporten. Geen installatie nodig.

Voer Lighthouse uit in Chrome DevTools

Lighthouse heeft een eigen paneel in Chrome DevTools. Om een ​​rapport uit te voeren:

1. Download Google Chrome voor Desktop .
2. Open Chrome en ga naar de URL die u wilt controleren. U kunt elke URL op internet controleren.
3. Open Chrome DevTools .

4. Klik op het tabblad Vuurtoren .

5. Klik op Pagina laden analyseren . DevTools toont een lijst met auditcategorieën. Laat ze allemaal ingeschakeld.

6. Klik op 'Audit uitvoeren' . Na 30 tot 60 seconden geeft Lighthouse een rapport op de pagina weer.

Installeer en voer de Node-opdrachtregeltool uit

Om de Node-module te installeren:

1. Download Google Chrome voor Desktop .
2. Installeer de huidige Long-Term Support -versie van Node .
3. Installeer Lighthouse. De -g vlag installeert het als een globale module.

npm install -g lighthouse

Een audit uitvoeren:

lighthouse <url>

Om alle opties te zien:

lighthouse --help

Voer de Node-module programmatisch uit

Zie Programmatisch gebruiken voor een voorbeeld van het programmatisch uitvoeren van Lighthouse, als een Node-module.

Voer PageSpeed ​​Insights uit

Lighthouse uitvoeren op PageSpeed ​​Insights:

1. Ga naar PageSpeed ​​Insights .
2. Voer een webpagina-URL in.

3. Klik op Analyseren .

Voer Lighthouse uit als een Chrome-extensie

Om de extensie te installeren:

1. Download Google Chrome voor Desktop .
2. Installeer de Lighthouse Chrome-extensie vanuit de Chrome Webstore.

Een audit uitvoeren:

1. Ga in Chrome naar de pagina die u wilt controleren.

2. Klik Lighthouse , naast de adresbalk van Chrome of in het extensiemenu van Chrome. Zodra u erop klikt, wordt het Lighthouse-menu uitgevouwen.

3. Klik op Rapport genereren . Lighthouse voert de audits uit op de momenteel geselecteerde pagina en opent vervolgens een nieuw tabblad met een rapport met de resultaten.

Rapporten online delen en bekijken

Met de Lighthouse Viewer kunt u rapporten online bekijken en delen.

Rapporten delen als JSON

De Lighthouse Viewer heeft de JSON-uitvoer van een Lighthouse-rapport nodig. Genereer de JSON-uitvoer als volgt:

• Vanuit een Lighthouse-rapport . Klik op more_vert voor het menu en klik vervolgens op Opslaan als JSON
• Opdrachtregel . Voer uit: shell lighthouse --output json --output-path <path/for/output.json>

Om de rapportgegevens te bekijken:

1. Open de Lighthouse Viewer .
2. Sleep het JSON-bestand naar de Viewer of klik ergens in de Viewer om de bestandsnavigator te openen en het bestand te selecteren.

Rapporten delen als GitHub Gists

Als je JSON-bestanden niet handmatig wilt delen, kun je je rapporten ook delen als geheime GitHub-gists. Een voordeel van gists is gratis versiebeheer.

Om een ​​rapport als gist te exporteren vanuit het rapport:

1. Klik op het menu more_vert en klik vervolgens opOpenen in Viewer . Het rapport is te vinden op https://googlechrome.github.io/lighthouse/viewer/ .
2. Klik in de Viewer op het menu more_vert en klik vervolgens opOpslaan als Gist . De eerste keer dat je dit doet, vraagt ​​een pop-up om toestemming om toegang te krijgen tot je basisgegevens van GitHub en om je gists te lezen en ernaar te schrijven.

Om een ​​rapport als gist te exporteren vanuit de CLI-versie van Lighthouse, maakt u handmatig een gist aan en kopieert en plakt u de JSON-uitvoer van het rapport erin. De gist-bestandsnaam met de JSON-uitvoer moet eindigen op .lighthouse.report.json . Zie Rapporten delen als JSON voor een voorbeeld van hoe u JSON-uitvoer genereert vanuit de opdrachtregeltool.

Om een ​​rapport te bekijken dat als gist is opgeslagen:

• Voeg ?gist=<ID> toe aan de URL van de Viewer, waarbij <ID> de ID van de gist is. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Open de Viewer en plak de URL van een gist erin.

Uitbreidbaarheid van de vuurtoren

Lighthouse streeft ernaar om relevante en bruikbare richtlijnen te bieden voor alle webontwikkelaars. Hiervoor zijn er twee functies beschikbaar waarmee u Lighthouse kunt aanpassen aan uw specifieke behoeften.

Stapelpakketten

Ontwikkelaars gebruiken veel verschillende technologieën (backend, contentmanagementsystemen en JavaScript-frameworks) om hun webpagina's te bouwen. In plaats van algemene aanbevelingen te geven, biedt Lighthouse relevant en bruikbaar advies, afhankelijk van de gebruikte tools.

Met stackpakketten kan Lighthouse detecteren op welk platform uw site is gebouwd en specifieke stackgebaseerde aanbevelingen weergeven. Deze aanbevelingen worden gedefinieerd en samengesteld door experts uit de community.

Om een ​​stackpack bij te dragen, raadpleegt u de Bijdragerichtlijnen .

Vuurtoren-plug-ins

Met Lighthouse-plugins kunnen domeinexperts de functionaliteit van Lighthouse uitbreiden naar de specifieke behoeften van hun community. U kunt de gegevens die Lighthouse verzamelt gebruiken om nieuwe audits te maken. Een Lighthouse-plugin is in essentie een knooppuntmodule die een reeks controles implementeert die door Lighthouse worden uitgevoerd en als nieuwe categorie aan het rapport worden toegevoegd.

Voor meer informatie over het maken van uw eigen plugin kunt u onze Plugin Handbook raadplegen in de Lighthouse GitHub-repository.

Integreer Vuurtoren

Bent u een bedrijf of particulier die Lighthouse integreert als onderdeel van de producten of diensten die u aanbiedt? Geweldig! We willen dat zoveel mogelijk mensen Lighthouse gebruiken.

Raadpleeg de richtlijnen en merkactiva voor het integreren van Lighthouse om aan te tonen dat Lighthouse wordt gebruikt en dat ons merk daarbij wordt beschermd.

Draag bij aan Lighthouse

Lighthouse is open source en bijdragen zijn welkom ! Bekijk de Issue tracker 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 prestatiemetingen, ideeën voor nieuwe audits of andere zaken met betrekking tot Lighthouse te bespreken.