Heb je de laadsnelheid van jouw website getest met Google PageSpeed Insights maar snap je niet wat de aanbevelingen betekenen en hoe je ze doorvoert?
In dit artikel leg ik uit wat de belangrijkste aanbevelingen in PageSpeed Insights betekenen, en hoe je je website sneller doet laden.
Inhoud
- Wat is Google PageSpeed Insights?
- De resultaten begrijpen
- Laad afbeeldingen die niet in beeld zijn nog niet
- Codeer afbeeldingen op een efficiënte manier
- Lever afbeeldingen in moderne indelingen
- Verwijder bronnen die de weergave blokkeren
- Ongebruikte css en/of JavaScript verwijderen
- Schakel tekstcompressie in
- Eerste reactietijd van server verkorten
- Lever statische items met een efficiënt cachebeleid
- Waarom is mijn mobiele score lager?
- Wat is een goede score?
Wat is Google PageSpeed Insights?
Google 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 vult op PageSpeed Insights jouw webpagina in (meestal homepagina) en klikt op ‘Analyseren’. Wacht een aantal seconden en je krijgt jouw cijfer en een reeks aanbevelingen te zien.
Er is een onderdeel voor mobiel en eentje voor desktop.
De resultaten begrijpen
Wanneer je de PageSpeed Insights test doet, krijg je 3 onderdelen te zien:
- Aanbevelingen zijn suggesties om je pagina sneller te doen laden;
- Diagnostische gegevens zijn aanbevelingen die je score niet beïnvloeden;
- 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.
Aanbeveling: Laad afbeeldingen die niet in beeld zijn nog niet
Aanbeveling: “Overweeg 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. Meer informatie“
Wat betekent het?
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?
Tegenwoordig staat lazy loading standaard aan op WordPress en Wix. WordPress ondersteunt lazy loading via het relatief nieuwe “loading=lazy” attribuut.
Aanbeveling: Codeer afbeeldingen op een efficiënte manier
Aanbeveling: “Geoptimaliseerde afbeeldingen worden sneller geladen en verbruiken minder mobiele data. Meer informatie“
Wat betekent het?
Je kunt de bestandsgrootte van afbeeldingen verkleinen door ze in lagere kwaliteit op te slaan, ofwel “gecomprimeerd” of “geoptimaliseerd” op te slaan. PageSpeed Insights vergelijkt de grootte van jouw afbeelding met een gecomprimeerde versie. Als er meer dan 4KiB winst te behalen is, krijg je deze aanbeveling.
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 bovenstaande 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?
Afbeeldingen optimaliseren zonder Photoshop
Heb je geen duur programma zoals Photoshop? Je kunt ook de website Birme gebruiken. Daarmee kun je gratis afbeeldingen optimaliseren.
Je kunt een of meerdere afbeeldingen uploaden en verkleinen tot bijvoorbeeld 2500 pixels breedte (groter zal je praktisch nooit nodig hebben) met auto-height en opslaan als JPEG met 60% kwaliteit.
Website Gids: 29 tips voor een luxe & professionele website
- 29 tips rondom webdesign, fotografie en webteksten
- Praktische before/after voorbeelden
Na dit ebook snap je wat een website een luxe en professionele uitstraling geeft. Handig als je je prijzen wilt verhogen, bijvoorbeeld.
Toch niet tevreden? Binnen 14 dagen geldteruggarantie.
Aanbeveling: Lever afbeeldingen in moderne indelingen
Aanbeveling: “Afbeeldingsindelingen zoals JPEG 2000, JPEG XR en WebP bieden vaak betere compressie dan PNG of JPEG. Dit resulteert in snellere downloads en minder dataverbruik. Meer informatie“
Wat betekent het?
Misschien 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. WebP biedt een betere compressie dan JPEG en maakt bestandsgroottes daarom nog kleiner. Goed voor je laadsnelheid.
Hoe los je het op?
Wix maakt automatisch WebP versies van jouw afbeeldingen. En sinds versie 5.8 kun je in WordPress WebP afbeeldingen uploaden.
Ik gebruik zelf in WordPress de WP Optimize plugin; deze genereert automatisch webp versies van een foto wanneer je de foto uploadt.
Aanbeveling: Verwijder bronnen die de weergave blokkeren
Aanbeveling: “Bronnen blokkeren de eerste weergave (FP) voor je pagina. Overweeg kritieke JS/css inline te leveren en alle niet-kritieke JS/stijlen uit te stellen. Meer informatie“
Wat betekent het?
Elke webpagina is opgebouwd uit code. Css geeft styling aan een webpagina; zonder css staat alles in zwartwit onder elkaar. Met JS (voluit JavaScript) maak je een webpagina interactief, zoals een slideshow.
Al die code staat grotendeels in losse bestanden die geladen moeten zijn voordat de webpagina getoond kan worden. Dat bedoelt PageSpeed 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.
Hoe los je het op?
Simpel gezegd: Zorg ervoor dat er minder bestanden ingeladen worden.
Bij een WordPress website kan het thema en elke plugin css en JS inladen. Elk thema heeft minimaal 1 css bestand. En als je Google Fonts gebruikt laadt dat ook 1 css bestand. Dat is prima.
Maar sommige thema’s of plugins laden veel meer. Misschien heb je een plugin die 10 bestanden laadt terwijl je hem nauwelijks gebruikt. Die plugin kan dan beter weg!
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:
- Worden er nog steeds te veel bestanden ingeladen? Dan is jouw thema de boosdoener en kun je beter wisselen.
- 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 re-activatie. Maar als er toch iets misgaat, kun je de backup weer terugzetten.
Aanbeveling: Ongebruikte css en/of JavaScript verwijderen
Aanbeveling: “Verwijder ongebruikt JavaScript om het aantal bytes te verminderen dat wordt verbruikt door netwerkactiviteit. Meer informatie“
Wat betekent het?
Zoals uitgelegd in het vorige punt, geeft css styling aan een webpagina en maakt JavaScript 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 code hebt staan die niet gebruikt worden, verspilt de browser dus tijd aan die checks. Browsers zijn heel snel dus een paar ongebruikte regels is echt niet erg (en heel normaal), maar als je er heel veel hebt, is het zonde.
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? Vraag je jezelf dan af of het de moeite waard is.
Aanbeveling: Schakel tekstcompressie in
Aanbeveling: “Tekstgebaseerde bronnen moeten worden geleverd met compressie om het totale aantal netwerkbytes te minimaliseren. Meer informatie“
Wat betekent het?
Met compressie maak je bestanden op je webpagina kleiner waardoor de pagina sneller laadt. Voor de browser maakt het niet uit als alles opgepropt is — 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 jouw webhosting partij geen enkele vorm van tekstcompressie te ondersteunen? Dan zou ik verhuizen naar een betere partij.
Compressie via .htaccess
Je kunt extra compressie aanzetten via de .htaccess. Dat is een speciaal bestand op de server. Op een Apache server kun je 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. In WordPress kun je ook een plugin zoals WP Optimize gebruiken. Deze past het .htaccess bestand voor je aan.
Aanbeveling: Eerste reactietijd van server verkorten
Aanbeveling: “Houd de reactietijd van de server voor het hoofddocument kort, omdat alle andere verzoeken daarvan afhankelijk zijn. Meer informatie“
Wat betekent het?
Wanneer mensen (en jijzelf) jouw website proberen te bezoeken, “vraagt” hun browser aan jouw server om jouw website te tonen. Wanneer jouw server te traag is met “antwoorden” krijg je deze aanbeveling.
Een trage server kan iets tijdelijks zijn. Dus ik zou eerst PageSpeed een dag later nog een keer proberen als je deze aanbeveling krijgt. Blijf je de aanbeveling krijgen? Dan kun je dit punt serieuzer nemen.
Hoe los je het op?
Een trage reactietijd kan aan van alles liggen. Een slechte plugin kan bijvoorbeeld te veel van jouw database vragen en daar moet de server dan weer op wachten.
Dit punt is erg technisch en ik kan geen one-size-fits-all oplossing hiervoor geven. Het kan helpen om jouw WordPress, thema en/of plugins bij te werken als je nog op een oude versie zit.
Check ook of de PHP versie niet te laag is (minimaal 7.4, maar liever 8 en hoger).
Aanbeveling: Lever statische items met een efficiënt cachebeleid
Aanbeveling: “Een lange levensduur voor het cachegeheugen kan herhaalde bezoeken aan je pagina versnellen. Meer informatie“
Wat betekent het?
Wat is caching? Met caching zeg je eigenlijk tegen de browser: “Blijf dit bestand onthouden voor x aantal dagen”. Je kunt caching instellen voor statische elementen – elementen die niet snel veranderen – zoals een afbeelding of css bestand.
De browser moet bij iemands eerste bezoek alle bestanden op de webpagina laden. Maar als diegene de pagina een tweede keer bezoekt, kan de browser teruggrijpen op de cache waardoor de pagina sneller laadt.
En aangezien css en JavaScript bestanden vaak op de hele website worden hergebruikt, maakt het het eerste bezoek aan andere pagina’s ook sneller.
Hoe los je het op?
Je kunt een caching plugin installeren zoals WP Optimize of W3 Total Cache of direct jouw .htaccess aanpassen.
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.
Caching via .htaccess
Op een Apache server kun je caching aanzetten op .htaccess:
<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.
In WordPress kun je ook een plugin zoals WP Optimize gebruiken. Deze past het .htaccess bestand voor je aan.
Dit waren de belangrijkste aanbevelingen.
Waarom is mijn mobiele score lager dan desktop?
De mobiele score komt bijna altijd lager uit dan de desktop score, omdat PageSpeed Insights daarvoor een tragere verbinding, vergelijkbaar met snel 3G, simuleert. Dit wordt ook wel mobile network throttling genoemd.
Wat is een goede score?
Hou in gedachten dat PageSpeed Insights héél streng is, vooral op mobiel. Je hoeft echt niet per se een 100/100 score te halen.
Je hebt weinig aan een supersnelle website als het praktisch leeg geworden is om tot dat punt te komen. Dan haken bezoekers misschien niet meer af door een lange laadtijd, maar wel door gebrek aan content. Zoek een balans.
Ook heb je geen perfecte score nodig om hoger te ranken in Google.
“Als je in het middelste stuk zit, wil je naar het snelle gedeelte, maar het maakt niet uit of jouw score 90 of 95 is. Dat maakt niet echt een verschil.” (vertaald vanuit Engels, bekijk origineel)
Google medewerker Martin Splitt
Bij mijn eigen websites streef ik altijd om boven de 75/100 op mobiel en boven de 90/100 op desktop te komen.
Lees verder: Hoe belangrijk is snelheid voor ranken in Google?
Toch liever een professionele website laten maken?
Wij maken websites voor ondernemers. Je krijgt een website die bezoekers het vertrouwen geeft: ik zit hier goed. Verkoop jezelf (nog) makkelijker met je eigen professionele website.
- Mooi en overzichtelijk webdesign
- High-end fotografie die je divers kunt inzetten
- Volgens de laatste SEO/Google richtlijnen
- Een WordPress website die technisch klopt
Je werkt met Linsey en Mandy, twee zussen. De een webdeveloper & webdesigner, de ander fotograaf.
Ook pakkende webteksten nodig? We werken samen met twee leuke en ervaren copywriters.
