Lighthouse - De toolkit voor webontwikkelaars

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.
5. Klik op Voer een audit uit. DevTools toont u een lijst met auditcategorieën. Laat ze allemaal ingeschakeld.
6. Klik op Audit uitvoeren. Na 30 tot 60 seconden, geeft Lighthouse u een rapport op de pagina.

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

Hoe zit het eigenlijk met de lighthouse score van onze website?

We controleren onze eigen website dagelijks geautomatiseerd, hieronder zie je ons gemiddelde van de laatste 30 dagen