Hoe Google Lighthouse te gebruiken voor het testen van websiteprestaties – TechCult
Diversen / / November 07, 2023
Als het gaat om het hoger rangschikken van uw website in de resultaten van zoekmachines, is de snelheid van de website een factor die niet kan worden genegeerd. Het verrukt niet alleen gebruikers, maar vertaalt zich ook in een grotere zichtbaarheid. Niemand wil immers op een pagina klikken en eeuwig wachten tot deze is geladen. Je ziet bijvoorbeeld TechCult, onze blogs laden behoorlijk snel, nietwaar? Hah, alle grappen terzijde: als u zich zorgen maakt dat uw website niet kan scoren vanwege de lage snelheid, is Google Lighthouse hier om u te helpen. In het artikel van vandaag laten we u zien hoe u Google Lighthouse kunt gebruiken voor prestatietests.
![Hoe Google Lighthouse te gebruiken voor het testen van websiteprestaties](/f/7f811fe66422ab98c5e958550414c475.png)
Wat is Google Lighthouse en hoe gebruik je het voor prestatietests?
Het is een veelgehoord spreekwoord: de eerste indruk is de laatste. Wat dat betreft staat een website die snel laadt vaak hoog in termen van een betere gebruikerservaring, wat uiteindelijk kan resulteren in hogere conversiepercentages. Zelfs zoekmachines zoals Google rangschikken sneller ladende websites hoger in de zoekresultaten.
Google Lighthouse is een open-source geautomatiseerde tool waarmee website-ontwikkelaars en -eigenaren de kwaliteit van webpagina's kunnen evalueren en verbeteren. Het heeft audits voor prestaties, toegankelijkheid, best practices en SEO voor zowel mobiel als desktop. Op basis van de gedetailleerde rapporten en aanbevelingen kunnen gebruikers de prestaties van de site optimaliseren voor een betere gebruikersbetrokkenheid. Lighthouse kan op elke webpagina worden uitgevoerd, openbaar of privé toegankelijk. Laten we eens kijken hoe het werkt en hoe u het kunt gebruiken.
Methode 1: Lighthouse direct toevoegen en uitvoeren
Lighthouse is ook beschikbaar voor gebruikers in de vorm van een Google-extensie, die u kunt downloaden om audits voor u uit te voeren in de Chrome-browser. Volg onderstaande stappen:
1. Bezoek de Chrome Web Store-pagina voor de Lighthouse-extensie in elke webbrowser.
2. Klik op Toevoegen aan Chrome.
![Klik op Toevoegen aan Chrome voor Google Lighthouse](/f/ad6fe62b112f529c85e847e2eb0f4f7b.png)
3. Selecteer Uitbreiding toevoegen bevestigen.
4. Eenmaal toegevoegd, start u de website in de browser die u wilt analyseren.
5. Klik op de Extensie (puzzel) pictogram naast de adresbalk en selecteer Vuurtoren.
6. Klik op Rapport genereren.
![Klik op Rapport genereren. | prestatietesten van vuurtorens](/f/3f25d112b7f9b1fb93f9220e8165bb2f.png)
Dat is het! Binnen enkele seconden genereert Lighthouse een gedetailleerd rapport waarin de website waarvoor u de test hebt uitgevoerd, wordt geanalyseerd.
Methode 2: Gebruik PageSpeed Insights
Google PageSpeed Insights is ook een tool voor het testen van webprestaties dat Lighthouse als analyse-engine gebruikt. U kunt het dus gebruiken om rapporten voor uw website te genereren. Volg de stappen:
1. Bezoek de PageSpeed-inzichten website.
2. Voer de website-URL in het tekstveld in en klik op Analyseren.
![Voer de website-URL in het tekstveld in en klik op Analyseren.](/f/e87dd332ed467e60b1004f5137ae3baf.png)
Zodra het testen is voltooid, ontvangt u het Chrome User Experience Report waarin de resultaten worden weergegeven die door echte gebruikers zijn ervaren.
![PageSpped Insights-resultaten | prestatietesten van vuurtorens](/f/8069809c9c171fb448f1de6c4a4cd10d.png)
Het gedeelte Prestatieproblemen diagnosticeren vertegenwoordigt de Lighthouse-score. U kunt de resultaten bekijken voor zowel mobiel als desktop.
![Lighthouse-resultaten - Prestatieproblemen diagnosticeren](/f/552b36918980db18d172f623f38b0736.png)
Methode 3: Voer Lighthouse uit in DevTools
Lighthouse heeft een paneel in Google Chrome DevTools dat u ook kunt gebruiken om de prestaties te testen als uw website op een lokale server draait of ook voor sites waarvoor inloggen vereist is. Zo doet u het:
1. Bezoek de website die u wilt controleren.
2. Klik met de rechtermuisknop ergens op de pagina en selecteer Inspecteren uit het menu.
![Klik met de rechtermuisknop ergens op de pagina en selecteer Inspecteren in het menu. | prestatietesten van vuurtorens](/f/e893bef1e22a7473542798a872dc1d8e.png)
3. Klik op de >> pictogram (Meer tabbladen) en selecteer Vuurtoren vanuit het contextmenu.
![Klik op (Meer tabbladen) en selecteer Vuurtoren in het contextmenu.](/f/9da5ba5935dd9335d517fab2fef5c487.png)
4. Klik op de Analyseer de paginabelasting knop rechtsboven en wacht tot de resultaten gereed zijn.
Opmerking: Selecteer de Apparaat op de juiste manier en bewaar alle Categorieën ingeschakeld.
![Klik rechtsboven op de knop Pagina laden analyseren en wacht tot de resultaten gereed zijn.](/f/dc4311b7879bba6b28382f2e71577273.png)
U kunt ook de modus wijzigen. Lighthouse in DevTools biedt drie testmodi:
- Navigatie: Geeft algemene resultaten weer, inclusief prestaties, toegankelijkheid en SEO.
![Navigatieresultaten Lighthouse in DevTools | prestatietesten van vuurtorens](/f/fa3f155cd7c9f18f39983688d551bf17.png)
- Tijdspanne: Toont resultaten op basis van hoe lang het duurt voordat een pagina is geladen en hoe lang er interactie is met de surfer. U moet interactie hebben met de pagina terwijl de test wordt uitgevoerd.
![Timespan Lighthouse Score DevTools](/f/b8b8a74643b6b10ac4ad378adf012875.png)
- Momentopname: Berekent de score voor de huidige pagina
![Momentopname Vuurtorenscore DevTools | prestatietesten van vuurtorens](/f/446b17f9aee799792bf815ed24c365da.png)
Lees ook:31 Beste webscrapingtools
Methode 4: Gebruik Lighthouse-module met opdrachtregel
Lighthouse is ook verkrijgbaar als Node-module die u kunt integreren in uw continue integratiesystemen en kunt gebruiken als opdrachtregel of programmatisch. Het enige dat hiervoor nodig is, is een versie van het knooppunt. Als je hebt Knooppunt.js geïnstalleerd op de pc, volgt u de onderstaande stappen:
1. Meld u aan bij uw server en voer de volgende opdracht uit om de Lighthouse globale module op het apparaat te installeren:
npm install -g lighthouse
2. Eenmaal geïnstalleerd, voert u de volgende opdracht uit om een Lighthouse-test uit te voeren:
lighthouse -- view
Met de volgende opdracht kunt u alle beschikbare opties bekijken.
lighthouse --help
Hoe berekent Lighthouse de score
Google Lighthouse combineert en evalueert verschillende aspecten van de prestatiestatistieken van een website, zoals prestaties, toegankelijkheid, best practices, SEO en PWA. Zodra de audit succesvol is, wordt er een rapport gegenereerd met een score voor elk aspect aanbevelingen voor noodzakelijke verbeteringen om de prestaties en gebruikersinteractie van uw website te verbeteren. Websites worden doorgaans beoordeeld op een schaal van 0 tot 100.
Prestatie
Lighthouse analyseert hoe snel een webpagina laadt. De prestatiescore wordt berekend door rekening te houden met de volgende statistieken:
- Eerste inhoudsvolle verf (FCP): Hoe snel het eerste element uit de inhoud op het scherm wordt geschilderd
- Grootste inhoudsvolle verf (LCP): Meet de tijd die nodig is voordat het grootste inhoudselement zichtbaar wordt
- Cumulatieve lay-outverschuiving (CLS): Meet de hoeveelheid onverwachte lay-outverschuivingen die optreden tijdens het laden van de pagina om de visuele stabiliteit van de pagina te beoordelen. Een lage CLS geeft aan dat de website stabiel is.
- Totale blokkeertijd: Meet de tijd gedurende welke de hoofdthread geblokkeerd is en niet reageert op gebruikersinvoer.
- Snelheidsindex: Geeft aan hoe snel alle inhoud van de pagina volledig zichtbaar is
Deze statistieken meten de laadsnelheid en visuele stabiliteit van de website. Verschillende factoren zijn van invloed op dit rapport, zoals de grootte en het aantal afbeeldingen, het aantal gebruikte plug-ins en de efficiëntie van de websitecode.
![Prestatiescore Vuurtoren | prestatietesten van vuurtorens](/f/8ca1f8c0e79108464f972ed6055d6551.png)
Lighthouse berekent de score door het gewogen gemiddelde van de metrische waarden te nemen. Uiteraard hebben metingen met een hogere weging een grotere impact op uw totale Performance score. De statistische scores worden niet weergegeven in het rapport, maar worden achter de schermen berekend. U kunt op de optie Rekenmachine bekijken klikken om toegang te krijgen tot de gedetailleerde berekening van de factoren die van invloed zijn op uw website.
![Lighthouse-scorecalculator voor prestaties](/f/b169f5bcf76e53d6a5c24cee84537897.png)
Toegankelijkheid
Het is een op de gebruiker gerichte score die meet hoe gemakkelijk het is voor gebruikers met een beperking om toegang te krijgen tot uw website. Het wordt beïnvloed door factoren zoals de aanwezigheid van alternatieve tekst op afbeeldingen, het gebruik van ARIA-attributen en de toetsenbordtoegankelijkheid van uw website. Elke toegankelijkheidsaudit is een voldoende of een onvoldoende. Een pagina krijgt geen punten voor het gedeeltelijk slagen voor een toegankelijkheidsaudit, in tegenstelling tot de Prestatieaudits.
- Alt-tekst voor afbeeldingen: Alle afbeeldingen op de pagina moeten een passende en beschrijvende alt-tekst hebben, omdat dit nodig is voor gebruikers met een visuele beperking die afhankelijk zijn van schermlezers om afbeeldingen te interpreteren.
- Semantische HTML: Correct gebruik van semantische HTML-elementen zoals de titel, kopjes, lijsten, enz. helpt schermlezers en andere ondersteunende software de structuur van de pagina te begrijpen
- Kleurcontrast: Het kleurcontrast tussen de tekst en de achtergrond moet voldoen aan de normen die zijn vastgelegd in de Web Content Accessibility Guidelines. Voldoende kleurcontrast zorgt ervoor dat de tekst leesbaar is voor slechtzienden of kleurenblindheid.
![Toegankelijkheidsscore Google Lighthouse | prestatietesten van vuurtorens](/f/b18358eef570d804cf28319111b5bc33.png)
Lees ook: Hoe u een website bouwt met ChatGPT
Beste praktijken
Lighthouse meet hoe goed uw website de best practices en codeerstandaarden voor webontwikkeling volgt en geeft op basis daarvan een score. Het controleert het gebruik van moderne JavaScript-functies en beveiligde verbindingen (HTTPS) en wordt beïnvloed door factoren zoals het gebruik van minificatie en compressie, de aanwezigheid van beveiligingsheaders en het gebruik van robots.txt bestanden. Enkele veel voorkomende audits die hieronder vallen, zijn onder meer:
- Vermijd grote JavaScript-bibliotheken
- Vermijd ongebruikte CSS
- Schakel tekstcompressie in
- Elimineer bronnen die weergave blokkeren
- Maak gebruik van browsercaching
- Serveer statische assets met een efficiënt cachebeleid
![Best practices Lighthouse-score](/f/2d27de23a93501aed1432faccf97e0f8.png)
SEO
SEO meet hoe goed de website is geoptimaliseerd voor zoekmachines. Het wordt beïnvloed door factoren zoals de aanwezigheid van metabeschrijvingen en title-tags, het gebruik van relevante trefwoorden en de structuur van de inhoud van uw website. De score wordt berekend door het middelen van de scores voor de volgende audits:
- Document titel
- Beschrijving
- Koppen
- Afbeeldingen
- Koppelingen
- Meta omschrijving
- Robots.txt
![SEO Google Lighthouse-score | prestatietesten van vuurtorens](/f/93c9c1cd95a5c26240c1337afa2dd700.png)
Lees ook: 27 beste gratis website-hostingservices
Hoe de resultaten te interpreteren
Lighthouse converteert elke onbewerkte statistische waarde naar een statistische score van 0 tot 100. Hoe hoger de score, hoe beter het is. De statistiekenscores zijn gekleurd volgens deze bereiken:
- 0 tot 49 (rode driehoek): slecht
- 50 tot 89 (oranje vierkant): moet worden verbeterd
- 90 tot 100 (groene cirkel): goed
Wanneer u de tests op dezelfde website uitvoert, is het gebruikelijk dat u fluctuaties in de algemene scores waarneemt. Deze variabiliteit kan aan verschillende factoren worden toegeschreven.
- Elke analyse geeft alleen inzicht in de prestaties van een enkele paginalading. Omdat het laden van twee pagina's niet identiek is, kunnen de laadtijden uiteraard verschillen.
- De paginasnelheid kan worden beïnvloed door de aanwezigheid van dynamische inhoud, zoals advertenties of vaak veranderende elementen, browserextensies die netwerkverzoeken wijzigen en achtergrondactiviteiten op de pc.
- Scores verkregen in verschillende omgevingen, zoals PageSpeed Insights en uw lokale computer, zijn mogelijk niet direct vergelijkbaar vanwege verschillen in hardware- en netwerkomstandigheden.
Hoe u uw vuurtorenscore kunt verbeteren
Lighthouse biedt zowel laboratoriumgegevens (gesimuleerde tests) als veldgegevens (echte gebruikersgegevens) om de prestaties van een webpagina te evalueren. Veldgegevens bieden inzicht in hoe daadwerkelijke gebruikers de site ervaren, terwijl laboratoriumgegevens nuttig zijn voor het testen van wijzigingen en verbeteringen.
![Web ontwerpen](/f/26dc96a3e7f35319a0f7c23dbd4d7e69.jpg)
Begin door u te concentreren op de aanbevelingen op het gebied van prestaties. Een sneller ladende website verbetert de gebruikerservaring en kan uw SEO-ranking verbeteren. Zodra uw prestatiescore is verbeterd, kunt u zich gaan concentreren op de aanbevelingen op de andere gebieden. Omdat toegankelijkheid en SEO essentiële componenten zijn voor de algehele kwaliteit van uw website, is het de moeite waard om ook op deze gebieden inspanningen te leveren.
Lees ook: Zyro versus Wix: welke websitebouwer moet u kiezen?
Bonustips voor beginners
Als u zojuist uw website heeft ontworpen en gelanceerd, volgen hier nog enkele tips die u kunt gebruiken:
- Laat u niet overweldigen door de talrijke suggesties in het Lighthouse-rapport. Begin met het meest cruciale advies en werk zo naar beneden in de lijst.
- Het Lighthouse-rapport kan worden gebruikt om uw ontwikkeling in de loop van de tijd te volgen. Uw Lighthouse-beoordelingen zouden moeten verbeteren naarmate u de aanbevelingen uitvoert.
- Vergeet niet om uw website op veel apparaten en browsers te testen. Omdat het Lighthouse-rapport op één enkele test is gebaseerd, is het van cruciaal belang dat u uw website op verschillende apparaten en browsers test om er zeker van te zijn dat deze goed werkt voor alle gebruikers.
We hopen dat onze gids u heeft geholpen te begrijpen hoe u het moet gebruiken Google Lighthouse voor het testen van de prestaties van uw website en daardoor te verbeteren. Als u vragen of suggesties voor ons heeft, kunt u ons dit laten weten in het opmerkingengedeelte. Houd TechCult in de gaten voor meer van dergelijke informatieve blogs.
Henry is een doorgewinterde technologieschrijver met een passie voor het toegankelijk maken van complexe technologieonderwerpen voor gewone lezers. Met meer dan tien jaar ervaring in de technologie-industrie is Henry een vertrouwde informatiebron voor zijn lezers geworden.