Website optimaliseren en snelheid checken met Lighthouse
Of het nu je eigen blog, de website van je onderneming of gewoon een privéproject is, niets is zo vervelend als een trage, logge website. Het is daarom belangrijk om de sitesnelheid goed in de gaten te houden. Een manier om dat te doen is met Lighthouse, een opensourcetool die onder de vlag van Google zelf wordt uitgebracht. Hoe werkt de tool en welke gegevens kun je gebruiken om je website sneller en lichter te maken?
In dit artikel lees je:
-
Wat Lighthouse is
-
Hoe je Lighthouse downloadt en gebruikt
-
Welke data belangrijk is
-
Extra tips voor een nog snellere en efficiëntere website
-
Ook interessant: Bouw je eigen responsieve webite
Waarom een snelle website?
Een snelle website is belangrijk. Voor de gebruiker – niemand zit namelijk te wachten op ellenlange laadtijden, en letterlijk elke seconde telt – maar ook voor Google zelf. Snelle websites die makkelijk laden worden doorgaans hoger gewaardeerd dan trage websites, waardoor ze vanzelf hoger in de zoekresultaten verschijnen. Dat leidt tot meer verkeer en (afhankelijk van het soort website) tot hogere verdiensten.
Lighthouse-extensie
Lighthouse is een extensie uit het ontwikkelaarsportaal van Google. Je kunt 'm gratis downloaden vanuit de Webstore in Google Chrome, en er is ook een versie voor Firefox beschikbaar. De extensie nestelt zich in je browser als een oranje vuurtoren.
Wat Lighthouse doet, is je website bezoeken zoals een groep verschillende gebruikers dat zou doen. De website wordt een aantal keer opnieuw geladen in verschillende situaties – denk aan een trage internetverbinding of met bepaalde browserinstellingen. Dat soort resultaten krijg je later te zien.
Lighthouse gebruiken
Klik je op het icoontje, dan krijg je een uitklapmenu te zien met daarin een aantal opties. De eerste is puur een voorkeursoptie over hoe je de data te zien krijgt; je kunt hem prima op PSI Frontend laten staan. Daarna bepaal je of je je website met een desktopbrowser of op een mobiel apparaat wilt testen en kun je het taalgebied aangeven dat je voor je website gebruikt.
Klik daarna op Generate Report en de tool doet zijn werk. Het kan een halfminuutje duren, dus laat hem lekker begaan. Voor het beste resultaat sluit je alle andere apps en vensters en doe je zelf verder niets.
Data uitlezen
Als de data eenmaal binnen is, zie je dankzij de vier cirkels met een getal erin in één opslag de uitkomst van de test. Zoals je ziet, is de snelheid maar een deel van de test. Scrol naar beneden om meer gedetailleerde info te krijgen van wat er precies is getest en tips voor eventuele verbeteringen.
Prestaties
Onder het kopje Prestaties zie je een aantal termen staan die wellicht wat abacadabra-achtig overkomen, maar het is wel zo handig om die even in je geheugen te prenten:
First contentful paint is het eerste moment waarop de gebruiker relevante informatie – zoals tekst, afbeeldingen of een video – ziet staan. Largest contentful paint is het moment waarop het grootste, meestal belangrijkste deel van je pagina wordt weergegeven. Total blocking time kijkt naar de tijd dat gebruikers wel iets kunnen zien, maar nog nergens op kunnen klikken vanwege scripts die nog aan het laden zijn en Cumulative layout shift behelst de plekken op je website waarbij reeds geladen gegevens opeens van plek verschuiven, omdat erboven of ernaast nog iets wordt ingeladen – iets waar Google steeds harder tegen optreedt.
Als je hier veel gele of rode cijfers tegenkomt, is het zaak even goed naar de achterkant van je website te kijken. Verwijder onnodige plug-ins, verklein je foto’s en video’s en kies eventueel een andere hostingprovider.
Meer data
Onder het kopje Toegankelijkheid staat ook een aantal aanbevelingen, waar we nu niet op ingaan, maar die wel de moeite waard zijn even snel te checken. Onder Praktische tips vind je nog zo’n lijst, maar dan met punten die Google belangrijk vindt. Niet zozeer vanwege de snelheid of toegankelijkheid, maar om je website beter te kunnen indexeren. Loop die lijst dus ook even goed door. Hoe meer groene en witte bolletjes, hoe beter.
Onderaan vind je onder het kopje SEO nog een laatste lijst. Ook daar vind je manieren om je website nog beter aan Google aan te bieden, met een gemiddeld hogere ranking tot gevolg.
Extra tips
Gebruik Lighthouse niet alleen op je homepage, maar ook op specifieke pagina’s binnen je website; de verschillen kunnen groot zijn, afhankelijk van wat er op de pagina staat.
Check zowel de browserversie als de mobiele versie, en gebruik bij twijfel de mobiele versie als leidraad voor je aanpassingen.
Gebruik Lighthouse niet eenmalig, maar kom af en toe even terug. Google verandert continu, en ook de tips en tools in de extensie worden regelmatig aangepast.
Conclusie
Lighthouse is een handige tool om je website(s) te optimaliseren. Met een paar kleine tweaks, zoals het verkleinen van afbeeldingen, het verwijderen van onnodige scripts en het gebruik van een goede hostingprovider, maak je je website beduidend sneller. Dat leidt tot een gemiddeld hogere positie in de zoekresultaten, meer bezoekers en uiteindelijk hogere verdiensten.