Cache en optimaliseer je WordPress 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

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *