Google PageSpeed Insights: je websitesnelheid inzichtelijk gemaakt!

Home » Blog » Articles » Google PageSpeed Insights: je websitesnelheid inzichtelijk gemaakt!

Google PageSpeed Insight - snelheid

 

Google streeft naar een snel internet.  Met een snellere website zorg je ervoor dat de gebruikerservaring verbetert. Zo bereikt de bezoeker ook sneller zijn doel. Precies daarom heeft Google in 2010 besloten de websitesnelheid als rankingfactor mee te nemen. Een snelle website heeft dus meer kans om goed te ranken en meer bezoekers binnen te halen. Verder is het natuurlijk ook goed voor de tevredenheid van je bezoekers.

Om dit goed voor elkaar te hebben, moet je ten eerste inzicht hebben in de snelheid van je website. Vervolgens wil je weten wat je kan doen om deze te verbeteren. Om je daarbij te helpen, hebben wij deze blog geschreven. Daarin nemen we je mee in de wereld van Google PageSpeed Insights en hoe je deze tool kan inzetten.

Google PageSpeed insights: Hoe werkt het?

Als je aan je websitesnelheid wil werken en nog niet weet waar te beginnen, is het goed om aan de slag te gaan met Google PageSpeed Insights. Deze tool is door Google zelf ontwikkeld om eigenaren van websites te stimuleren hun website sneller te maken. Door het invoeren van een URL geeft de tool direct inzicht in de huidige snelheid en de optimalisatiekansen.

Om beter te kunnen begrijpen waarop de snelheid van een website gebaseerd is, gaan we eerst kijken naar de werking van Google PageSpeed Insights. Om te beginnen gaan we naar de website van Google PageSpeed Insights. Daar kunnen we direct en simpel een URL invoeren (zie afbeelding 1).

 

Google PageSpeed Insight - 1

 

Na het invoeren van de URL wordt de website twee keer bezocht: één keer met een user-agent voor mobiele apparaten en één keer met een user-agent voor desktopapparaten. De user-agent, een fictieve bezoeker, bekijkt alle aspecten van de website die ingeladen worden en geeft weer in welke tijd dit gebeurt. Hierbij wordt onderscheid gemaakt tussen de tijd die nodig is om alles boven de vouw (above the fold) te kunnen laden en de tijd die nodig is om alles onder de vouw (‘under the fold’) te kunnen laden. Boven de vouw is dat deel van de website die we daadwerkelijk op ons scherm te zien krijgen, terwijl onder de vouw het gedeelte is van de website dat we pas zien al we naar beneden scrollen.

Google PageSpeed Insights test de websitesnelheid zonder netwerkafhankelijke aspecten. Dat betekent dat als de gebruiker bijvoorbeeld op het moment een trage 3G-verbinding heeft, de website trager is dan Google PageSpeed Insights daadwerkelijk laat zien. Een website die snel is volgens Google Pagespeed Insights kan dus voor sommige gebruikers alsnog langzaam laden. Als je verbeteringen doorvoert die Google aanraadt, zal de website met een trage 3G-verbinding wel alsnog sneller zijn dan voorheen.

Nu we weten hoe de Google PageSpeed Insights werkt, kunnen we kijken naar de huidige websitesnelheid. Voer de URL in en klik op analyseren. De tool laat dan de  twee user-agents de URL bezoeken (zie afbeelding 2).

 

Google PageSpeed Insight - 2

 

Na het analyseren krijgen we twee tabbladen te zien: één voor de mobiele snelheid en één voor de desktop-snelheid. Per tabblad worden de verbeterpunten weergegeven. Deze verbeterpunten worden door Google PageSpeed Insights op prioriteit gesorteerd door middel van verschillende kleuren. Zo hebben punten met een rood uitroepteken de meeste impact op de websitesnelheid. Een geel uitroepteken geeft aan dat de prioriteit van het probleem iets lager is. Een groen vinkje geeft tot slot aan dat het betreffende onderdeel reeds geoptimaliseerd is.

Dat is heel fijn aan Google PageSpeed Insights. Zo kun je tijdens het verbeteren van de snelheid altijd controleren of je op de juiste weg bent. Beide tabbladen en de resultaten bespreken we in het volgende hoofdstuk. Ook leggen we daar uit hoe je de snelheid zo goed mogelijk optimaliseert.

Google PageSpeed Insights: Hoe verbeter ik mijn websitesnelheid?

Nu we twee overzichtelijke tabbladen hebben met verbeterpunten, kunnen we kijken wat deze punten  inhouden en hoe we de website dan ook daadwerkelijk sneller krijgen. Om het zo overzichtelijk mogelijk te maken, bespreken we hieronder de belangrijkste punten die uit de Google PageSpeed Insights test kunnen komen. Niet elk punt is natuurlijk voor iedereen van toepassing. Toch hebben we hieronder de vijf belangrijkste punten uitgewerkt. Per punt geven we uitleg en een aantal bruikbare tips. Het kan vrij technisch worden, maar met kleine aanpassingen kan vaak al veel snelheidswinst worden behaald.

 

Google PageSpeed Insight tabblad

1. Structureren van de paginaonderdelen

