Lighthouse de toolkit voor webontwikkelaars

Lighthouse is een open-source, geautomatiseerd hulpmiddel om de kwaliteit van webpagina's te verbeteren. Je kan het op elke website uitvoeren, publiek of waarvoor authenticatie nodig is.

Gepubliceerd op en geupdated op door Frederik De Roover

Lighthouse gebruiken op jouw website

Kies de Lighthouse workflow die het beste bij u past
  • In Chrome DevTools. Controleer eenvoudig pagina's waarvoor verificatie is vereist en lees jouw rapporten in een gebruiksvriendelijke indeling.
  • Vanaf de termnial. Automatiseer jouw Lighthouse runs via shell scripts.
  • Als een NodeJS module. Integreer Lighthouse in build scripts.
  • Vanuit een web UI. Start Lighthouse en link naar rapporten zonder iets te installeren.

Start Lighthouse in Chrome DevTools

Lighthouse stuurt het Audits paneel van Chrome DevTools aan. Om een rapport uit te voeren:
  1. Zorg dat je Google Chrome voor Desktop geinstaleerd hebt staan.
  2. In Google Chrome, ga naar de URL die u wilt controleren. Je kan elke URL op het web controleren.
  3. Open Chrome DevTools.
  4. Klik op het tabblad Audits.

Vanuit de termnial

Installeer de Node module globaal of lokaal, en voer de Lighouse commando's uit. Om de Node module te installeren:
  1. Zorg dat je Google Chrome voor Desktop geinstaleerd hebt staan.
  2. Installeer de huidige Long-Term Support versie van Node.
$ npm install -g lighthouse
Om een audit uit te voeren:
lighthouse https://fraai.design
Om alle opties te zien:
lighthouse --help

Lighthouse als Chrome-extensie gebruiken

Om de uitbreiding te installeren:
  1. Zorg dat je Google Chrome voor Desktop geinstaleerd hebt staan.
  2. Installeer de Lighthouse Chrome-extensie uit de Chrome Webstore.
Om een audit uit te voeren:
  1. Ga in Chrome naar de pagina die u wilt controleren.
  2. Klik op Lighthouse. Het zou naast de adresbalk van Chrome moeten staan. Zo niet, open dan het hoofdmenu van Chrome en open het bovenaan het menu. Na het klikken, breidt het Lighthouse menu zich uit.
  3. Klik op Genereer rapport. Lighthouse voert de audits uit tegen de huidige gerichte pagina, en opent dan een nieuw tabblad met een rapport van de resultaten.

Hoe gebruiken wij Lighouse voor onze klanten?

Telkens wanneer we een nieuwe update uitvoeren van een website, gaat de nieuwe code door een geautomatiseerd systeem dat ons steeds de laatste waarden geeft. Bij een score van 75 of minder, gaat onze code zelfs niet naar productie