Berichten

Regelmatig bezoek ik websites, net als jij. Nog regelmatiger klik ik deze binnen een aantal seconden weer weg. Meestal doe ik dit omdat het toch niet helemaal aansluit bij hetgeen ik zoek. Maar de overige 20% klik ik weg omdat de website niet binnen ongeveer 3 seconden getoond wordt.

Iedereen houdt van snelheid. Mannen houden van snelle auto’s, vrouwen van snelle websites. Tijd om jouw websitesnelheid te meten en te kijken waar de verbeterpunten liggen. Waarom zou je werken aan de snelheid van je WordPress website? Daar zijn verschillende redenen voor te bedenken. Een van de belangrijkste redenen is uiteraard dat je jouw bezoekers een goede ervaring wilt bieden op je website. Een tevreden bezoeker zal eerder converteren naar een tevreden klant. En dat is uiteindelijk het doel van jouw website of webshop.

De snelheid van je website meten kun je onder andere doen via:

Daarnaast is het voor Google ook belangrijk om een snelle website te hebben. Je vindbaarheid verbetert duidelijk als je website snel getoond wordt. Regelmatig verhuis ik websites naar snellere servers en monitor ik de posities. Het is duidelijk te zien dat zonder verdere aanpassingen op diverse zoektermen verbetering optreedt door de verbeterde snelheid.

  1. Social Media vertragen jouw website
  2. YouTube filmpjes vertragen jouw website
  3. Bezuinigen op je hosting?
  4. Afbeeldingen moet je comprimeren
  5. Overbodige plugins verwijderen
  6. Verouderde PHP op de hostingserver
  7. Geen varnish caching op de server
  8. Preloader op je website nodig?
  9. Errors in plugin of thema oplossen
  10. Achtergrondfilmpjes zijn niet tof

1. Social Media vertragen jouw website

Social media die jouw website vertragen? Hoe zit dat? Op bijna alle websites vind je een koppeling met social media profielen. De twee grootste bronnenvreters zijn Facebook en Pinterest. Zijn er alternatieven om jouw social media kanalen te tonen op je website?

Een alternatief voor een Facebook Likebox kan zijn een eenvoudige tekstlink of een gelinkt icoon. Maar ben je erg gehecht aan je de likebox en wil je hier geen afscheid van nemen? Denk er dan eens over na om een screenshot te maken van je huidige likebox en deze als afbeelding met een directe link naar je Facebookpagina. Het zal je een aantal requests schelen in de snelheidstest. En vaak wordt hier ook een plugin voor gebruikt. Dubbele winst dus, een plugin minder en een aantal requests minder.

Pinterest vertraging WordPressRecent heb ik de opdracht gekregen om een blog te optimaliseren. Ik kwam eracht dat er een Pinterest board geladen werd waarvoor standaard ongeveer dertig afbeeldingen geladen worden. Hierna heb ik onderzoek gedaan en kwam tot de conclusie dat er geen mogelijkheid is om dit te verminderen. Er zal dus altijd een groot aantal afbeeldingen geladen worden die niet eens getoond worden. Zonde van de vertraging.

Hetzelfde geldt eigenlijk voor een Instagram Feed op je website. Het voordeel hiervan is dat je bij de meeste plugins aan kunt geven hoeveel images er geladen moeten worden waardoor je de vertraging kunt beperken.

2. YouTube-filmpjes vertragen jouw website

WordPress is een fantastisch Content Management Systeem. Laten we daar geen enkele discussie over hebben. Het is ook erg fijn als je een Youtube-filmpje wilt delen dat je hiervoor alleen de link hoeft te delen. Heel erg handig. Maar heb je wel eens gekeken hoeveel verzoeken hierdoor vanaf de server naar YouTube heen en weer gestuurd worden? Dat zal je verbazen als je hier naar gaat kijken.

Maar hoe voorkom je het? Of wat is het alternatief? Het alternatief is een screenshot van jouw Youtube-filmpje, eventueel in mockup van bijvoorbeeld een beeldscherm, met een link naar een popup met hierin jouw Youtube-filmpje. Ook dit zal je weer een aantal requests schelen. Er hoeft namelijk geen script ingeladen te worden die het afspelen van de Youtube-filmpjes mogelijk maakt.

