WP Rocket

Na veel gratis WordPress website snelheid plugins geprobeerd te hebben, ben ik over stag gegaan om een betaalde plugin aan te schaffen genaamd: WP Rocket. Met deze plugin, is het mij gelukt om te voldoen aan alle Core Web Vitals en een lighthouse score van 100 te halen.

In deze blogpost leg ik je uit: wat WP Rocket is, waar het een oplossing voor is en welke instellingen ik heb gebruikt om de optimale scoren te behalen. Nieuwsgierig geworden? Lees dan gauw verder.

Wat is WP Rocket?

WP Rocket is een betaalde caching plugin en bied daarnaast een aantal aanvullende geavanceerde features. Dat zorgt ervoor dat je een hoop aanvullinde plugins kan verwijderen. Ik hoor je al denken: “leuk, maar waarom gebruik je deze plugin?”. WordPress heeft een groot nadeel: er is vaak sprake van een hoop code wat niet optimaal wordt ingeladen en overbodig is. Het gevolg: een slechtere gebruikers ervaring, wat ook ten koste gaat van je SEO posities.

WP Rocket, is voor veel van deze problemen een oplossing. Althans, het lost een hoop problemen op. Een gedeelte van je WordPress SEO performance hangt ook af van: het aantal plugins dat je gedownload hebt, je thema, je hosting etc. Toch ben ik nog geen website tegen gekomen waarbij WP Rocket geen toegevoegde waarde had. Voor mijn blog is het gelukt (in combinatie met Imagify en Rocket-CDN) om in de snelheidstool van Google (Lighthouse) mijn performance score op desktop van 51 naar 100 te krijgen en op mobiel van 42 naar 97. Deze optimalisatie stappen, zorgde er meteen voor dat ik voldoe aan de richtlijnen van de Core Web Vitals. Dat zijn “key performance indicatoren” die direct impact hebben op je organische posities.

Wat lost WP rocket op?

Met WP Rocket, kan je de volgende optimalisatie stappen doorvoeren:

• Caching
• CSS bestanden verkleinen
• Ongebruikte CSS verwijderen
• Javascript bestanden verkleinen
• Javascript uitgesteld laden
• Lazy loading toepassen op: afbeeldingen, i-frames en video’s (incl. de mogelijkheid om je afbeeldingen “above the fold” uit te sluiten van lazy loading. Dit is van belang voor je LCP, een key metric voor je core webvitals)
• Toevoegen van missende afbeelding dimensies aan je afbeeldingen
• Cach preloaden
• Links preloaden
• DNS prefatching
• Fonts preloaden
• Database optimalisatie
• Integratie met populaire CDN’s (zoals Cloudflare)
• Heartbeat API beperken

Tip: WP rocket optimaal inzetten voor SEO? Ga aan de slag met mijn WordPress SEO cursus

WP Rocket aanschaffen

Voordat we aan de slag gaan met het instellen van WP Rocket, is het van belang dat je als eerst WP Rocket aanschaft. Je hebt hiervoor 3 keuzes:

1. Plugin voor 1 website – $49 dollar per jaar
2. Plugin voor 3 websites – $99 dollar per jaar
3. Plugin voor oneindig veel websites per jaar – $ 249 per jaar

WP Rocket aangeschaft? Download dan de WP Rocket plugin via je account en upload het .zip bestand in je WordPress omgeving.

WP Rocket instellen

Voordat we aan de slag gaan met het instellen van WP Rocket, een aantal adviezen vooraf:

1. Er zijn geen “optimale instellingen”. De optimale instellingen hangen namelijk heel erg af van jouw persoonlijke situatie zoals de plugins die je gebruikt.
2. Voordat je WP Rocket gaat instellen, maak een back-up van je website zodat je hem eenvoudig kan herstellen als het mis gaat.
3. Maak een bench mark van je website voor elke instelling die je toepast in WP Rocket, zo kan je direct zien of het een positief of negatief effect heeft. Zelf gebruik ik daarvoor de volgende tools: Lighthouse (via chrome dev tools), GTmetrix en webpagetest.org. Let op: Zorg ervoor dat je de cach van WP rocket verwijderd, zodra je een instelling hebt toegepast (daar later meer over).
4. Activeer niet alle opties in één keer. Als je tegen een probleem aanloopt, weet je niet waar het vandaan komt.
5. Test je aangepaste instelling in de incognito/prive modus van je webbrowser. Hier zie je direct de “cached version” van je website. In Jip en Janneke taal: je website versie waar de WP rocket instellingen direct zijn toegepast.
6. Wanneer je gaat testen of een instelling, een negatieve impact heeft? Kijk dan naar meerdere type pagina’s. Gaat het fout? Zet de instelling dan weer terug.

Dashboard WP Rocket

Via het dashboard van WP Rocket, kan je o.a. de cach van je website verwijderen. Dit is bijvoorbeeld handig als je een redesign van je website maakt, maar het nog niet verschijnt aan de voorkant.

Cache WP Rocket

