Bij Kinsta zijn we altijd op zoek naar nieuwe en innovatieve manieren om jouw sites sneller te maken en te optimaliseren. In de afgelopen maanden heeft ons team achter de schermen intensief samengewerkt met de developers van WP Rocket om enkele veranderingen te coördineren met de nieuwe versie 3.0 van hun plugin (uitgebracht op 3 april 2019). We zijn daarom bijzonder verheugd om aan te kondigen dat WP Rocket 3.0 en Kinsta nu volledige compatibel zijn en dit ook altijd zullen blijven.
Lees hieronder alles wat je moet weten over hoe je WP Rocket binnen Kinsta kan gebruiken en hoe je deze plugin in kan zetten voor jou en je klanten.
WP Rocket gebruiken binnen Kinsta
Mocht je nog niet bekend zijn met WP Rocket: dit is een populaire alles-in-één premium caching- en optimalisatieplugin voor WordPress. Normaal gesproken staan we geen caching-plugins toe, omdat deze conflicten opleveren met onze ingebouwde caching-oplossing. Met ingang van WP Rocket versie 3.0, wordt hun pagina-caching-functionaliteit echter automatisch uitgeschakeld wanneer ze op Kinsta-servers worden uitgevoerd. Eerder moest dit handmatig worden gedaan met hun pagina-cachingmodule.
Dit stelt je in staat om Kinsta’s cachingoplossing te gebruiken, maar tegelijkertijd ook te profiteren van de optimalisatiefeatures van WP Rocket (we behandelen deze hieronder).
Waarom is caching belangrijk? Caching is het proces waarbij bronnen van een aanvraag worden opgeslagen, zodat deze later opnieuw gebruikt kunnen worden voor volgende aanvragen. Simpel gezegd vermindert caching de hoeveelheid werk die nodig is om een pagina weer te geven, wat dus de belasting op je server verlaagt. WordPress staat erom bekend dat ze een redelijke aanslag doen op PHP en databases en het instellen van caching is de #1-methode om dit te verminderen (lees meer over WordPress vs statische HTML).
Features van WP Rocket 3.0
Als je de nieuwe 3.0-versie van WP Rocket nog niet hebt gezien: de gebruikersinterface is prachtig, terwijl de plugin nog steeds gemakkelijk te gebruiken en te navigeren is! Hieronder behandelen we een aantal features van WP Rocket die we in het bijzonder aanraden om je WordPress-site te versnellen en leggen we uit hoe deze zijn gesynchroniseerd met de Kinsta-omgeving.
We voeren ook een aantal snelheidstests uit om te zien welke opties de meeste impact hebben op een live site. Vergeet echter niet dat de resultaten kunnen variëren van site tot site, dus zorg er ook zeker voor dat je op je eigen site tests uitvoert (live of in de testomgeving).
Als je gebruik maakt van een testomgeving binnen Kinsta, dan zet WP Rocket deze automatisch op de witte lijst (staging-sitename.kinsta.cloud), wat betekent dat deze niet meetelt voor het aantal licenties. Hetzelfde geldt als je werkt op localhost.
Cache wissen
Hoewel caching automatisch wordt uitgeschakeld als WP Rocket zich binnen een Kinsta-omgeving bevindt, is de optie “Cache wissen” in het WP Rocket-menu gesynchroniseerd met de Kinsta-omgeving. Als je de cache van WP Rocket wist, dan leeg je in plaats daarvan de Kinsta-cache van je hele site. Hoe cool is dat? En natuurlijk kan je zoals altijd in de rechterbovenhoek van de adminbalk de Kinsta-cache legen.
De ‘Purge deze URL’ werkt ongeveer hetzelfde, maar in plaats van het wissen van de cache van de hele site, leegt de plugin nu alleen de cache van de URL waar je je bevindt. Dit is vooral handig als je net handmatig een artikel of pagina hebt bijgewerkt.
Om prestatieredenen raden we af om voortdurend de hele cache van je site te legen, omdat deze dan opnieuw moet worden opgebouwd. Het wissen van afzonderlijke URL’s is een veel betere methode.
Als je een wijziging aanbrengt aan je WordPress-site, zoals een plugin of thema, dan zie waarschijnlijk een waarschuwing van WP Rocket. Ook hier houdt het legen van de cache in dat je de Kinsta-cache leegt.
Als laatste, wanneer je op de ‘Clear Cache’-knop drukt in het WP Rocket dashboard, leegt dit ook de Kinsta-cache.
Cache
Zoals we eerder al aangaven, wordt de paginacaching van WP Rocket automatisch uitgeschakeld voor alle sites die op Kinsta worden gehost. Daarom raden we aan om de cache-instellingen van WP Rocket te laten zoals ze zijn met “Enable Caching for Mobile Devices” aangevinkt.
Bestandsoptimalisatie
In het Bestandsoptimalisatie-menu geven ze je de mogelijkheid om je CSS en JavaScript-bestanden te optimaliseren. Laten we hier eens in duiken.
Basisinstellingen
- Minificeren HTML: ‘Minify HTML’ verwijdert witruimte en comments om de grootte te reduceren. We hebben speedstests uitgevoerd en zagen een vermindering van 0,84% in laadtijd wanneer deze optie ingeschakeld was. ⏱ Je ziet misschien geen overdreven verbeteringen met deze feature, maar doorgaans is minder witruimte en code iets goeds.
- Combineer Google Fonts-bestanden: Het combineren van Google Fonts zal het aantal HTPP-verzoeken reduceren. Indien je een host gebruikt met HTTP/2 ingeschakeld, is het niet langer aangeraden om de bestanden te combineren als gevolg van verbeteringen met parallellisatie. HTTP/2 wordt volledig ondersteund door Kinsta. Het laden van fonts vanaf je eigen CDN kan soms ook de prestaties verbeteren. Check hiervoor onze gids: hoe host je fonts lokaal.
- Queryreeksen uit statische bronnen verwijderen: Jouw CSS en JavaScript-bestanden hebben de bestandsversie meestal aan het einde van hun URLs, zoals
domain.com/style.css?ver=4.6. Sommige servers en proxyservers zijn niet in staat om queryreeksen te cachen, zelfs als een header metcache-control:publicaanwezig is. Dus door ze te verwijderen, kun je je caching soms verbeteren. We hebben speedtests uitgevoerd en zagen een daling van 1,86% in laadtijd wanneer deze optie ingeschakeld was. Opmerking: Je kunt dit gebruiken samen met de Minify CSS of JavaScript-opties.
CSS-bestanden
- Minificeren van CSS-bestanden verwijdert witruimte en comments om de bestandsgrootte te reduceren. We hebben speedtests uitgevoerd en zagen een verlaging van 1,69% in laadtijd met deze optie ingeschakeld. ⏱ Door de manier waarop CSS werkt, kan dit je site onbereikbaar maken, dus zorg dat je deze functie goed test. Nogmaals, in het algemeen is minder witruimte en comments iets positief.
- Combineren van CSS-bestanden voegt al je bestanden samen tot 1 bestand, waardoor het aantal HTTP-verzoeken vermindert. Als je gebruik maakt van een host met HTTP/2 ingeschakeld, is het niet langer aan te raden om bestanden te combineren, aangezien ze nu parallel kunnen laden via één enkele connectie. Kinsta ondersteunt HTTP/2 volledig. Lees meer over het combineren van externe CSS.
- Optimaliseren CSS-levering elimineert render-blocking CSS op je website voor een snellere waargenomen laadtijd. Lees hier meer over in onze uitgebreide artikelen over render-blocking CSS en het optimaliseren van het kritische rendering pad. We hebben speedstests uitgevoerd en zagen een afname van 0,17% in laadtijd met deze optie ingeschakeld. ⏱ Vergeet overigens niet dat dit gaat over de waargenomen laadtijd en niet de werkelijke laadtijd.
JavaScript-bestanden
- Minificeren JavaScript-bestanden verwijdert witruimte en comments om de bestandsgrootte te reduceren. We hebben speedstests uitgevoerd en constateerden een afname van 0,84% in laadtijd met deze optie ingeschakeld. ⏱ (Ingeschakeld, Uitgeschakeld) Vanwege de manier waarop JavaScript werkt, kan dit de functionaliteit van je plugins of thema’s schaden, dus zorg dat je deze functionaliteit van tevoren test.
- Combineren JavaScript-bestanden combineert je sites JS naar minder bestanden en reduceert daarmee het aantal HTTP-verzoeken. Als je gebruikmaakt van een ingeschakelde HTTP/2-host, wordt het niet meer aangeraden om bestanden te combineren, omdat ze nu parallel kunnen laden via één enkele connectie. HTTP/2 wordt volledig ondersteund door Kinsta.
- Uitgesteld laden van JavaScript elimineert render-blocking JS op je site en kan de laadtijd verbeteren. Lees hier meer over in onze uitgebreide artikelen over render-blocking JavaScript. Dit kan je site ook breken als je niet voorzichtig bent, dus zorg dat je dit test. We hebben speedtests uitgevoerd en zagen een daling van 1,35% in laadtijd met deze optie ingeschakeld.
Als je een Kinsta klant bent en je gebruikt de codeminificatiefeature die is ingebouwd in het MyKinsta dashboard, dubbelcheck dan even met onze support om te zien of het gebruik van beide opties prima is.
Media
In het menu Media geeft de plugin je een optie om je afbeeldingen en video te ‘lazyloaden’ evenals het uitschakelen van het laden van extra scripts, zoals Emojis en Embeds. Laten we hier dieper op ingaan.
LazyLoad
Lazyloading is een optimalisatietechniek die zichtbare content laadt, maar het downloaden en renderen van content die verschijnt bij het scrollen, vertraagt. Door de lazyload-optie in te schakelen kan de werkelijke en waargenomen laadtijd verbeteren, aangezien afbeeldingen, iframes en videos alleen geladen worden wanneer zij de viewport (bijna) binnenkomen – dit reduceert het aantal HTTP-verzoeken.
- Inschakelen voor afbeeldingen: We hebben speedtests uitgevoerd en zagen een afname van 3,89% in laadtijd met deze optie ingeschakeld.
- Inschakelen voor iframes en videos: We hebben acht YouTube-videos op een pagina geplaatst en we zagen een afname van 74,43% in laadtijd wanneer deze optie was ingeschakeld. WP Rocket heeft een optie om een YouTube-video automatisch te vervangen met hun preview-afbeelding. Dit is een ongelooflijk goede manier om videos meer snelheid te geven op je WordPress-site.
Check onze uitgebreide tutorial over lazyloading in WordPress.
Emoji
Met de release van WordPress 4.2 kwam de integratie van emoijs in de kern van oudere browsers. Het grote probleem is dat dit een extra HTTP-verzoek genereert op je WordPress-site om eenwp-emoji-release.min.js -bestand te laden. En dit verzoek laadt op iedere pagina.
Uitschakelen Emoji: De disable emoji-optie zal het aantal HTTP-verzoeken reduceren. De emoji’s zullen nog wel werken, maar met deze functie ingeschakeld worden weer de emoji-versies van de browser van de bezoeker worden geladen. We hebben speedtests gerund en zagen een afname van 2,2% in laadtijd met deze optie ingeschakeld.
Check ons uitgebreide artikel over het uitschakelen van emoji’s.
Insluitingen
De release van WordPress 4.4 bracht de oEmbed-feature naar de WordPress-core. Je hebt deze feature waarschijnlijk al wel eerder gezien of gebruikt. Dit staat gebruikers toe om YouTube-videos, tweets en andere bronnen in te sluiten op hun website door simpelweg een URL te plakken, die WordPress automatisch omzet in een insluiting en voorziet van een live preview in de visuele editor. Als je Facebook hebt ingesloten in je site, bekijk dan hoe de nieuwe update van Facebook hierop van invloed is en hoe je dit kunt verhelpen.
Je raadt het al, ook deze functie genereert een extra HTTP-verzoek op jouw WordPress-site om het wp-embed.min.js -bestand te laden. En deze laadt op iedere afzonderlijke pagina.
Uitschakelen WordPress-insluitingen: De disable embeds-optie zal het aantal HTTP-verzoeken reduceren. We hebben speedstests uitgevoerd en constateerden een afname van 4,9% in laadtijd met deze optie ingeschakeld. ⏱ Check ons uitgebreide artikel over het uitschakelen van insluitingen.
Preload
In het “Preload” menu krijg je de mogelijkheid om het preloaden van cache in te schakelen, naast DNS prefect en font preloads. Deze werken niet allemaal bij Kinsta. Laten we ze stuk voor stuk eens bekijken.
Preload Cache
We raden aan om geen van deze opties te gebruiken en in feite, ze zullen hoogstwaarschijnlijk niet werken in Kinsta.
Prefetch DNS-verzoeken
DNS-prefetching staat je toe om domeinnamen om te zetten (het uitvoeren van een DNS-lookup op de achtergrond) voordat een gebruiker op een link klikt, wat vervolgens kan helpen de prestatie te verbeteren. Dit wordt gedaan door een rel="dns-prefetch" -tag toe te voegen in de header van je WordPress-site. We raden aan om prefetch toe te voegen aan externe verzoeken van je CDN, Google Fonts en Google Analytics. Hieronder een voorbeeld:
<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//www.google-analytics.com">Het is lastig om hier een speedtest op uit te voeren, maar je kunt ervan verzekerd zijn dat dit de snelheid van je site versnelt.
Preload Fonts
Als je je lettertypes (fonts) host op je eigen domein en niet gebruik maakt van een externe dienst als Google Fonts, dan raden we aan om deze toe te voegen aan de “Preload Fonts” lijst in WP Rocket. Door lettertypes te preloaden in het HTML <head> element, kunnen webbrowsers al beginnen met het downloaden van lettertypes nog voordat ze worden “ontdekt” in je CSS bestand.
Geavanceerde regels
Vanwege het feit dat WP Rocket synchroniseert met de Kinsta-omgevingscache, kun je de uitgebreide regels niet gebruiken. Als je een URL of directory moet uitsluiten van caching kun je altijd contact opnemen met het Kinsta-ondersteuningsteam.
Database
In het “Database” menu geeft WP Rocket je de mogelijkheid tot het opschonen van berichten, reacties, transients en tabellen.
Wanneer je deze combineert met onze automatische wekelijkse database-optimalisaties, dan zorgt het verwijderen van onnodige revisies en transients ervoor dat je database optimaal blijft presteren.
Opschonen van artikelen
Het is niet ongebruikelijk voor oudere sites dat zij 100+ revisies op hun hoofdpagina hebben. Dit komt simpelweg door het editen en updaten van content door de jaren heen. Laten we bijvoorbeeld zeggen dat een site 700 pagina’s of posts heeft met ieder 150 revisies. Dit zijn meer dan 100.000 invoergegevens in de database. Dit neemt opslagruimte in beslag en dit kan zelfs met database-indexen de prestatie negatief beïnvloeden.
WP Rocket geeft je de optie om het volgende te verwijderen:
- Revisies
- Auto-concepten
- Verwijderde posts
Check onze uitgebreide post over hoe je revisies kunt optimaliseren voor snellere prestaties.
Opschonen van reacties
Net als revisies kunnen spam en verwijderde comments zich makkelijk opstapelen tot ongekende hoogtes – als je het maar genoeg tijd geeft. WP Rocket geeft je de optie om het volgende te verwijderen:
- Spam comments
- Verwijderde comments
Als je comments niet gebruikt op je WordPress-site raden we je aan om de comments uit te schakelen om te voorkomen dat spam überhaupt doorkomt. Dan hoef je jezelf ook geen zorgen te maken over het installeren van spam plugins.
Opruimen van tijdelijke bestanden
Er wordt in WordPress soms over tijdelijke bestanden (transients) heen gekeken, maar ze zijn ontzettend belangrijk! We hebben wel eens gezien hoe een beschadigde transientcache een WordPress-site compleet uit de lucht haalde. De bestanden zijn echt bedoeld als tijdelijke oplossing en daarom is het geen probleem om ze te verwijderen en we raden dat ook aan. Als ze benodigd zijn voor een plugin worden ze automatisch gegenereerd. WP Rocket geeft je de optie om het volgende te verwijderen:
- Verlopen transients
- Alle transients
Opschonen database
Database-opschoning verlaagt de overhead van databasetabellen. Echter, bij Kinsta maken we gebruik van InnoDB in plaats van MyISAM en daardoor is dit meestal niet nodig.InnoDB heeft aangetoond beter te presteren en betrouwbaarder te zijn. Een goede reden om InnoDB te verkiezen boven MyISAM is om voordeel te halen uit het vergrendelen van rijen. Dit zorgt ervoor dat je queries sneller verwerken. Als je je WordPress-site naar Kinsta migreert, is dit één van de optimalisaties die onze technici op je site uitvoeren.
Automatische opschoonhandelingen
WP Rocket geeft je ook de optie om de opruiming van je database automatisch in te stellen op dagelijkse, wekelijkse of maandelijkse basis. Dit wordt achter de schermen gepland met een cron job.
CDN
In het CDN-menu kun je een extern leveringsnetwerk inschakelen om je content te leveren. Wat betreft het verbeteren van de prestaties van je site is dit een van de makkelijkste en meest voor de hand liggende dingen die je kan doen. Een CDN ontlast je webserver, terwijl ze de levering van content aan je bezoekers versnellen en hun ervaring dus verbeteren. Lees waarom wij denken dat elke site een CDN zou moeten gebruiken.
Als je een Kinsta-klant bent, zal dit menu niet nodig zijn aangezien de Kinsta CDN automatisch achter de schermen wordt uitgerold op je website.
We raden je aan om je WordPress-site eerst door een website speedtest-tool te halen om te bevestigen dat al je assets (JS, CSS en afbeeldingen) worden geladen.
Heartbeat
Heartbeat is een WordPress Core API voor server polling. Het wordt door veel thema’s en plugins gebruikt om een verbindingsstroom met je server te onderhouden. Hierdoor kunnen WordPress ontwikkelaars realtime updates inbouwen in hun producten.
Standaard wordt de Heartbeat code aan de clientzijde elke 15-16 seconden uitgevoerd. Afhankelijk van je site- en serverconfiguratie is het mogelijk dat regelmatige Heartbeat serverpings niet nodig zijn.
Met WP Rocket kan je de Heartbeat pingintervallen terugbrengen tot 2 minuten of pings helemaal uitschakelen voor de back-end (WP dashboard), front-end en berichteditor.
Voor de meeste sites raden we de optie “Reduce Activity” aan. Veel moderne plugins en thema’s maken gebruik van de Heartbeat kernfunctionaliteiten, dus als je volledig inschakelt, kan je site mogelijk beschadigd raken.
Add-Ons
Onder “Add-Ons” geeft WP Rocket je de mogelijkheid om extra diensten aan je site toe te voegen, zoals Cloudflare, Sucuri, Google Analytics en Facebook Pixel. Als je een van deze diensten gebruikt op je site, dan raden we je aan om deze in te stellen via WP Rocket, zodat je profiteert van de meest geoptimaliseerde integratie voor deze diensten.
Als je al andere plugins gebruikt om deze diensten op je site te integreren, dan kan je deze plugins veilig verwijderen nadat je de Add-On in WP Rocket hebt geconfigureerd.
Afbeeldingsoptimalisatie
De ontwikkelaars van WP Rocket zijn ook eigenaar van Imagify, een van onze favoriete diensten om afbeeldingen te optimaliseren. Als je op zoek bent naar een gebruiksvriendelijke WordPress plugin voor het optimaliseren van afbeeldingen, kijk dan eens naar Imagify. Lees dit artikel als je meer wil leren over afbeeldingsoptimalisatie en andere optimalisatieplugins en -oplossingen.
Definitieve speedtests
We hebben een aantal definitieve speedtests uitgevoerd met alles ingeschakeld, zodat je een vóór en ná kunt zien. Opmerking: deze WordPress-site wordt gehost door Kinsta.
Vóór WP Rocket
We hebben 5 tests in Pingdom uitgevoerd zonder WP Rocket en het gemiddelde genomen.
Daarna hebben we een test in Google PageSpeed Insights uitgevoerd zonder WP Rocket.
Na WP Rocket
We hebben toen 5 tests uitgevoerd in Pingdom met WP Rocket en ingeschakelde opties hiervan het gemiddelde van genomen.
We hebben daarna een test in Google PageSpeed Insights uitgevoerd met WP Rocket.
Hier is de conclusie van bovenstaande resultaten:
- In onze Pingdom-tests zagen een afname van 9,12% in totale laadtijd tijdens het runnen van WP Rocket. Hoewel dit misschien niet uitermate hoog lijkt, duurde het slechts een paar minuten en minder dan 10 kliks om dit te bewerkstelligen.
- Onthoud dat WP Rocket zijn boterham verdiend dankzij hun caching-oplossing. Hier bij Kinsta hebben we onze eigen ingebouwde cache, dus we delen alleen de resultaten van hun andere optimalisatie-features. In werkelijkheid is dit dus een verbetering van 9% bovenop Kinsta’s razendsnelle cache.
- De site die we hebben gebruikt voor de test is al behoorlijk geoptimaliseerd. Grotere sites en sites die niet zo geoptimaliseerd zijn, zullen makkelijk nog grotere resultaten opleveren.
- Benieuwd waarom er extra verzoeken zijn in de finale versie? Dit komt meestal door het lazyloading van de afbeeldingen omdat het blanco
data:image/gif;base64-verzoeken creëert. Maar geen zorgen, het zal nog steeds sneller zijn. - Als je videos host kun je mogelijk een afname in laadtijd zien vanaf 50% of meer. Dit wordt bereikt door gebruik te maken van WP Rockets feature die YouTube-videos met klikbare preview-thumbnails vervangt. Dit is superhandig!
- In onze Google PageSpeed Insights-tests zagen we een toename in onze score van 88/100 tot 98/100. Echter, scores zijn niet zo belangrijk als de algehele laadtijden¸ dus neem deze met een korreltje zout. We discussiëren hierover in ons artikel over Google PageSpeed Insights.
Zoals je hierboven kunt zien, maakt WP Rocket het je ontzettend makkelijk om met een paar simpele clicks je WordPress-site te versnellen.
Samenvatting
Het team van WP Rocket perst er constant nieuwe features uit die direct op elkaar afstemmen met de webprestatie-aanbevelingen die we bij Kinsta delen. Je kunt verwachten dat je nog een strakkere integratie zal zien met hun plugin in de volgende maanden! Wij zijn in elk geval razend enthousiast dat onze klanten deze plugin nu zonder problemen kunnen gebruiken!
We horen graag wat jij hierover denkt. Gebruik jij WP Rocket? Laat het ons weten onderaan in de reacties.
Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.
Laat een reactie achter