3.Bezuinigen op je hosting?

Je bent lang geleden gestart met je website. En waar ben je begonnen? Je zoektocht begon op Google en je hebt gezocht op ‘Goedkope WordPress hosting’. Toen kwam je bij een low-budget provider uit. Voor 1 euro per maand heb jij de hosting van je website geregeld. Je had een aantal bezoekers per dag op je website, deed er verder weinig mee en was tevreden.

Reactietijd server beperken

Google Pagespeed Insights aanbevelingen

Nu is je bedrijf aan het groeien. Regelmatig krijg je te horen dat je website niet goed werkt of zelfs onbereikbaar is. Tegenwoordig wordt jouw website gemonitord met uptime omdat je een onderhoudscontract afgesloten hebt. En dagelijks is er een aantal minuten dat jouw website niet bereikbaar is. Dit kost je dus bezoekers en omzet.

Het lijkt dus heel aantrekkelijk om bij een low-budget provider jouw website te hosten. Maar jouw concurrent is slim en heeft supersnelle en stabiele hosting afgesloten en is daardoor wel altijd bereikbaar. Wil je meer weten over hosting? Alles over de keuzes voor hosting lees je hier.

Gratis tips voor jouw WordPress website
optimaliseer vindbaarheid en snelheid voor het beste resultaat

Je privacy is 100% gegarandeerd. Gegevens zullen nooit met derder gedeeld worden.
Uitschrijven is op ieder moment mogelijk. Maar ik zorg ervoor dat dit niet gaat gebeuren.

4. Afbeeldingen moet je comprimeren

Je bent trots op de professionele foto’s die je hebt laten maken van jouw bedrijf en medewerkers. Zonder er verder bij stil te staan heb je de originele beelden geplaatst op je website. Deze afbeeldingen zijn misschien wel een aantal megabytes groot en hebben vaak een formaat van minimaal 4000 pixels bij 4000 pixels terwijl deze mogelijk maar getoond worden op 200 pixels bij 200 pixels. Hier is dus een enorme winst te behalen.

Als je de website test via GTMetrix zoals in de blog beschreven vind je de grote afbeeldingen en kun je direct aan de slag. Een gemiddelde webpagina is makkelijk onder de 1 megabyte terug te brengen. Is deze groter? Ga dan aan de slag met het optimaliseren van je afbeeldingen!

5. Overbodige plugins verwijderen

Ben jij ook zo dol op plugins? Ze zijn er in allerlei soorten en maten en voegen bijna altijd handige functies toe aan je website. Maar heb je ze allemaal nodig? Bestaat je website al langere tijd en zijn alle plugins nog up-to-date?

Het is de zeker de moeite waard om de plugins eens rustig door te lopen en te kijken of je ze überhaupt nog gebruikt en of er misschien een lichter alternatief voor is of een alternatief in de vorm van een stukje code in bijvoorbeeld de functions.php van je website.

Als ik een website ga optimaliseren komen er meestal minimaal drie plugins naar voren waarvan de eigenaar niet meer weet wat ze doen. Deze kunnen dus helemaal verwijderd worden of worden vervangen door een beter alternatief.

Hoe meer plugins je hebt draaien, hoe meer verzoeken er van de server naar de computer van de bezoeker verstuurd moeten worden en vice versa. Hoe minder plugins dus hoe sneller je website zal zijn.

6. Verouderde PHP op de hostingserver

Veel providers hebben hun server nog draaien op een verouderde versie van PHP. Dit is de codetaal waarmee WordPress werkt. Mocht je een versie lager dan PHP 5.4 hebben draaien, dan is het ook uit veiligheidsoogpunt noodzakelijk dat dit bijgewerkt wordt naar een 7.x.x versie.

