Page speed met een budget: de optimalisaties die er echt toe doen

De optimalisaties die er echt toe doen

Als Core Web Vitals consultant krijg ik veel verschillende verzoeken voor pagespeed ondersteuning. En ja, soms is er geen groot budget. Als dat het geval is, moet ik nog efficiënter met mijn tijd omgaan en alleen optimalisaties uitvoeren die veel opleveren, weinig moeite kosten en de Core Web Vitals echt verbeteren.

Laatst beoordeeld door Arjen Karel in maart 2026

De cijfers spreken voor zich. Volgens de 2025 Web Almanac slaagt slechts 48% van de mobiele origins voor alle drie de Core Web Vitals. De mediane mobiele pagina weegt 2,6 MB, met 632 KB aan JavaScript (waarvan 251 KB ongebruikt is). Dit zijn problemen die je zonder een groot budget kunt oplossen.

Core Web Vitals TIP: Mijn On-Call Consultancy is de meest budgetvriendelijke manier om deskundige hulp te krijgen. Boek een sessie van 2 uur (€300) en ik zal je Core Web Vitals problemen diagnosticeren, de meest urgente problemen oplossen en je een duidelijke strategie geven voor de rest. Ik bereid me voor voordat we praten, dus er wordt geen tijd verspild.

Boek een sessie!

1. Zoek eerst uit wat de problemen zijn

Bij het optimaliseren van Web Performance met een budget moeten we er absoluut zeker van zijn dat we zo effectief mogelijk optimaliseren. Dat betekent dat we eerst moeten weten wat het echte probleem is.

We kunnen de uitstekende gratis PageSpeed Insights gebruiken om de CrUX-data op te vragen. De CrUX-data is de enige gegevensbron die ertoe doet, aangezien dat de gegevensbron is die Google gebruikt.

Onder de CrUX-score zie je een Lighthouse audit.

Laat ik duidelijk zijn over de Lighthouse audit! Op dit moment geven we niet om Lighthouse. Waarom? Omdat het de Core Web Vitals niet meet. Zeker, Lighthouse is een geweldige testtool en voel je vrij om al zijn suggesties te onderzoeken, maar omdat we een budget hebben, geven we erom dat we slagen voor de Core Web Vitals. We geven nu niet om het slagen voor synthetische tests!

Terug naar de CrUX-data. Hier zijn enkele richtlijnen om te volgen als je een budget hebt. Begin met het onderzoeken van de Core Web Vitals in precies deze volgorde en focus je eerst op deze problemen!

• Als je faalt voor de Time to First Byte, los dat dan eerst op!
• Als je faalt voor de First Contentful Paint, los dan render blocking resources op (stel scripts uit en optimaliseer stijlen)
• Als je faalt voor de Largest Contentful Paint, geef dan prioriteit aan resources die je nodig hebt voor die LCP (zoals lettertypen of afbeeldingen)
• Als je faalt voor de CLS, voeg dan width en height toe aan alle afbeeldingen, zoek en verwijder CSS-transities en reserveer ruimte voor laat renderende elementen (zoals advertenties, productfilters etc.)
• Als je faalt voor de Interaction to Next Paint, gebruik je waarschijnlijk te veel JavaScript op het verkeerde moment. Verwijder onnodige scripts en plug-ins, gebruik een RUM tool zoals CoreDash om de traagste scripts te vinden

2. Optimaliseer je afbeeldingen

Afbeeldingen zijn goed voor 911 KB van de mediane mobiele pagina volgens de 2025 Web Almanac. Dat is meer dan een derde van het totale paginagewicht. En 57% van de LCP afbeeldingen wordt nog steeds geserveerd als JPG terwijl WebP kleiner zou zijn bij dezelfde kwaliteit. Met een budget geeft afbeeldingsoptimalisatie je de meeste impact voor de minste moeite.

Converteer afbeeldingen gratis naar WebP

