Aan het laden…

Je gebruikt Internet Explorer. Deze website ondersteunt alleen moderne browsers. Gebruik alsjeblieft Chrome, Firefox, Safari of Edge.

Menu

Website sneller maken: Google PageSpeed Insights begrijpen

Je bent benieuwd hoe het met de laadsnelheid van je website gesteld is en doet de Google PageSpeed Insights test. Ai, Google geeft je een niet al te best cijfer en een hele reeks aanbevelingen… maar snap je wat er staat? 

In dit artikel wil ik uitleggen wat de belangrijkste aanbevelingen in PageSpeed Insights betekenen, en hoe je je website sneller doet laden.

Inhoud

  1. Wat is Google PageSpeed Insights?
  2. Hoe belangrijk is een snelle laadtijd?
  3. Je hoeft geen perfecte score
  4. De resultaten begrijpen
    1. Verwijder bronnen die de weergave blokkeren
    2. Ongebruikte css en/of JavaScript verwijderen
    3. Laad afbeeldingen die niet in beeld zijn nog niet
    4. Codeer afbeeldingen op een efficiënte manier
    5. Lever afbeeldingen in moderne indelingen
    6. Schakel tekstcompressie in
    7. Reduce initial server response time
    8. Lever statische items met een efficiënt cachebeleid
  5. Conclusie

Wat is Google PageSpeed Insights?

PageSpeed Insights analyseert de content van een webpagina en geeft vervolgens suggesties om die pagina sneller te krijgen. Voor mobiel en voor desktop. Ook geeft het je een cijfer van 0 tot 100. 

Hoe werkt het? Je voert op PageSpeed Insights jouw webpagina in (meestal homepagina) en klikt op ‘Analyseren’. Wacht een aantal seconden en je krijgt jouw cijfer en aanbevelingen te zien.

Er is een onderdeel voor mobiel en eentje voor desktop.

PageSpeed Insights beginscherm
Een voorbeeld van het PageSpeed Insights beginscherm.

Hoe belangrijk is een snelle laadtijd?

Een snelle website is vooral belangrijk om geen bezoekers te verliezen. Hoe vaak ben je zelf niet afgehaakt omdat het laden te lang duurde? 

Omdat een snelle website goed voor de gebruikerservaring is, is het ook van belang voor je SEO. 

SEO is het proces om jouw website hoger in Google te krijgen. En snelheid is één van de honderden factoren waar Google een website op beoordeelt. 

Lees meer over SEO en hoe Google werkt

Nu is het niet zo dat een snelle website jou op nummer 1 zal doen staan. Goede content blijft het belangrijkst. Als jij geen antwoord geeft op iemands zoekvraag dan zal je webpagina niet hoog verschijnen. 

Zoals John Mueller van Google zo mooi gezegd heeft: “Adding racing tires to a rusting Ford Pinto isn’t going to make it win any races.”

Máár als meerdere websites qua content even goed zijn, kan snelheid je wel een duwtje in de rug geven:

“If you have 2 results that are basically doing fine content wise, we would probably get the one that is faster prominence in the search results.”

Martin Splitt Google medewerker

Je hoeft geen perfecte score

Je hebt geen perfecte score nodig. Dus ga je niet in allerlei bochten wringen om per se een 100/100 te krijgen.

Bij mijn eigen websites streef ik altijd om boven de 80/100 op mobiel en boven de 90/100 op desktop te komen. 

De mobiele score komt meestal lager uit omdat daarvoor een tragere verbinding, vergelijkbaar met snel 3G, gesimuleerd wordt. Dit wordt ook wel mobile throttling genoemd.

Het doel is om je website beter te maken voor je bezoeker door lange laadtijden te voorkomen. Maar om 100/100 te krijgen moet je je website soms zo minimaal maken dat de content of het ontwerp eronder kan gaan lijden. 

En dan heb je misschien wel een snelle website, maar eentje waarop niet zoveel staat. Hou dus niet te krampachtig aan een perfecte score vast