Vanaf versie 7.0 is er ook een verbetering in performance meetbaar. En aangezien je werkt aan een snelle WordPress website, is het dus van groot belang dat je deze aanpast. Bij veel providers kun je de PHP-versie handmatig aanpassen naar een nieuwere versie. Als je een Managed WordPress hostingprovider hebt, zal deze de PHP-versie vaak zelf ophogen naar de beste versie. Weer een reden extra dus om te kiezen voor een kwalitatieve hostingprovider.

7. Geen varnish caching op de server

Caching heeft alles te maken met de snelheid van jouw website. Simpel gezegd: de eerste bezoeker krijgt jouw website te zien rechtstreeks vanaf de server, dit kost laadtijd. De tweede en alle daaropvolgende bezoekers krijgen de website te zien vanuit de cache. Dit scheelt aanzienlijk in de laadtijd. Zolang er niets aangepast wordt aan je website, blijft deze cache bestaan en zullen bezoekers profiteren van deze snelheidswinst.

8. Preloader op je website nodig?

Preloader website nodig?De titel impliceert al dat ik mij iets afvraag. En dat kun jij ook doen. Als je een preloader in beeld krijgt bij het laden van je website betekent dit eigenlijk maar 1 ding: je website is langzaam. Als je website snel is dan krijgt de preloader niet eens de kans om te laden, en is deze al verdrongen door de website.

Ik probeer mij ook constant in te denken waarom mensen een preloader installeren op hun website. Zou het verdoezelen voor een bezoeker dat je website traag is? Juist niet, want een trage website zonder preloader toont in ieder geval een stuk van de website voordat deze geladen is. Dat zal je bezoekers meer triggeren dan een ronddraaiende cirkel of welk ander fantastisch icoon je hier ook voor zult gebruiken.

De conclusie is dus: Weg met nutteloze preloaders.

9. Errors in plugin of thema oplossen

In de blog die ik recent geschreven heb over de Google Developer Console en de errorlog op je server kun je nalezen hoe je errors vindt op je website. Vaak worden deze veroorzaakt door verouderde versies van thema’s of plugins. Maar het kan ook zijn dat om onduidelijke redenen een afbeelding niet goed geüpload is naar de server en dit een 404 error geeft op de server, oftewel: de afbeelding is niet gevonden. Deze errors zullen altijd een kleine vertraging opleveren bij het laden van je website.

Kijk dus in de console en de errorlogs naar eventuele fouten en los ze op. Een JavaScript error kan het laden van je complete pagina blokkeren en een 404 naar een script, afbeelding of stylesheet zal een lelijke vertraging opleveren in je laadtijd.

10. Achtergrondfilmpjes zijn niet tof

Je concurrent heeft al ervaren dat het hebben van een zogenoemde achtergrondvideo (“hero movie”) op zijn of haar website alleen maar irritatie opwekt bij de bezoekers. Deze films draaien vaak op de achtergrond van een pagina en nog vaker zal de pagina er overheen lopen. Een simpele vraag: hoe vaak heb jij deze filmpjes volledig bekeken en snapte je ook wat dit te maken had met de website die je op dat moment bezocht? Ik zal het voorzichtig uitdrukken, heel weinig.

Laat deze vertragende achtergrondfilms dus weg. Als het al niets toevoegt aan de ervaring van je websitebezoekers en vervolgens ook nog eens vertragend werkt bij het laden van een website, lijken mij dat twee prima redenen om afscheid te nemen van deze films. Ook dit zal je weer een aantal request schelen.

Gratis tips voor jouw WordPress website
optimaliseer vindbaarheid en snelheid voor het beste resultaat

Je privacy is 100% gegarandeerd. Gegevens zullen nooit met derder gedeeld worden.
Uitschrijven is op ieder moment mogelijk. Maar ik zorg ervoor dat dit niet gaat gebeuren.

Conclusie