Je kan caching instellen zolang je maar geen apparte plugin hiervoor hebt draaien of specifieke content hebt voor gebruikers die moeten inloggen. Indien je dat wel hebt, vink dan: caching voor ingelogde WordPress gebruikers aan. Bij de cach levensduur kan je voor 24 uur kiezen als je bijvoorbeeld maar 1 blogpost per week upload.

TIP: Heb je een website die veel van je database vraagt zoals Woocommerce? Kijk dan ook eens naar: Redis Object Caching als aanvulling op WP Rocket.

Let op: Zorg ervoor dat je je XML sitemap en robots.txt uitsluit van de caching. Dit kan voor problemen zorgen. Zelf gebruik ik de volgende regels onder geavanceerde regels.

/(.*)sitemap(.*).xml
/(.*)sitemap.xsl
robots.txt

CSS optimaliseren WP Rocket

Onder bestandsoptimalisatie in WP Rocket, kan je je .css files optimaliseren.

.css bestanden verkleinen

Deze optie zorgt ervoor dat o.a. witregels en aantekeningen in je .css file verwijderd worden. Je kan deze optie vaak aanzetten zonder enig risico.

.css bestanden combineren

WP rocket bied de mogelijkheid aan om .css bestanden te combineren. Zelf heb ik dit niet aanstaan omdat ik gebruik maak van het HTTP2 protecol. Of jij dit ook gebruikt, kan je in dit tooltje testen. Als jij dit ook hebt, vink dit dan niet aan.

Ongebruikte .css verwijderen

Het kan zo zijn dat op sommige type pagina’s, .css wordt ingeladen wat niet percee nodig is. Deze toepassing zorgt ervoor dat het overtollige .css verwijderd wordt. Zie je iets fout gaat zodra je dit toepast? Sluit het desbetreffende .css bestand dan uit van optimalisatie in WP rocket.

Tip: De beste optie is om dit altijd vanuit de bron aan te passen. Indien je dat doet, zou je ook de plugin: Asset cleanup kunnen toevoegen. Hierin bepaal je dan welke .css file je op welke locatie inlaad. Als je dit gaat gebruiken in combinatie met WP rocket, gebruik dan alleen de functies die WP rocket niet heeft.

javascript optimaliseren

In het zelfde tabje, als waar je je .css kan optimaliseren, is het ook mogelijk om je javascript bestanden te optimaliseren.

Javascript bestanden verkleinen

Deze optie zorgt ervoor dat o.a. witregels en aantekeningen in je .js file verwijderd worden. Je kan deze optie vaak aanzetten zonder enig risico.

Javascript uitgesteld laden (deffered)

Dit zorgt ervoor dat je webpagina getoond wordt voordat je javascript is uitgelezen. Een erg handige functie om “render blocking recources” op te lossen.

Javascript vertraagd laden (delayed)

Zorgt ervoor dat javascript pas ingeladen wordt zodra de browser het bestand raadpleegd.

Remove unused javascript in WordPress

Veel WordPress websites blijven de melding: remove unused javascript tegen komen. Dat komt omdat Ligthouse elk bestand markeert dat meer dan 20kb aan Javascript niet gebruikt. Aangezien bijna elk WordPress thema met gebundelde javascript bestanden komt, zal deze melding vaak blijven staan.

Zoals je in de afbeelding hierboven ziet, loop ik vaak tegen een jQuery bestand aan. jQuery is een library die heel veel taken moet kunnen uitvoeren. Een soort van basis functionaliteiten voor andere scripts. Echter worden niet alle functionaliteiten op elka pagina gebruikt (bij mij vaak maar 30%).

Mogelijke oplossingen zijn:

• Kijken of plugins vervangen kunnen worden
• Het plugin script unregisteren en je eigen versie ervan inladen (voorkeur: met vanilla Javascript)

Zoals je hierboven al merkt, loop je tegen de beperkingen aan van “plugin en play” met WProcket. Wat je evt. nog kan doen is kijken of de plugins: FLying scripts of WP meteor iets kunnen betekenen. Een alternatief is: Asset Cleanup. Hiermee kan je bepalen welke javascript bestanden op welke pagina’s geladen kunnen worden.

Media bestanden optimaliseren

In WP Rocket, kan je er voor zorgen dat je bestanden slimmer en beter ingeladen worden door o.a. lazy loading en het instellen van je afbeelding dimensies (width and height).

Lazy loading

Lazy loading is een techniek wat er voor zorgt dat een afbeelding pas ingeladen wordt zodra de gebruiker dit raadpleegd. Via WP Rocket gebeurt dit a.h.v. een stukje javascript. Verwacht wordt dat in de toekomst dit automatisch via de webbrowser gebeurd (Chrome en Firefox ondersteunen dit al).

Bij het instellen van lazy loading, is het van belang dat als je afbeelding je LCP is, je deze uitsluit van lazy loading in WP rocket. Anders vertraagd dit je laadsnelheid. Je komt hier achter door je pagina URL in te vullen bij: webpagetest.org onder het kopje: web vitals. Je kan in wp rocket je afbeelding uitsluiten o.b.v. de url waar de afbeelding is geplaatst of de CSS class (handig als je LCP continu op dezelfde locatie staat. Bij mijn blogpost is dat het geval, vandaar dat ik deze een unieke css class heb gegeven).

