Wanneer je de kwaliteit van je webpagina’s wilt testen dan kun je gebruik maken van één van de vele tools op het internet. Denk daarbij bijvoorbeeld aan Pingdom, GTMetrix of Lipperhey. Sinds kort is er weer eentje bijgekomen genaamd Lighthouse. Het grote voordeel van de Lighthouse tool is echter dat deze standaard is ingebouwd in de Google Chrome Webbrowser. Bovendien kun je hiermee je webpagina snel testen op verschillende kwaliteitgebieden. Hoe je deze tool kunt inzetten en wat je kunt testen lees je hieronder.
Update: Klein stukje onderaan toegevoegd over de rapportage tool van Lighthouse en zijn report viewer.
Hoe test ik met Lighthouse?
Eigenlijk heel simpel. Je gaat naar een webpagina met Chrome en open dan vervolgens de “dev tools” van Chrome (<CTRL> <SHIFT> i of <F12>). Je krijgt dan een extra venster te zien met een aantal tabs die je kunt openen. Klik op de tab “audits” en je zit in Lighthouse.
- Performance
- Progressive Web App
- Best Practices
- Accessibility
- SEO
Vink de testgebieden aan en klik op “Run audit” en de tool begint met testen. Per gebied krijg je een totaalscore hoe goed je webpagina op dit gebied scoort. Naast deze totaalscore krijg je per gebied een lijst met verbeterpunten en uitleg hoe je deze punten kunt verbeteren. Erg handig.
Op de bovenste balk kun je verder aangeven voor welke apparaat je wilt testen en met welke internetsnelheid. Zo kun je zien hoe lang gebruikers moeten wachten voordat ze iets op hun scherm krijgen op een mobieltje met een trage verbinding of op de desktop met een snelle verbinding.
Korte uitleg over de testgebieden
Hieronder een kleine uitleg over de testgebieden die je in Lighthouse kunt testen en waarom ze belangrijk zijn voor je webpagina’s.
Performance
Bij performance test je hoe snel je website geladen wordt. Hoe sneller een webpagina laadt des te minder mensen direct weer weggaan van jouw site. Belangrijk hierbij is wat de gebruiker als eerste ziet bij het laden van de website.
Wanneer je vervolgens op “view trace” button klikt krijg je een tijdlijn te zien welke onderdelen wanneer worden ingeladen.
[/vc_column_text][vc_column_text]
Progressive Web App
Een Progressive Web App is een webpagina die zich gedraagt als een mobiele app. Waneer de webpagina op deze punten wordt verbeterd zal de interactie op de pagina meer als op die van een app lijken. Een belangrijk onderdeel hiervan is offline caching zodat een webpagina ook zonder internetverbinding kan werken.
Best Practices
Bij best practices wordt gekeken of er bij het maken of tonen van je webpagina gedacht is aan veiligheid en het vermijden van bekende programmeerfouten.
Accessibility
Bij accessibility wordt veel gekeken of de website wel goed te gebruiken is voor mensen met een beperking. Denk daarbij aan mensen die slecht of niet kunnen zien of kleurenblind zijn. Bij accessibilty test je of teksten goed leesbaar zijn door te kijken of de tekst niet te klein is of dat de tekst genoeg contrast heeft met de achtergrond. Wil je meer weten over accessibilty lees dan dit ouder artikel over accessibilty op onze website.
SEO
Bij SEO wordt nagekeken of een webpagina is geoptimaliseerd voor zoekmachines. Hoe beter de SEO hoe makkelijker je webpagina wordt gevonden door gebruikers in de zoekmachines. Het SEO advies van Lighthouse is niet heel uitgebreid maar via links naar andere tools op het internet kan je jouw webpagina op nog meer SEO punten doortesten.
Lighthouse Report Viewer
Een ander handige toevoeging aan Lighthouse is dat je reportages kunt opslaan. Nadat je een rapportage hebt gedraaid, kun je via de knop “download report” (linksboven in het menu) een bestand hiervan downloaden. Deze rapportage kun je later weer bekijken met de Lighthouse Report Viewer. Erg handig als je een net gemaakte rapportage wilt doorsturen naar iemand anders.
Conclusie
Met Lighthouse wordt het wel heel gemakkelijk om de kwaliteit van je webpagina’s te verbeteren. Wil je nog meer weten over Lighthouse ga dan naar https://developers.google.com/web/tools/lighthouse/