Er zijn veel gratis tools, oplossingen en plug-ins beschikbaar waarmee je afbeeldingen kunt converteren naar nieuwere, snellere en modernere formaten zoals WebP. Voor WordPress zou ik bijvoorbeeld de uitstekende en gratis WebP Express aanraden.

Implementeer lazy loading

Lazy loading geeft aan de browser door dat een afbeelding pas geladen hoeft te worden als deze bijna in de zichtbare viewport is. Als je 15 afbeeldingen op een pagina hebt en slechts 3 in het zichtbare deel van de pagina staan, kun je veilig loading="lazy" toevoegen aan de afbeeldingen die niet in de zichtbare viewport staan.

Er zijn 2 manieren om dit aan te pakken. De eerste is om lazy loading in je CMS in te schakelen. Dit voegt lazy loading toe aan alle afbeeldingen. Raadpleeg vervolgens de documentatie over hoe je lazy loading kunt verwijderen voor de afbeeldingen die zichtbaar en belangrijk zijn. De andere manier is om handmatig loading="lazy" toe te voegen aan below-the-fold afbeeldingen. Voor een complete gids, zie hoe je offscreen afbeeldingen uitstelt.

<img loading="lazy" src="image.jpg" width="800" height="600">

Stel de image fetchpriority in

Door fetchpriority="high" toe te voegen aan een image tag geven we aan de browser door dat deze afbeelding belangrijker is dan andere afbeeldingen en als eerste gedownload moet worden. En hoewel er betere manieren zijn, waaronder image preloading en 103 Early Hints, is het instellen van de fetchpriority simpel, snel en effectief! Identificeer gewoon de belangrijkste afbeelding op je pagina, bewerk de template en voeg fetchpriority="high" toe aan de afbeelding:

<img fetchpriority="high" src="image.jpg" width="800" height="600">

3. Fix je browser caching

Als je budgetvriendelijke hosting gebruikt, is de kans groot dat de webserver niet optimaal is geconfigureerd. Een van de fouten die ik regelmatig tegenkom, is verkeerd geconfigureerde browser caching. Zonder de juiste caching headers downloaden terugkerende bezoekers dezelfde afbeeldingen, scripts en stylesheets helemaal opnieuw. Dat is verspilde bandbreedte en verspilde tijd.

Als je Apache als webserver gebruikt, maak dan simpelweg een bestand genaamd .htaccess aan in de root directory van je website en voeg deze regels toe:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|js|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Terwijl je het .htaccess-bestand bewerkt, kun je ook GZIP-compressie inschakelen. Dit comprimeert op tekst gebaseerde resources (HTML, CSS, JavaScript) voordat ze naar de browser worden gestuurd. Op de meeste sites vermindert dit de overdrachtsgrootte met 60 tot 80%.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

Als je een andere webserver zoals NGINX gebruikt, neem dan contact op met je hostingprovider en verwijs ze naar dit artikel!

4. Overweeg Cloudflare (zelfs het gratis plan helpt)

Zelfs met het gratis plan biedt Cloudflare je veel van de belangrijke performance features. Als je op budgethosting zit, is het overzetten van je DNS naar Cloudflare een van de veranderingen met de hoogste impact en minste moeite die je kunt doorvoeren. Voor een gedetailleerde walkthrough, zie de complete Cloudflare configuratiegids.

Op het gratis plan