Dit waren de 10 punten die ik je wilde aanreiken waardoor jouw website vertraging oploopt. Over het optimaliseren van een website zijn enorm veel blogs te schrijven, grotendeels zullen deze op de bovenstaande punten uitkomen. Wil ik hiermee zeggen dat je helemaal geen Pinterest board meer op je website moet laden? Of dat je geen YouTube-filmpje in moet sluiten via de handige manier die WordPress zelf aanbiedt? Zeker niet. Maar wees je bewust van het geheel. Als je verder alle punten op orde hebt en je wilt verder optimaliseren dan zul je keuzes moeten maken. Probeer de keuzes te maken uit het oogpunt van gebruikersgemak en niet op basis van wat jij zelf mooi vindt of wat anderen hebben.

De snelheid van je website wordt nogmaals niet alleen gewaardeerd door de gebruikers. Ook Google gaat hier meer en meer aandacht aan geven. Let hier dus constant op. Wil je nu weten waar mensen klikken op je website of hoe ver ze scrollen op je pagina’s? Probeer dan eens een tijdje Hotjar uit bijvoorbeeld, de inzichten die je hieruit verkrijgt zijn soms heel anders dan jij in gedachten hebt. En feit blijft: Meten is weten!

Heb jij nog een aanvulling op deze blog of ben je het ergens pertinent niet mee eens? Laat het vooral weten in een reactie.

Als je bezig bent met het optimaliseren van je WordPress website wil je ook op GTMetrix.com de hoogst mogelijke scores behalen. Ik schreef al eerder een artikel over het optimaliseren van je snelheid.

GTMetrix verbeteren in WordPress

Een prima hulpmiddel is hierbij GTMetrix.com. Houd er wel rekening mee dat dat je test vanuit het buitenland, de dichtstbijzijnde testlocatie is Londen. Het is dus een iets negatief beeld wanneer meer dan 90% van je bezoek uit Nederland komt. Met dit in je achterhoofd is het zeker een goede start om hiermee te beginnen.

De mogelijkheden van GTMetrix zijn enorm, daarom zal ik mij beperken tot de functies die ik het meest tegenkom tijdens optimalisaties.

Waar begin je dan met optimaliseren? Mocht je ooit je eigen huis of kantoor schoonmaken dan begin je ook vaak in het deel waar het het minst schoon is. Waarom? Daar zie je snel resultaat en mocht je niet alles af kunnen ronden dan is het ergste alvast gebeurd. Dat zeg ik tenminste altijd tegen mijzelf, jij ook?

1. Afbeeldingen optimaliseren vanuit GTMetrix

Begin dus bij de scores die een hoge letter uit het alfabet aangeven, bijvoorbeeld een F. Vaak zullen dit de afbeeldingen zijn, die of heel groot zijn, of niet correct gecomprimeerd. Ik schreef al eerder over het optimaliseren van je afbeeldingen om je snelheid te verbeteren. GTMetrix helpt je ook. De test geeft aan welke afbeeldingen geoptimaliseerd moeten worden en biedt daarnaast de mogelijkheid deze geoptimaliseerde afbeeldingen direct te downloaden.

Geoptimaliseerde afbeelding GTMetrix downloaden

Sla ze lokaal op, pas de naam aan (er wordt een aardige lap code toegevoegd aan de bestandsnaam) en upload de geoptimaliseerde afbeeldingen via FTP in de juiste map.

Dit was al de eerste stap naar een geoptimaliseerde snelle website. Vaak een grote stap, zeker gezien het feit dat een behoorlijk deel van de websitebouwers hier geen rekening mee houdt of hun klanten hier niet in adviseert.

2. Aantal requests verminderen

Hoe meer requests, hoe langer het duurt voor een pagina geladen is. Hoe ontstaan requests? Iedere plug-in die je actief hebt staan haalt zaken van de server op. Deze worden opgevraagd door de bezoeker van je website op de server waar je WordPress website gehost wordt.

Logisch dus dat hoe hoger het aantal requests, hoe trager je website zal laden. Zaak om deze zo laag mogelijk te krijgen dus.

Ga naar het overzicht van de geïnstalleerde plugins en neem deze lijst eens kritisch door. Als ik dit samen met mijn klanten doe, komen we verrassend genoeg altijd tot de conclusie dat er minimaal 1 plugin actief is die niet gebruikt wordt.

Network Tab GTMetrix