Vooral voor SEO niet. Om Mueller nog een keertje te quoten: “Google differentiates between normal and really really slow sites. If yours is kinda normal I wouldn’t sweat it.”

Ook verschilt de score meestal een paar punten per test. Dit kan omdat jouw server de ene keer iets sneller reageert dan de andere keer. Dat is normaal.

“If [you] are in the middle bit, you want to go to the fast bit. But it doesn’t matter if you have a score of 90 or 95. That doesn’t really make a difference.”

Martin Splitt Google medewerker

De resultaten begrijpen

Wanneer je de PageSpeed Insights test doet, krijg je 3 onderdelen te zien: 

  1. Aanbevelingen zijn suggesties om je pagina sneller te doen laden; 
  2. Diagnostische gegevens zijn extra aanbevelingen die niet direct je score beïnvloeden;
  3. Geslaagde controles zijn de dingen die je al goed doet.

Laten we kijken naar een aantal belangrijke aanbevelingen en diagnostische gegevens waarmee je je website sneller kan maken.

1. Verwijder bronnen die de weergave blokkeren

Wat betekent het?

Insights legt het zo uit: “Bronnen blokkeren de eerste weergave voor je pagina. Overweeg kritieke JS/css inline te leveren en alle niet-kritieke JS/stijlen uit te stellen.

Heb je geen idee wat ze bedoelen?

Een webpagina is opgebouwd uit code. Met css geef je styling aan een webpagina, bijvoorbeeld een groene achtergrondkleur. Zonder css zou je website er als een onopgemaakt Word document uitzien. 

En met JS (voluit JavaScript) maak je een webpagina interactief. Je kunt ermee een menu laten uitklappen als iemand erop klikt, bijvoorbeeld. Google Analytics gebruikt ook JavaScript.

Je hebt css en JavaScript dus nodig. En meestal plaatsen wij developers die code in aparte bestanden om het overzicht te behouden. 

Maar die aparte bestanden moeten eerst ingeladen worden voordat de webpagina getoond kan worden. Dat bedoelt Insights met “bronnen die de weergave blokkeren”.

Het is prima als je een handjevol bestanden hebt. Maar als jouw website 40 bestanden in moet laden, dan gaat de laadsnelheid snel achteruit. 

Als je de Insights aanbeveling uitklapt zie je een overzicht van alle JS en css bestanden die jouw webpagina moet laden. Ga maar eens tellen.

PageSpeed Insights - Verwijder bronnen die weergave blokkeren aanbeveling
Klap de aanbeveling open om een lijst van de blokkerende bronnen te zien.

Hoe los je het op?

Zorg ervoor dat er minder bestanden ingeladen worden. 

Uitgaande van een WordPress site, zijn er 3 spelers die bestanden kunnen inladen: WordPress zelf, jouw thema en jouw plugins.

WordPress:

Sinds versie 4.2 laadt WordPress een extra JS bestand voor emoji’s. Zie je in jouw lijst van bestanden “wp-emoji-release.min.js” staan? 

Je kunt dit voorkomen met de plugin Disable Emojis. Doe ik zelf ook altijd.

Thema & Plugins:

Elk thema laadt minstens één css bestand. Als je Google Fonts gebruikt zul je die ook zien in je lijstje. Daarnaast kan elke plugin css en JS bestanden inladen. Een slider plugin zal bijvoorbeeld beiden nodig hebben. 

Je moet er dus achterkomen wie de snelheidslurpers zijn.

Misschien heb je wel een plugin die 10 bestanden inlaadt terwijl je hem nauwelijks gebruikt. Die kun je dan beter verwijderen (of vervangen).

Hoe kom je achter de boosdoeners? Het snelste is om al je plugins te deactiveren* en de PageSpeed test nog een keer uit te voeren:

  1. Worden er nog steeds te veel bestanden ingeladen? Dan is jouw thema de boosdoener en kun je beter wisselen (psst wij hebben een goeie).
  2. Worden er nu nog maar een paar geladen? Dan komt het door een of meerdere van je plugins. Activeer een plugin en herhaal de test. Totdat je alle boosdoeners te pakken hebt. Daarna kun je bedenken of je die plugin(s) echt nodig hebt of kunt vervangen voor een betere.

