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 uw rapporten in een gebruiksvriendelijke indeling.
  • Vanaf de termnial. Automatiseer uw 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. U kunt 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

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 de kosten die een website met zich meebrengt.

Label voor websites Websites
Hoe werkt Google

Hoe werkt Google

Google haalt informatie uit veel verschillende bronnen, waaronder webpagina's, door gebruikers ingediende inhoud zoals Google Mijn Bedrijf en Maps, scannen van boeken, openbare databases op het internet, en vele andere bronnen.

Label voor SEO SEO
Wat is een website prototype?

Wat is een website prototype?

Een prototype is een interactieve demo van een website of applicatie. Deze worden vaak gebruik om feedback te verzamelen van gebruikers en stakeholders in de vroege levensfase van het project.

Label voor prototype Prototype Label voor websites Websites