Logo Fraai

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. Het stelt audits voor prestaties, toegankelijkheid, progressieve webapps, SEO en meer beschikbaar.

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. Fraai Lighthouse initialisatie
  6. Klik op Audit uitvoeren. Na 30 tot 60 seconden, geeft Lighthouse u een rapport op de pagina. Fraai Lighthouse score

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

Performance
99
+5
Accesability
98
+2
Best practices
95
+3
SEO
100
+0

Onze inzichten

Onze inzichten, maar dan digitaal

Fraai gaat groen

Fraai gaat groen

Groen is niet alleen onze hoofdkleur, maar ook onze filosofie en vormgeving.

Label voor websites Websites Label voor algemeen Algemeen
Web Vitals - Essentiële statistieken voor jouw website.

Web Vitals - Essentiële statistieken voor jouw website.

Web Vitals is een initiatief van Google om uniforme richtlijnen te bieden voor kwaliteitssignalen die essentieel zijn voor het garanderen van een geweldige gebruikerservaring op het web.

Label voor websites Websites Label voor performantie Performantie
Hoeveel kost een website?

Hoeveel kost een website?

Een website, onmisbaar voor jouw bedrijf of product, maar vaak ook zeer techinch en te gecompliceerd om te vatten. In deze blogpost duiken we iets dieper in het werk en de kosten die een website met zich meebrengt.

Label voor websites Websites Label voor algemeen Algemeen