Alles is klaar. De nieuwe website doet het goed. Het mega-menu werkt, de sliders werken fijn. De page builder heeft ervoor gezorgd dat het gehele proces vrij spoedig verliep. Helaas is de laadsnelheid door alle toeters en bellen zeer slecht. Op desktop is het eigenlijk prima, maar op mobiel zijn de resultaten vanuit PageSpeed Insights nogal teleurstellend.

Waarom is dit zo nadelig?

Het is natuurlijk zo dat we in Nederland een 5G netwerk hebben en dat ook pagina’s op mobiel relatief snel laden. Dit is helaas niet de graadmeter voor Google die zijn metingen baseert op antieke 3G en 4G netwerken. Dat is de reden dat een website het zoveel slechter kan doen op mobiel.

Het wordt pas echt vervelend als je veel geld steekt in Google Ads waar de laadsnelheid meegenomen wordt als indicator voor de kwaliteit voor je advertentie. Een lagere score betekent dan dat je meer betaald voor de clicks.

De oplossing: Caching

Er zijn natuurlijk verschillende oplossingen om de laadsnelheid van je website te verbeteren. Denk aan:

1. snelle hosting bij een moderne hoster met nginx of litespeed server
2. goede server cache (bijv. varnish)
3. plugins verwijderen of vervangen door betere
4. werken zonder page builder, maar content maken in de Gutenberg editor

Maar we kunnen natuurlijk ook een caching plugin als WP Rocket installeren of een oplossing als 10web booster in werking stellen. Dit zijn beide caching- of optimalisatie opties.

Wat doen ze precies?

Met caching kun je pagina’s opslaan en leveren zonder dat ze iedere keer opnieuw gegenereerd hoeven te worden. Caching vindt ook plaats in je browser door Chrome of Safari of een andere browser die je gebuikt. Zijn pagina’s gecached dan worden ze sneller geladen voor de gebruiker.

Elke geïnstalleerde plugin levert een hoeveelheid javascript en css code die op de pagina geladen wordt. Somme plugins laden deze code altijd en op elke pagina. Een goede caching plugin heeft dan ook vaak meerdere opties waarmee je het wel of niet en wanneer laden van scripts kunt inregelen.

WP Rocket

WP Rocket is een zeer veelzijdig caching plugin met erg veel goede optimalisatie opties. WP Rocket heeft veel verschillende instellingen. Hier de belangrijkste op een rij.

1. Basis cache na installatie
2. Caching aan of uit te zetten voor ingelogde gebruikers
3. Aparte cache laag voor mobiele weergave
4. CSS bestanden verkleinen (door verwijderen whitespace)
5. CSS levering optimaliseren met optie “Remove Unused CSS”, is in Beta, maar werkt erg goed. Je kunt een safelist aanleggen om elementen uit te zonderen van de ‘Remove Unused CSS”.
6. Minify javascript, iets wat ik zelf nooit doe ter voorkoming van problemen
7. Javascript aan onderzijde pagina laden (Defer) met de mogelijkheid om uitzonderingen hierop te maken via een lijst
8. Javascript uitgesteld laden (delay) met de mogelijkheid om uitzonderingen hierop te maken via een lijst.
9. Lazyload afbeeldingen, video’s en toevoegen ontbrekende dimensies aan afbeeldingen.
10. Preloaden van links en de sitemap
11. Prefetch van bijvoorbeeld Google fonts
12. Preload custom fonts die je op je eigen domein host

Het voordeel van WP Rocket is tevens het nadeel (Wat zei Cruijff ook alweer…?). Het is geen plug-and-play. Je hebt veel verschillende instellingen waardoor je enerzijds maatwerk kan toepassen, maar voordat je alles goed goed ingeregeld hebt ben je wel even bezig.

Met name het samenstellen van de uitzonderingslijsten (voor JS defer en delay, en de remove-unused css safelist) verreist een lange adem en een goede communicatie met de support van WP Rocket. Deze support is erg goed en de meeste issues die ik tegen kwam werken binnen 1 dag opgelost.

10web booster

10web booster is een caching oplossing waarbij je je website connect met hun platform d.m.v. een plugin. Behalve frontend en backend optimalisatie beloven ze uitgebreide meet gegevens. Ze geven aan wat het verschil in PSI (PageSpeed Insights) tussen de situatie voor- en na hun optimalisatie. Je kunt bij de optimalisatie kiezen voor 4 ‘optimization modes’. Zie afbeelding.

Als je voor de Extreme mode kiest zal de laadsnelheid inderdaad gigantisch verbeteren. Je zult een hele hoge score hebben in PSI. Echter dit betekent in de praktijk dat er mogelijk elementen op je website niet meer kunnen werken of er anders uit zien. Check dus alle pagina’s en kijk waar het mis gaat.

Web10 booster heeft een support die je kan helpen met de issues die ontstaan na activatie. Mijn ervaring is dat deze support lang niet zo goed en snel is als bij WP Rocket. Het bedrijf achter 10web booster biedt ook een oplossing om met AI een website te bouwen. Zie de blog Bouw je website met AI.

De conclusie

Je kunt met beide oplossingen de laadsnelheid verbeteren. 10web booster zal een groter effect hebben op je PSI scores, met het nadeel dat je website waarschijnlijk niet meer 100% functioneert en dat support niet zo’n hoog niveau heeft. 10web booster is geschikt voor kleinere websites waarop kleine issues ontstaan die te verhelpen zijn.

Je kunt bij 10web booster een gratis account maken zodat je 5 urls kunt optimaliseren. Dus 5 pagina’s op 1 website. Wil je meer dan kun je een abonnement aangaan. 10web booster is een duurdere oplossing dan WP Rocket.

WP Rocket is dus goedkoper en heeft een betere support. Door het optimaliseren van je scripts (javascript en css) kun je met WP Rocket je website zeer snel maken. Je kunt zelf aan de knoppen draaien om issues op te lossen (door de al eerder genoemde uitzonderingslijsten samen te stellen). WP Rocket is dan ook een betere keuze als je beheerder bent van een professionele website.