1. Snelle DNS. De DNS-servers van Cloudflare zijn gratis en zullen waarschijnlijk beter presteren dan de DNS-servers van je budget hostingprovider. CrUX-data uit de 2025 Web Almanac toont aan dat slechts 44% van de mobiele origins een goede TTFB heeft. Trage DNS is een veelvoorkomende oorzaak en de overstap naar Cloudflare lost dat direct op.
2. HTTP/3 en Brotli. Cloudflare gebruikt de nieuwste protocollen en de snelste compressiemethoden. Zonder te veel in detail te treden, wees gerust dat dit je netwerk met minstens 10% zal versnellen.
3. Consistente browser caching. Cloudflare heeft een sterke reputatie als het gaat om het cachen van statische resources. De out-of-the-box configuratie is waarschijnlijk beter dan wat je nu hebt.
4. Edge caching voor statische resources. Cloudflare zal versies van je statische resources zoals afbeeldingen, scripts en CSS bestanden cachen en ze direct vanuit hun edge-netwerk aan de eindgebruiker serveren. Dit elimineert de noodzaak voor retourtripjes naar je origin server.
5. Rocket Loader. Rocket Loader zal het laden van scripts uitstellen en omgaan met de complicaties die daaruit voortvloeien. Het is een ruwe methode, maar als je niet in staat bent om scripts handmatig uit te stellen, zal dit waarschijnlijk de paint metrics zoals de Largest Contentful Paint verbeteren. Let op: Rocket Loader gebruikt verouderde browser-API's en PageSpeed Insights kan dit markeren. Als je die waarschuwingen ziet, overweeg dan om je scripts in plaats daarvan handmatig uit te stellen.

Op het Pro plan

Een van de eerste dingen die ik altijd zeg als ik een gratis Cloudflare plan zie, is "go pro!". Als de $25 iets is dat je je kunt veroorloven en bereid bent uit te geven aan een snellere site, zou je het waarschijnlijk moeten overwegen.

1. Alle gratis features. Het pro plan komt natuurlijk met alle gratis features.
2. Cloudflare APO voor WordPress. APO voor WordPress is een complete oplossing die je pagina's op het edge-netwerk zal cachen als bezoekers niet zijn ingelogd. Dit kan de Time to First Byte enorm versnellen.
3. Lossless en lossy afbeeldingsoptimalisatie. Een van de belangrijkste voordelen van het gebruik van de pro versie van Cloudflare is hun afbeeldingsoptimalisatie. Cloudflare converteert en cachet afbeeldingen in WebP formaat en serveert ze alleen aan bezoekers die deze formaten accepteren.

5. Self-host zo veel mogelijk

Een andere simpele en effectieve optimalisatie is het self-hosten van statische resources. Op veel sites worden statische resources gehost op externe CDN's. jQuery wordt bijvoorbeeld gehost op https://code.jquery.com/, Bootstrap wordt gehost op https://cdn.jsdelivr.net en je lettertypen worden gehost op https://fonts.googleapis.com. Ik begrijp de aantrekkingskracht. Deze CDN's presenteren zich als makkelijk en snel, maar het gebruik ervan is eigenlijk een slecht idee en zal je site vertragen.

Het idee om een gedeeld CDN te gebruiken voor dit soort bestanden was logisch in de tijd dat browsers deze bestanden nog over websites heen konden delen. Die dagen zijn voorbij. Het resultaat is dat een nieuwe bezoeker altijd het statische bestand moet downloaden en dat vereist een nieuwe connectie naar een nieuwe server voor elk bestand. En deze nieuwe connecties naar deze nieuwe servers kunnen veel extra tijd kosten.

De oplossing is om die third party bestanden te self-hosten. Dit is makkelijk: download gewoon het bestand, plaats het op je server en verander de verwijzing naar dit bestand. Specifiek voor lettertypen, zie hoe je Google Fonts kunt self-hosten.

6. Stel je scripts uit

Een enorme bottleneck kan het blokkeren van scripts in de head van de pagina zijn. Deze scripts kunnen het laden van de pagina soms tot wel 20 seconden vertragen! De 2025 Web Almanac ontdekte dat slechts 15% van de mobiele pagina's slaagt voor de render-blocking resources audit. Dat vertelt je hoe wijdverbreid dit probleem is.

Het uitstellen van deze scripts is helemaal niet moeilijk. Voeg gewoon defer toe aan de script tag en je bent klaar. Als je kunt, doe dit! Bewerk de template en verander je script als volgt:

<!-- oude blokkerende script tag -->
<script src="script.js"></script>

<!-- nieuwe uitgestelde script tag -->
<script defer src="script.js"></script>

