Google PageSpeed

Blog

Google PageSpeed Insights: je websitesnelheid inzichtelijk gemaakt!

Google PageSpeed

Google PageSpeed Insight - snelheid

Google pagespeed insights is dé tool om een indicatie te krijgen van de laadtijd van jouw site. Waarbij je direct suggesties krijgt om het te verbeteren.

Maar waarom is het verbeteren van de pagespeed zo belangrijk?

Google weet inmiddels dat gebruikers snel antwoord willen op hun vragen. Duurt het te lang voor de bezoeker? Dan zoekt deze het antwoord op een andere plaats.

Bouncerate & pagespeed

Bron: Think With Google

Een snelle website zorgt ervoor dat de bezoeker eerder zijn doel bereikt. Aangezien de gebruikerservaring erg belangrijk voor bezoekers is, heeft  Google in 2010 besloten de websitesnelheid officieel te benoemen als ranking factor. Destijds alleen voor desktop gebruikers.

Recent onderzoek wijst uit dat de laadsnelheid voor mobiele gebruikers nog belangrijker is, dan voor desktop gebruikers. Zodoende is de website snelheid sinds 9 juli 2018 ook uitgerold als ranking factor voor mobiel.

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 huidige 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’s tools: Google PageSpeed Insights. In deze blogpost leer je 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 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
  • één keer met een user-agent voor desktopapparaten

De user-agent bekijkt alle aspecten van de pagina 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) en onder de vouw te 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 langzaam laden, maar dat ligt dan voornamelijk aan de verbinding van de specifieke gebruiker. Als je verbeteringen doorvoert die Google aanraadt, zal de website met een trage 3G-verbinding sneller zijn dan voorheen.

Nu we weten hoe de Google PageSpeed Insights werkt, gaan 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
  • éé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.

De duidelijke prioritering van punten is ook 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 worden. Zo zorg je ervoor dat de belangrijkste onderdelen eerst geladen worden.

Hiervoor stel je een rendering path in. Waarbij de onderdelen met de meeste relevantie voor de bezoeker eerst vertoond worden.  Dit zogeheten rendering path, werkt psychologisch er goed voor de bezoeker. Er wordt immers binnen korte tijd content vertoond waar zij naar op zoek zijn. In zijn totaliteit is de snelheid hetzelfde, toch blijven bezoekers langer op je site. Het is daarom overbodig de gehele pagina zo snel mogelijk te laden. Met deze tactiek behaal je veel winst.

Stel prioriteiten door de content boven de vouw eerst te laden. De first meaningful paint (FMP) verwijst naar de tijd waarin de grootste gedeelte van de lay-out boven de vouw geladen is. Hier kan je de focus leggen op datgene wat de bezoekers als eerste dienen te zien.

Het gaat natuurlijk niet alleen om een snelle visuele presentatie van de pagina. Ook hoe snel bezoekers gebruik kunnen maken van de pagina weegt mee. Daarom kijk je naar de time to interact (TTI).

Zwaardere bestanden zoals JavaScript en CSS-bestanden kunnen later geladen worden. 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

Deze suggestie van Google PageSpeed Insights wordt gegeven wanneer afbeeldingen verkleind kunnen worden, waarbij de kwaliteit van de foto gewoon hetzelfde blijft. 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.

Caching verbetert de websitesnelheid voor terugkerende gebruikers aanzienlijk. Daarom beveelt Google PageSpeed Inisghts hiervan gebruik te maken. 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. Dit wordt reactietijd genoemd. Zodra de reactietijd hoger is dan 200 ms, dan zal Google PageSpeed Insights aanbevelen de reactietijd te beperken. De snelheid van de server heeft namelijk 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. Zodra Google PageSpeed Insights de gzip compressie niet detecteert, zal de tool de suggestie geven om comprimeren in te schakelen. 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 Google PageSpeed Insights 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.

Zoekmachine optimalisatie

Bekijk deze dienst

Samen de hoogste conversiestijging behalen?