De websitesnelheid kan aanzienlijk verbeterd worden als je de laadindeling aanpast. Wat we hiermee willen zeggen is, dat alle onderdelen die op een pagina geladen moeten worden in een bepaalde volgorde gezet moeten worden. Zo zorg je ervoor dat de belangrijkste onderdelen, zoals tekst en content, het eerst geladen worden. Zwaardere bestanden zoals JavaScript en CSS-bestanden komen dan later. Je kunt er eventueel ook voor kiezen om de zwaardere bestanden onder de vouw te laden.  Als je zelf niet zo technisch bent, is het handig dit met je webbouwer te bespreken.

2. Afbeeldingen optimaliseren

Bij het weergeven van een afbeelding op de website moet het toestel van de bezoeker de afbeelding eerst laden. Hoe zwaarder de afbeelding, hoe langer dit duurt. Dat kan de laadsnelheid flink vertragen. Zo licht mogelijke afbeeldingen gebruiken is daarom goed voor de laadsnelheid. Maar hoe zorgen we er nou voor dat een afbeelding zo klein mogelijk is, zonder dat de kwaliteit slechter wordt? Het antwoord is niet heel moeilijk. Veel CMS-systemen, zoals WordPress, hebben namelijk verschillende plug-ins die de afbeelding automatisch kunnen verkleinen. Door deze plug-ins te downloaden binnen je CMS-systeem kun je alle afbeeldingen eenvoudig  comprimeren. Op internet zijn er overigens ook genoeg simpele tools te vinden die je helpen bij het comprimeren van een enkele afbeelding. De meest prettige tool hiervoor is Kraken.io. Met deze tool kun je namelijk onbeperkt afbeeldingen comprimeren.

3. Gebruikmaken van browser caching

Browser caching is het automatisch opslaan van verschillende subsets. Subsets kunnen bijvoorbeeld afbeeldingen, JavaScript- of CSS-bestanden zijn. Standaard worden deze subsets elke keer opnieuw geladen bij ieder bezoek. Sommige subsets blijven echter hetzelfde, denk bijvoorbeeld aan je logo. Zonde dus om deze bij elk bezoek opnieuw te moeten laden. Als je gebruikmaakt van browser caching, worden bepaalde bestanden op de computer van de bezoeker opgeslagen, zodat ze bij het volgende bezoek meteen beschikbaar zijn.

Dit verbetert de websitesnelheid voor terugkerende gebruikers aanzienlijk. Ook hiervoor is voor bijna alle CMS-systemen wel een plug-in te vinden. Als je de technische kennis hebt, kan je dit ook handmatig in je .htaccess-bestand aanpassen. Als je geen idee hebt hoe je dit aan moet pakken of waar je op moet letten, kan je dit het beste met je webbouwer bespreken. Als je het niet goed doet, kan je site na updates namelijk bij terugkerende bezoekers verkeerd getoond worden.

4. Reactietijd van server beperken

Je website wordt geladen vanaf een server. Zodra een bezoeker dus op je website komt, worden de elementen van de pagina van de server gehaald en aan de bezoeker getoond. Daarom heeft de snelheid van de server invloed op de snelheid van je website. Welke webhosting en welk soort server je gebruikt is dus belangrijk. Ook de locatie van de server is van belang. Hoe dichter deze bij de gebruiker staat, hoe minder snelheidsverlies er optreedt. Weet je niet zo goed wat de beste keuze voor je is? Lees dan ons blog over serverkeuze. Hierin leggen we uitgebreid uit waar je op moet letten.

5. Comprimeren inschakelen

Comprimeren is letterlijk het verkleinen van iets. In dit geval gaat het over de onderdelen van de website die ingeladen moeten worden bij elk bezoek. Door deze onderdelen te verkleinen, kan de website sneller geladen worden. Het voordeel is, dat veel servers de bestanden kunnen comprimeren naar een zogeheten gzip-indeling. Deze indeling codeert de informatie, waardoor er minder bits (lagere bestandsgrootte) nodig zijn om de websiteinhoud op te halen. Om deze compressie in te schakelen is wederom een webbouwer nodig. Hij kan op de webserver de bestanden comprimeren.

Google PageSpeed Insights: aan de slag

Waarschijnlijk heb je tijdens het lezen van dit blog je eigen website gecheckt in Google Pagespeed Insights. Mocht dat niet zo zijn: ga er meteen mee aan de slag en houd dit blog ernaast. Denk er daarbij aan dat het niet gaat om het behalen van de perfecte score. Bijna geen enkele website zal 100 punten behalen. De score en prioriteitenlijst zijn slechts een leidraad. Sommige punten zullen niet realistisch zijn om aan te passen: laat je daar dus niet door uit het veld slaan.

Uit de tool komen vaak wat punten die je snel kan oppakken om meteen verbetering te realiseren. Andere punten kosten wat meer werk, maar zijn goed om voor de lange termijn in het achterhoofd te houden. Zo haal je toch waardevolle inzichten uit deze tool.

Hoe handig hij ook is, raakt deze tool natuurlijk alleen maar de oppervlakte. Heb je een grote site waarbij vindbaarheid en gebruiksvriendelijkheid cruciaal zijn? Dan is het de moeite waard om dieper in de websitesnelheid en ook andere technische en minder technische zaken te duiken. Als je hier een professioneel oordeel over wil, kan je altijd contact met ons opnemen. Onze specialisten lichten je site helemaal door en leggen de vinger direct op de zere plek, zodat je weet wat je moet doen om meer bezoekers binnen te halen.

Relevante diensten

Meer lezen over dit onderwerp? Bekijk onze relevante diensten.

Reageren