Is dit echt niet het geval, kijk dan in GTMetrix (op het tabblad Waterfall) naar alles dat geladen wordt. Mogelijk maak je gebruik van een plugin die heel veel verkeer veroorzaakt, terwijl je dit ook kunt oplossen met een eenvoudige regel die je toevoegt aan je functions.php.

Een voorbeeld hiervan zal ik verderop in deze blog hiervan toelichten.

3. Leverage browser caching

Iedere website-optimalisatie draait grotendeels om de juiste caching. Voor het optimaliseren maak ik altijd gebruik van W3 Total Cache. Wat stel ik hier in:

  1. Page Cache
  2. Browser Cache
  3. Object Cache

Heb je niet de mogelijkheid om te kiezen bij de instellingen van deze caches voor memcached? Dan zou ik zeker eens navragen bij je provider of dit een mogelijkheid is. En anders is een verhuizing het overwegen waard voor een optimale snelheid.

Stel nooit de minify en database Cache van W3 Total Cache in. Mijn ervaring is dat dit vaak probleemveroorzakers zijn en ze vertragen eerder dan dat ze snelheidswinst opleveren.

4. Enable gzip compression

Ook dit is een onderdeel dat ik regelmatig tegenkom bij met name goedkope hostingproviders. GZip is een manier van compressie op serverniveau. Deze wordt geactiveerd vanaf de server als het beschikbaar is. Mocht je om wat voor reden dan ook GZip niet kunnen activeren, dan kun je proberen deze code toe te voegen aan je htaccess-bestand.

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Als je wilt testen of GZip-compressie juist geactiveerd is op jouw server kun je dit testen op deze website.

5. Remove query strings

Bronnen op je website met een “?” in de url worden niet door alle servers gecached. Zonde, hierdoor verlies je dus kostbare snelheid omdat het item constant volledig van de server opgehaald moet worden. Hoe los je dat op?

Je hebt meerdere opties, de eerste optie is het makkelijkst. Voeg de plugin ‘remove query strings from static resources’ toe aan je WordPress installatie. Plugin activeren en melding verdwenen. Maar waarom een plugin gebruiken als het ook met een eenvoudig stukje code in je .htaccess-bestand kan? Dat heeft absoluut de voorkeur. Gebruik deze code in je .htaccess-bestand:

/*** Remove Query String from Static Resources ***/ function remove_cssjs_ver( $src ) { if( strpos( $src, ‘?ver=’ ) ) $src = remove_query_arg( ‘ver’, $src ); return $src; } add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 ); add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );

Mocht het probleem niet opgelost worden kijk dan even in W3 Total Cache naar je Browser Cache tabblad en zorg dat de optie “Prevent caching of objects after settings change” uitgevinkt is.

[et_bloom_inline optin_id=”optin_6″]

6. Add Expires Headers

Expires headers laat browsers wanneer ze een gecachete versie van je website moeten laten zien en hoe lang ze dit vast moeten houden.

Deze kun je instellen via (alweer…?) W3 Total Cache. Onder browser cache kun je deze optie aanvinken.

Mocht je geen gebruik maken van W3 Total Cache, dan kun je handmatig deze code toevoegen aan je .htaccess-bestand.

<filesmatch ".(ico|jpg|jpeg|png|gif|js|css|swf)$"="">

  
  ExpiresActive On
  ExpiresDefault A600
  ExpiresByType image/x-icon A2592000
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800
  ExpiresByType image/gif A2592000
  ExpiresByType image/png A2592000
  ExpiresByType image/jpeg A2592000
  ExpiresByType text/plain A86400
  ExpiresByType application/x-shockwave-flash A2592000
  ExpiresByType video/x-flv A2592000
  ExpiresByType application/pdf A2592000
  ExpiresByType text/html A600


Je moet er rekening mee houden dat je deze melding niet altijd helemaal op kunt lossen. Vooral als je gebruikmaakt van externe tools als bijvoorbeeld Facebook, Hotjar, chatapplicatie als Tawk.to,

7. Minify JavaScript en CSS

