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:
- Zorg dat je Google Chrome voor Desktop geinstaleerd hebt staan.
- In Google Chrome, ga naar de URL die u wilt controleren. U kunt elke URL op het web controleren.
- Open Chrome DevTools.
- Klik op het tabblad Audits.
- Klik op Voer een audit uit. DevTools toont u een lijst met auditcategorieën. Laat ze allemaal ingeschakeld.
- 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:
- Zorg dat je Google Chrome voor Desktop geinstaleerd hebt staan.
- 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:
- Zorg dat je Google Chrome voor Desktop geinstaleerd hebt staan.
- Installeer de Lighthouse Chrome-extensie uit de Chrome Webstore.
Om een audit uit te voeren:
- Ga in Chrome naar de pagina die u wilt controleren.
- 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.
- 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
ARIA-labels en relaties
ARIA biedt verschillende mechanismen om labels en beschrijvingen aan elementen toe te voegen. In feite is ARIA de enige manier om toegankelijke help of beschrijvingstekst toe te voegen. Laten we eens kijken naar de eigenschappen die ARIA gebruikt om toegankelijke labels te maken.
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.
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.