* Let op, je kunt het beste eerst een database backup maken. Een plugin zou alle instellingen moeten onthouden bij reactivatie. Maar als er toch iets mis gaat, kun je in dat geval de backup weer terugzetten.

2. Ongebruikte css en/of JavaScript verwijderen

Wat betekent het?

Een webpagina is opgebouwd uit code. Zoals uitgelegd in het vorige punt, geeft css styling aan een webpagina. Zonder css staat alles in zwartwit onder elkaar. En met JavaScript maak je een webpagina interactief.

De browser gaat elke regel css en JavaScript langs om te kijken of het die code ergens op de webpagina moet toepassen. Wanneer je regels hebt staan die nergens gebruikt worden, verspilt de browser dus tijd aan die checks. 

Browsers zijn heel snel dus een paar ongebruikte regels is echt niet erg, maar als je er heel veel hebt, is het zonde. En als een compleet bestand niet wordt gebruikt terwijl je het wel inlaadt, verspil je ook tijd (zie uitleg vorige punt). 

Hoe los je het op?

Als je een hoge “geschatte besparing” bij dit punt krijgt, heb je waarschijnlijk ook de aanbeveling “verwijder bronnen die de weergave blokkeren” gekregen. Probeer die melding eerst weg te krijgen (zie uitleg), want er is een grote kans dat het dit punt ook oplost.

En is de geschatte besparing slechts een paar miliseconden? Dan zou ik dit punt negeren. Op mijn site is 0,15 seconde winst te behalen. Vind ik persoonlijk niet de moeite waard.

3. Laad afbeeldingen die niet in beeld zijn nog niet

Wat betekent het?

Insights zegt: “Overweeg om afbeeldingen die niet in beeld zijn en verborgen afbeeldingen via ‘lazy loading’ te laden nadat alle kritieke bronnen zijn geladen om zo de tijd tot interactief te verlagen.”

Stel, je hebt 20 foto’s op je webpagina en slechts 1 van die foto’s is meteen in beeld wanneer de pagina geladen wordt. Toch wordt de pagina pas getoond wanneer die andere 19 foto’s ook geladen zijn.

Zonde, toch?

Daarom is “lazy loading” bedacht. Dit principe zorgt ervoor dat een foto pas geladen wordt wanneer het (bijna) in beeld is. De eerste weergave wordt dan veel sneller geladen, want je hoeft maar 1 foto te laden in plaats van 20.

Hoe los je het op?

Je kunt lazy loading makkelijk aanzetten op WordPress via een plugin zoals a3 Lazy Load. Soms zit het al als optie in een thema.

Het goede nieuws is dat WordPress 5.5 (augustus 2020) waarschijnlijk lazy loading gaat ondersteunen in de core. Dit betekent dat je dan geen plugin meer nodig hebt. 

WordPress zal lazy loading via het nieuwe “loading=lazy” attribuut regelen. Lazy loading moest altijd via JavaScript geregeld worden, maar de meeste browsers kunnen dit tegenwoordig ook zelf via dat ene attribuut. Belangrijke uitzondering is Safari op mobiel en desktop. 

Heb je veel bezoekers vanuit Safari? Dan kun je overwegen om een plugin te blijven gebruiken tot Safari het wel ondersteunt.

4. Codeer afbeeldingen op een efficiënte manier

Wat betekent het?

Insights zegt: “Geoptimaliseerde afbeeldingen worden sneller geladen en verbruiken minder mobiele data.”

Daarnaast zegt het: “Lighthouse collects all the JPEG or BMP images on the page, sets each image’s compression level to 85, and then compares the original version with the compressed version. If the potential savings are 4KiB or greater, Lighthouse flags the image as optimizable.”