Belangrijke vertragers van je website zijn vaak onnodig veel javascripts en stylesheets (CSS) die geladen worden. Je hebt bij de eerdere stappen al gekeken naar het aantal overbodige plugins die je uiteindelijk toch niet nodig hebt, dat is al een eerste stap in het optimaliseren van deze zaken. Maar er is meer mogelijk.

Download JCH Optimize

Download JCH (affiliate link)

In deze blog over het cachen en optimaliseren van je website schreef ik al over de plugin JCH Optimize (hier te downloaden via affiliate link van Lamper Design). Deze installeer ik standaard bij iedere optimalisatie in combinatie met W3 Total Cache. Deze verzorgt het samenvoegen van scripts en de stylesheets. Hierdoor zal het aantal requests wat deze veroorzaken drastisch verminderen. Vaak haal je met de juiste instellingen van deze plugin al een winst van minimaal 30%.

De plugin is vrij simpel. Je hebt de keuze uit verschillende gradaties van samenvoegen, test hiermee. Niet alle thema’s zullen de hoogste optimale optie kunnen verwerken, dus test na elke wijziging dus of je site nog naar behoren functioneert. Vergeet ook niet dat JCH een eigen cache heeft en leeg deze dus na het maken van wijzigingen.

Je kunt de plugin eerst testen, de gratis versie biedt drie optimalisatieniveau’s, wil je alle mogelijkheden benutten dan zul je de pro-versie aan moeten schaffen.

8. Conclusie

Misschien vraag jij je af waarom ik kies voor GTMetrix als basis voor een optimalisatie. Er zijn zoveel verschillende testen beschikbaar, waarom specifiek deze? De reden hiervoor is simpel. Alle testen kijken globaal naar dezelfde punten. GTMetrix geeft in mijn beleving het duidelijkst aan waar de pijnpunten van een website liggen. Daarnaast; als je deze score verbetert, zul je direct ook het resultaat zien in alle andere testen.

Regelmatig krijg ik de vraag hoe lang het duurt om een website te optimaliseren. Dit is lastig in te schatten. Het is van zoveel verschillende ex- en interne factoren afhankelijk, een vaste tijd is hier niet voor te geven. Gemiddeld reken ik vier uur per website, meestal is dit ook wel de minimale tijd die nodig is voor het beste resultaat.

Ook wordt mij vaak gevraagd waarom ik geen gebruik maak van een CDN. Dit antwoord kun je vinden op https://www.managedwphosting.nl/2015/09/heb-ik-een-content-delivery-network-cdn-nodig/. Hier heb ik niets aan toe te voegen. De simpele conclusie is: als meer dan 90% van je verkeer uit Nederland komt, heeft het geen enkel nut, het zal dan zelfs eerder vertragend werken op je website.

Als laatste een korte uitleg waarom ik gebruik maak van W3 Total Cache terwijl er diverse andere plugins beschikbaar zijn als WP Supercache, Fastest Cache, WP Rocket en nog een aantal bekende namen. De reden hiervoor is simpel. Ik behaal nog steeds het beste resultaat met de combinatie van deze plugins. Heb recent nog getest met WP Rocket, maar ook deze betaalde tool haalt niet het resultaat wat de genoemde gratis plugins halen.

Heb jij ervaring met andere plugins en ben je benieuwd of deze misschien beter zijn? Laat het weten in een reactie, het is zeker de moeite van het testen waard.

Wil jij ook een snelle website en meer omzet maar heb je geen idee hoe het werkt? Ik help je graag, vul de onderstaande aanvraag in en wie weet heb jij deze week ook het hoogst haalbare resultaat uit je website.

Heb je de afbeeldingen op je WordPress website geoptimaliseerd zoals in deze blog beschreven? Ben je dan nu klaar voor de optimalisatie 2.0? Het instellen van de cache van je website en het optimaliseren van de CSS- en JS-bestanden. Wat?! Oké, eerst een korte uitleg dan.