Tip: Voeg je lazy loading toe, zorg er dan voor dat je afbeeldingen verreikt worden met structured data of een <noscript> tag. Op die manier, kan je Google je afbeelding uitlezen.

Ontbrekende afbeelding dimensies instellen

Soms kan het zo zijn dat de widht en height, ook wel je afbeelding dimensies, niet meegegeven zijn. Via deze functie kan je die aan je afbeeldingen de juiste widht en height meegeven. Doe je dit, dan zal je CLS een stukje verbeteren.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Preloaden

In deze tab kan je er voor zorgen dat pagina ingeladen wordt zodra een gebruiker over een link heen gaat. Verder kan je in deze tab je: DNS request “prefetchen” en fonts preloaden.

Prefetch DNS requests

Je kan al je DNS requests prefetchen. Er achter komen welke DNS requests er voor jouw WordPress website worden uitgevoerd? Open dan je developer tools in Chrome en ga naar: Tools > Source > Coverage. Dit zijn vaak zaken zoals: Google Fonts, Google Tag Manager, AdSense, Analytics, YouTube etc.

Zie hieronder een overzicht van DNS requests die je (zeer waarschijnlijk) zo kan overnemen.

//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//use.fontawesome.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//www.googletagmanager.com
//www.googletagservices.com
//googleads.g.doubleclick.net
//adservice.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//youtube.com
//i.ytimg.com
//player.vimeo.com
//api.pinterest.com
//assets.pinterest.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com

Pre load fonts

Fonts (ook wel lettertype genoemd), kan je van te voren inladen. Er achter komen welke fonts je gebruikt? Open dan: GTmetrix, Klik op: waterfall en daarna op het tabje fonts. Plak je fonts in het juiste veld en verwijder vervolgens je cach in het dashboard. Als het goed is, worden je lettertype nu sneller ingeladen.

WordPress database optimalisatie

Om je database snelheid op pijl te houden, kan je via WP Rocket een aantal optimalisatie stappen doorvoeren. Van belang is dat je weet wat je verwijderd.

• Revisions – Oudere versies van je blogpost. Dit wordt aangemaakt zodra je op: Publiceren drukt.
• Auto Drafts – Automatisch opgeslagen versies van je blogpost of pagina.
• Trashed Posts – Posts die je verwijderd hebt.
• Spam Comments – Comments die gemarkeerd zijn als spam.
• Trashed Comments – Comments die gemarkeerd zijn als afval.
• All transients – Alle tijdelijke bestanden die opgeslagen zijn in je database (deze heb ik niet aangevinkt staan, dit zorgde voor problemen met mijn plugins).
• Tabellen optimaliseren – Optimaliseert database tabellen.

Tip: Stel een periodieke clean-up in. Zelf heb ik hem op 1 keer per week staan.

CDN configureren

Een CDN, zorgt ervoor dat statische bestanden op een lokale server worden opgeslagen. Via WP Rocket, kan je verschillende CDN’s configureren. Dit zorgt ervoor dat de instellingen van WP Rocket goed worden afgesteld met je CDN. CDN ingesteld? Kijk dan via Up-trends naar het effect er van.

Zelf heb ik gekozen voor Rocket CDN, omdat dit door de makers van WP Rocket is gemaakt en de configuratie vanzelf gaat. Heb je een wat grotere website, Kijk dan ook eens naar de mogelijkheden bij Cloudflare. Via de tab: configuratie kan je die eenvoudig instellen met WP Rocket.

Heartbeat API WordPress controleren

De wordpress heart beat API, verteld je bijvoorbeeld: wanneer een pagina bewerkt wordt, slaat tijdelijke bestanden op en stuurt je real time nonficaties. Je kan dit volledig blokkeren of op zijn minst beperken.

Imagify

Imagify is een plugin van dezelfde makers als WP Rocket en zorgt voor 2 belangrijke onderdelen:

1. Het comprimeerd je afbeeldingen
2. Het zet het bestandstype van je afbeelding om naar .webP. Dat is de snelste versie voor afbeeldingen op websites die op dit moment door alle webbrowsers ondersteund wordt.

Op die manier worden je afbeeldingen een stuk sneller ingeladen. Voor mij had dit een enorme impact op mijn laadsnelheid. Er zijn meerdere verglijkbare plugins op de markt. De reden dat ik heb gekozen voor Imagify is:

1. Er wordt een automatische backup van je orginailie afbeeldingen gemaakt
2. Je bestandstype worden omgezet naar .webP (Veel alternatieve plugins doen dat niet)
3. Je kan kiezen tussen verschillende standen op het gebied van comprimeren (zoek hierbij naar de balans tussen kwaliteit en laadsnelheid die bij jou past)
4. De webP afbeeldingen worden gekoppeld aan je CDN
5. Je kan tot 20mb per maand gratis comprimeren. Daarna stap je pas over op een betaald plan (pay as you go of een vast tarief).

FAQ