Simpeler gezegd betekent deze aanbeveling dat jouw afbeeldingen op lagere kwaliteit opgeslagen kunnen worden. Dit zorgt voor een kleinere bestandsgrootte. En hoe kleiner de bestandsgrootte van een foto, hoe sneller de foto laadt. 

Hoe los je het op?

Wanneer je jouw foto opslaat in een programma zoals Photoshop, ga dan niet voor maximale kwaliteit. Kies liever normale of hoge kwaliteit (50-85%). 

Dit maakt de bestandsgrootte een stuk kleiner, terwijl het blote oog geen of nauwelijks verschil in kwaliteit ziet.

Zo is de onderstaande foto 2,3 MB wanneer opgeslagen in maximale kwaliteit op 2500×1668 pixels. En slechts 0,3 MB wanneer opgeslagen met 60% kwaliteit. Ziet er nog steeds super scherp uit, toch?

Foto opgeslagen met 60% kwaliteit
Deze foto is opgeslagen met 60% kwaliteit.

5. Lever afbeeldingen in moderne indelingen

Wat betekent het?

Insights zegt: “Afbeeldingsindelingen zoals JPEG 2000, JPEG XR en WebP bieden vaak betere compressie dan PNG of JPEG. Dit resulteert in snellere downloads en minder dataverbruik.”

Waarschijnlijk wist je al dat foto’s opgeslagen als JPEG een kleinere bestandsgrootte hebben dan als PNG. Dat is fijn, want hoe kleiner de bestandsgrootte, hoe minder lang het duurt om te laden. 

Intussen zijn er naast JPEG nieuwe types bijgekomen. WebP is de populairste. Het werkt tot nu toe op alle browsers behalve Safari en Internet Explorer. Safari heeft het trouwens wel in de planning staan. 

WebP biedt een betere compressie dan JPEG en maakt bestandgroottes daarom nog kleiner. Goed voor je laadsnelheid.

Hoe los je het op?

Jammergenoeg ondersteunt Photoshop nog geen “opslaan als WebP” optie. Je kunt wel een WordPress plugin met WebP ondersteuning gebruiken.

Eerlijk gezegd negeer ik dit punt nog en focus ik vooral op het vorige punt. Mijn Insights scores zijn hoog en ik heb veel bezoekers via iPhone (Safari). Ik wacht dus tot Safari WebP ondersteunt voordat ik moeite ga doen.

6. Schakel tekstcompressie in

Wat betekent het?

Insights zegt: “Tekstgebaseerde bronnen moeten worden geleverd met compressie (gzip, deflate of brotli) om het totale aantal netwerkbytes te minimaliseren.”

Simpeler gezegd: met compressie maak je de bestanden op je pagina kleiner, waardoor de pagina sneller laadt.

Voor de browser maakt het namelijk niet uit als de code niet “mooi” is. De code mag zo opgepropt mogelijk zijn, want het kan het toch wel ontleden.

Hoe los je het op?

Doorgaans wordt gzip compressie gebruikt. Dit moet op de webserver aangezet worden. Hiervoor ben je dus afhankelijk van je webhosting.

Gzip kan als instelling in het controlepaneel van je webhosting staan. Vaak onder PHP. Zie je niets staan? Vraag dan aan je webhosting of ze gzip (of een andere vorm van tekstcompressie) aan kunnen zetten voor je.

Zegt je webhosting geen enkele vorm van tekstcompressie te ondersteunen? Dan zou ik verhuizen naar een betere partij.

Verder kun je extra compressie aanzetten via de .htaccess. Dat is een speciaal bestand op je server. Als je via FTP of SFTP jouw site bezoekt, zie je dat .htaccess bestand staan. Op een Apache server kun je met deze code mod_deflate compressie aanzetten:

<IfModule mod_deflate.c>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
</IfModule>

Plaats dit onder wat er al in de .htaccess staat. Haal niks weg.

Vind je het eng om met code te werken? Je kunt ook je webhosting vragen om dit voor je in te stellen.