De vormgeving van je website wordt geregeld vanuit de stylesheets. Dit zijn Cascading Style Sheet bestanden. Hier staan diverse regels code in die er bijvoorbeeld voor zorgen dat je H1- en H2-koppen een bepaald lettertype, bepaalde lettergrootte en kleur hebben. Dit is allemaal vastgelegd in een standaard die al vele jaren meegaat en waar zelden codes bij komen of af gaan. Veel van deze bestanden zul je nog nooit gezien hebben. Als er namelijk geen problemen met je website zijn heb je hier weinig mee te maken en moet je er vooral vanaf blijven. Wil je toch meer lezen over de mogelijkheden van CSS? In deze blog leg ik globaal aan hoe je deze bestanden aan kunt passen naar wens of ervoor zorgt dat jouw eigen code de standaard stijl overschrijft.

Maar ik noemde zojuist ook de JS-bestanden. Wat zijn dit? JavaScript bestanden verzorgen veel functionaliteit op je website. Neem als voorbeeld een inschrijving voor de nieuwsbrief of het verzenden van een contactformulier. Beiden beginnen via een JavaScript bestanden acties te ondernemen als er op de verzend- of inschrijfbutton geklikt word. De genoemde CSS- en JS-bestanden vertragen je website. Waarom? Simpelweg omdat als er geen caching op je WordPress website draait en hierdoor voor elk verzoek (elke klik dus) minimaal 1 bestand opnieuw geladen moet worden. Maar jij bent slim, daarom lees je mijn blogs natuurlijk ook alleen maar om nog slimmer te worden.

Om het extra complex te maken, de bestanden krijgen ook een expire time mee. Dit houdt in dat als er gevraagd wordt om bepaalde vormgeving of functionaliteit, de bestanden óf opnieuw opgehaald moeten worden óf ze al klaar staan en gebruikt worden zonder opnieuw te laden.

Tot nu toe is er nog geen probleem. Maar waarom moet je deze bestanden dan optimaliseren? Is dat wel nodig dan? Hier kan ik kort over zijn: Ja. Veel geïnstalleerde plugins gebruiken daarnaast nog hun eigen stylesheets en JavaScript-bestanden. Als je deze kunt combineren kun je daarmee een aanzienlijke snelheidswinst halen. Dit is uiteraard ook helemaal afhankelijk van je hosting.

Hoe optimaliseer je dan de CSS en de JS bestanden? Dat leg ik je graag uit.

  1. W3 Total Cache plugin
  2. JCH Optimize plugin
  3. Conclusie

1. W3 Total Cache plugin

Op alle door mij gebouwde of geoptimaliseerde WordPress websites zul je de W3 Total Cache plugin vinden. Ondertussen heb ik al diverse andere plugins getest, maar het beste resultaat behaal ik nog steeds met een goed afgestelde W3 Total Cache. Dus voor mij nog geen reden om te switchen. Maar het “goed afgestelde” is dus wel een belangrijk iets. Want door verkeerd instellen kan je website juist trager worden, terwijl je aan het optimaliseren bent!

General settings

Wat stel ik hier in? De opties die ik instel vind je hieronder. Wat stel ik hier niet in? De database cache, die geeft vaak onverklaarbare problemen. En ook de minify van W3 laat ik bijna altijd uit. Hierover later meer.

Wat ook van belang is, is om te weten wat voor cache er op je server draait. De meeste van mijn klanten maken gebruik van de kwaliteitshosting van Managedwphosting inclusief Varnish caching.

Wat vink ik aan ik aan op het General Settings tabblad?

  • Pagina Cache – In ieder geval Disk Enhanced en beter Memcached als je provider dit ondersteunt.
    Pagina Caching WordPress
  • Object Cache – Ook Disk Enhanced en beter ook Memcached
    Object Caching WordPress W3 total cache
  • Browser Cache – Enable
  • Reverse Proxy – Hier voer je een eventuele Varnish server in zodat deze geleegd kan worden op het moment dat je je cache leegmaakt.

Pagina cache

Als je website op SSL (https) draait is het raadzaam om aan te vinken dat deze requests gecached worden.

W3 Total Cache

Object cache