Maar er zitten addertjes onder het gras! Het toevoegen van defer aan script tags kan allerlei problemen en dependency errors veroorzaken. En aangezien je een budget hebt, moet ik aannemen dat je niet de middelen hebt om een JavaScript-expert in te huren om alle problemen die kunnen optreden op te lossen. Probeer dus je scripts uit te stellen en controleer op fouten (druk op Ctrl+Shift+I in Chrome en controleer de console-tab). Als er na het testen geen problemen zijn, behoor je tot de weinige gelukkigen! Als er wel problemen zijn, moet je je toevlucht nemen tot een van de volgende oplossingen. Voor het volledige beeld, zie 16 methoden om JavaScript uit te stellen.

Gebruik Rocket Loader

Zoals besproken, geeft de gratis versie van Cloudflare je toegang tot Rocket Loader. Dit zal alle scripts op een pagina uitstellen. Het is geenszins perfect, maar meestal doet het het behoorlijk goed.

Gebruik een plug-in

De meeste op een CMS gebaseerde sites hebben een enorme plug-in repository. Er zijn veel plug-ins beschikbaar waarmee je JavaScript kunt uitstellen en om kunt gaan met alle complicaties die kunnen ontstaan bij het uitstellen van scripts.

7. Optimaliseer je lettertypen

Webfonts zijn een verborgen performance kostenpost op budget sites. De mediane pagina laadt 122 KB aan font-bestanden volgens de 2025 Web Almanac. Als je lettertypen worden geladen via Google Fonts, maak je bij elk eerste bezoek extra DNS-lookups en TCP-connecties.

Twee gratis oplossingen:

1. Self-host je lettertypen. Download de font-bestanden, plaats ze op je eigen server en laad ze vanaf daar. Dit elimineert de connectie-overhead naar fonts.googleapis.com en fonts.gstatic.com.
2. Voeg font-display: swap toe. Dit vertelt de browser om direct tekst te tonen in een fallback lettertype terwijl het webfont wordt gedownload. Je bezoekers zien de content sneller en je voorkomt het probleem van onzichtbare tekst. Voor de volledige strategie, zie hoe je onzichtbare tekst tijdens het laden van webfonts oplost.

8. Caching, caching, caching

Als je een budget hebt en niet veel wilt uitgeven aan hosting, is caching een van de meest effectieve manieren om een website te versnellen. Caching is vooral effectief tegen een hoge Time to First Byte. Caching kan op verschillende niveaus worden gedaan.

Client side cache: Configureer je webserver om browsers te instrueren zoveel mogelijk statische resources te cachen. Dit verlaagt de belasting op je server. (Zie het .htaccess-voorbeeld in sectie 3.)

Object cache: Object cache kan worden gebruikt om gegevens op te slaan die rekenintensief kunnen zijn om opnieuw te genereren, zoals het resultaat van complexe databasequery's. Vraag je hoster om Redis of Memcached te installeren.

Full page cache: Als je een CMS gebruikt, wil je waarschijnlijk een full page cache toevoegen aan je site. Voor WordPress zijn goede opties WP Fastest Cache of WP Core Web Vitals.

9. Maak strategische hostingkeuzes

Als het op hosting aankomt, loont het om rond te kijken en de duurste host is niet altijd de snelste. Over het algemeen ben je op zoek naar een hostingplan dat is geoptimaliseerd voor jouw CMS, want een manusje-van-alles is een meester in niets. Zoek naar hosting die minimaal PHP 8+, HTTP/2 en SSD-opslag bevat. Een goede WordPress host met die basis zal elke keer weer beter presteren dan een generieke shared host.

10. Monitor je performance

Al deze optimalisaties zijn niets waard als je niet weet of ze daadwerkelijk hebben gewerkt. Stel Real User Monitoring in, zodat je kunt zien hoe echte bezoekers je site ervaren, en niet alleen hoe Lighthouse deze in een lab scoort. Lab scores zijn handig voor debugging, maar field data van echte bezoekers is wat Google gebruikt voor de ranking. CoreDash volgt de Core Web Vitals van echte gebruikers en vertelt je precies waar je staat.