Voorbeeld: Wanneer je onze website in Chrome met DevTools inspecteert, zie je dat wij gzip en deflate compressie aan hebben staan:

Tekstcompressie van een site zien in Chrome DevTools
In de DevTools van Chrome kun je in de Network tab zien of een site gzip aan heeft.

7. Reduce initial server response time

Dit betekent dat jouw server er te lang over doet om te “antwoorden”. Jouw browsers “vraagt” de server namelijk om een website te tonen wanneer je een website bezoekt. 

Hier kun je zelf niets aan doen. Dit ligt bij je webhosting.

Een trage server kan iets tijdelijks zijn. Tenzij je een gigant zoals Amazon bent, heb je meestal shared hosting. Dit betekent dat je met meerdere sites op 1 server staat. Daardoor kan de server tijdelijk traag zijn als er teveel verkeer is op die server.

Krijg je deze aanbeveling? Probeer PageSpeed een paar uur later en een dag later nog een paar keer. Blijf je constant die melding krijgen? Dan kun je overwegen om van webhosting te wisselen.

8. Lever statische items met een efficiënt cachebeleid

Wat betekent het?

Insights zegt: “Een lange levensduur voor het cachegeheugen kan herhaalde bezoeken aan je pagina versnellen.”

Je kunt caching instellen voor statische elementen. Statisch? Daarmee bedoelen we elementen op je website die niet snel veranderen, zoals een afbeelding, css bestand of JavaScript bestand. 

En wat is caching? Met caching zeg je eigenlijk tegen de browser: “Blijf dit bestand onthouden voor x aantal dagen”. 

De browser moet bij iemands eerste bezoek alle bestanden op de webpagina laden. Maar als diegene de pagina een 2e keer bezoekt, kan de browser teruggrijpen op de cache waardoor de pagina sneller laadt. 

En aangezien dezelfde css en JavaScript bestanden vaak op meerdere pagina’s worden gebruikt, maakt het het eerste bezoek aan andere pagina’s op je site ook sneller.

Hoe los je het op?

Je kunt een caching plugin installeren zoals W3 Total Cache of direct jouw .htaccess aanpassen.

Ik vind die caching plugins meestal nogal log en werk liever direct via de .htaccess. Dat is een speciaal bestand op je server.

Als je via FTP of SFTP jouw site bezoekt, zie je dat .htaccess bestand staan. Op een Apache server kun je hiermee caching aanzetten:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
ExpiresDefault "access 1 day"

# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"

# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"

# CSS & JS
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Plaats dit onder wat er al in de .htaccess staat. Haal niks weg.

Vind je het eng om met code te werken? Je kunt ook je webhosting vragen om dit voor je in te stellen.

Je hoeft trouwens niet al te zwaar aan Insight’s advies te hangen zolang je enige vorm van caching aan hebt staan. Insights zeurt bijvoorbeeld zelfs over Google’s eigen Google Analytics cachebeleid (2 uur). 

Maar zie je bij Cache-TTL “none” staan? Dan staat er geen enkele vorm van caching aan op dat bestand en kun je beter wel iets doen.

PageSpeed Insights cache
Deze site heeft geen caching ingesteld voor afbeeldingen.

Conclusie

We hebben gekeken naar een aantal belangrijke aanbevelingen die PageSpeed Insights geeft. In het kort: Laad niet te veel css en JavaScript bestanden, zet compressie en caching aan en optimaliseer je foto’s. 

Zoals gezegd is een snelle website alleen niet genoeg om op nummer 1 in de zoekresultaten te komen. Maar het zal je bezoekers een stuk blijer maken en daarmee Google ook.

Behoefte aan een WordPress website die lekker snel is? 

Misschien dat ons thema iets voor jou is. Wij helpen je met het installeren en instellen, waarbij we SEO en gebruikersvriendelijkheid meenemen. Zodat jouw website niet alleen snel, maar gewoon goed is.

Home » Blog » SEO » Website sneller maken: Google PageSpeed Insights begrijpen