Google Lighthouse: 5 elementen om je website te optimaliseren
Lighthouse is een open-source en geautomatiseerde tool van Google voor het verbeteren van de kwaliteit van websites. Lighthouse heeft audits voor prestaties, progressieve web-apps, best practices, toegankelijkheid en SEO. Je geeft Lighthouse een URL om de audits uit te voeren voor bepaalde categorieën. Vervolgens wordt een rapport gegenereerd over hoe goed de pagina presteert. De ‘mislukte’ audits kunnen gebruikt worden als indicatoren voor het verbeteren van de pagina.
Aan de slag met Lighthouse
Maak jij gebruik van webhosting en zoek je manieren om je website te optimaliseren? Dan is het zeker de moeite waard om eens naar Lighthouse te kijken. Er zijn verschillende manieren om Lighthouse te gebruiken: via Chrome DevTools, de node command line tool en de Lighthouse Chrome Extensie; voor elke methode is het noodzakelijk om Google Chrome geïnstalleerd te hebben op je PC. In deze blog focussen we op Chrome DevTools en de Lighthouse Chrome extensie, omdat dit de meest eenvoudige en toegankelijke methoden zijn.
Lighthouse uitvoeren in Chrome DevTools
Om Lighthouse te gebruiken via Chrome DevTools ga je in de Google Chrome browser naar de URL die je wil auditeren. Als je op de pagina bent klik je ergens willekeurig op de achtergrond met je rechtermuisknop. In het menu dat verschijnt klik je vervolgens op ‘Inspecteren’ (Ctrl + Shift + I). Hiermee kom je in de ‘Developer Tools’ van Google, ook wel Chrome DevTools genoemd.
Als je eenmaal in de Developer Tools zit kies je bovenin het menu van de Developer Tools voor ‘Audits’. Daarna klik je op ‘Perform an audit…’. Je krijgt dan een aantal selectievakken te zien om te bepalen voor welke categorieën je een audit wil doen. We adviseren om alle selectievakken aan te laten staan, zodat je zoveel mogelijk informatie verzamelt. Het enige wat je nu nog hoeft te doen is op ‘Run audit’ klikken en dan wordt er in ongeveer 1 minuut een rapport gemaakt waarin je kan zien waar de pagina goed op scoort en waar de eventuele verbeterpunten liggen.
Lighthouse uitvoeren met Chrome Extensie
Als je Lighthouse vaak gebruikt kan het handig zijn om de extensie voor Google Chrome te installeren. Zo kan je gemakkelijk direct vanuit je browserbalk een audit uitvoeren. Download de Lighthouse Chrome extensie en na het installeren zou er rechts bovenin naast de adresbalk een Lighthouse icoontje moeten staan.
Als je het icoontje niet ziet, moet de extensie nog handmatig geactiveerd worden. Om dit te doen klik je rechts bovenin Google Chrome op het ‘menu’ icoon (drie puntjes onder elkaar). Ga vervolgens naar ‘Meer hulpprogramma’s’ en daarna naar ‘Extensies’. Zoek de Lighthouse extensie op en zet het bolletje aan zodat deze blauw wordt. Nu verschijnt het icoontje van Lighthouse rechts van de adresbalk.
Ga naar de pagina die je wil auditeren en klik op het Lighthouse icoontje. Nu komt het menu tevoorschijn. Onder ‘Options’ kan je kiezen voor welke categorieën je een audit wil uitvoeren en vervolgens klik je op ‘Generate report’. Tijdens het auditeren is Lighthouse bezig met de pagina die op dat moment open staat. Doe in de tussentijd niets, dit kan het genereren van het rapport verstoren. Na ongeveer 15 seconden worden de resultaten getoond in een nieuw venster.
Lighthouse rapporten toepassen voor website optimalisatie
Als je een Lighthouse audit rapport hebt uitgedraaid staat daar een hoop informatie in. Wat al die scores betekenen en wat je moet doen om de scores te verbeteren, kan nogal een klus zijn zonder de juiste kennis te hebben. Daarom heeft Lighthouse referentiedocumenten voor elke audit categorie. Op de website van Lighthouse staat in het linker menu ‘Audit References’. Daar staat per audit categorie uitgelegd wat elke score betekent en wat je moet doen om die score te verbeteren.
Lighthouse Report Viewer gebruiken om rapporten online te delen
Als het rapport gegeneerd is kan je deze opslaan om online te delen. Als je de Chrome DevTools methode hebt gebruikt kan je het rapport downloaden door links bovenin het rapport te klikken op het ‘download’ icoon (pijl naar beneden met een streep eronder).
Bij het rapport dat gemaakt wordt in de Lighthouse Chrome extensie kan je rechts bovenin op het ‘delen’ icoon (drie bolletjes verbonden met twee lijnen) klikken. Hier kies je voor ‘Save as JSON’. Het bestand dat gedownload wordt kan je naar anderen toesturen en die kunnen dat bestand openen in de Lighthouse Report Viewer. Op deze manier kan je eenvoudig resultaten met je collega’s delen of bijvoorbeeld de progressie bijhouden wanneer je meerdere audits doet over een bepaalde periode.