Hier hoef je geen specifieke wijzigingen te maken. Als het via General Settings geactiveerd is kun je dit zo laten.

Browser cache

Met deze instellingen kun je veel winst behalen in bijvoorbeeld de snelheidstest op Gtmetrix.com waar ik deze blog over geschreven heb.

Object Cache W3 Total Cache

Cache van WordPress legen

Je hebt nu alle caching optimaal ingesteld. Maar soms kan het nodig zijn dat je alle cache leegt. Hoe je dit doet? In de backend van je WordPress website vind je bovenaan een Performance tekst. Als je daar overheen gaat zie je in het submenu de optie ‘Empty all caches’.

2. JCH Optimize plugin

Veel snelheidstesten zullen aangeven dat je winst kunt halen door de CSS- en JS-bestanden van je website te combineren. Dit betekent heel simpel dat er zoveel mogelijk bestanden samengevoegd worden. En daarnaast kijkt deze plugin naar de volgorde van laden. Sommige scripts zijn namelijk pas nodig als de pagina al helemaal geladen is. Het kan je website aanzienlijk versnellen door de scripts en stylesheets die je eigenlijk pas later nodig hebt, te verplaatsen naar de footer. Hiervoor zijn diverse opties. Ik maak veel gebruik van de plugin JCH Optimize.

JCH Optimize WordPressMijn ervaring met deze plugin is dat je hiermee behoorlijke snelheidswinst kunt behalen. Maar daarnaast is de plugin erg agressief. Dus wees hier voorzichtig mee. Je kunt verschillende niveaus van compressie inschakelen. Begin laag, is mijn advies, en test goed of alles nog werkt op je website.

Daarnaast kun je nog de opties instellen voor HTML minificatie en nog meer opties. Begin met het testen van de automatic settings en als je die optimaal ingesteld hebt, kun je aan de slag met de andere opties, mocht dit nog nodig zijn.

Combine CSS en Java

Dit is het belangrijkste deel van van de plugin. This is where the magic happens. Daaronder vind je ook een belangrijke button. Dat is de Clean Cache button. Mocht je bezig zijn met het aanpassen van je website met CSS dan zul je deze knop regelmatig moeten gebruiken. Naast het legen van de eerder genoemde W3 Total Cache plugin moet je dus ook deze cache legen. Soms zelfs meerdere keren.

JCH Optimize instellingen

Mijn advies is dan ook: mocht je echt gaan verbouwen aan je website zet de caching plugins dan volledig uit. Dit kan je een hoop frustratie voorkomen, kan ik je uit ervaring vertellen.

Er is een gratis versie van de JCH Optimize WordPress plugin. Daarnaast heb je ook nog de mogelijkheid om een pro versie aan te schaffen. Die begint met een single-site licentie van 29 dollar. Eventueel kun je een developer licentie aanschaffen als je dat wilt. De extra mogelijkheden die je krijgt met de pro-versie zijn onder andere Lazy Load van je afbeeldingen en nog meer mogelijkheden om je CSS bestanden te optimaliseren.

Zelf heb ik de Pro versie in gebruik maar deze opties gebruik ik eigenlijk bijna nooit. Dus mijn advies is om het eerst te proberen met de gratis versie en mocht je de genoemde functies missen kun je altijd de Pro aanschaffen op https://www.jch-optimize.net/subscribe/levels.html#wordpress.

3. Conclusie

Zoals je waarschijnlijk begrijpt gaat het te ver om een stap voor stap handleiding te schrijven voor de caching van jouw website. Daarvoor is het een te complex geheel en per website is dit zo verschillend dat hier geen standaard oplossing voor is. Elke optimalisatie is maatwerk. En elke optimalisatie kost een aantal uren testen.

Let er op bij aanschaf van een thema. En mag ik je een tip geven? Haal de demopagina van de website eens door https://gtmetrix.com. Het zegt niet alles, maar het kan je wel een globale indicatie geven van de kwaliteit van een thema. Het kost moeite om de onderstaande score te behalen en te behouden. Er zijn enorm veel factoren die hier invloed op hebben.

GTMetrix score