Heb jij de afbeeldingen op je WordPress website geoptimaliseerd zoals in deze blog over het optimaliseren van afbeeldingen beschreven? Dan kun je nu snel verder met Website Optimalisatie 2.0. Een belangrijk onderdeel hiervan is het instellen van de cache van je website en het daarbij horende optimaliseren van de CSS- en JS-bestanden. Wat?! Oké, eerst een korte uitleg dan.

De basis van dit artikel is gepubliceerd op 15 mei 2016. Ondertussen staan de ontwikkelingen zeker niet stil en was het tijd voor een grote update van dit artikel.

—————-

De basis van je WordPress website

Eerst een klein stukje uitleg.

De vormgeving van je website wordt geregeld vanuit de stylesheets. Dit zijn Cascading Style Sheet-bestanden, kortweg CSS. 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. Alle CSS-codes zijn vastgelegd in een standaard die al vele jaren meegaat (de W3C standaard) en waar zelden codes bij komen of af gaan.

CSS-bestanden

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 van afblijven. Wil je toch meer lezen over de mogelijkheden van CSS? In deze blog leggen wij globaal aan hoe je deze CSS-bestanden aan kunt passen naar wens of ervoor zorgt dat jouw eigen code de standaard stijl overschrijft.

JS-bestanden

Vergeet ook zeker bij het optimaliseren de JavaScript- of JS-bestanden niet. 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-bestand actie te ondernemen als er op de verzend- of inschrijfbutton geklikt wordt.

De genoemde CSS- en JS-bestanden vertragen je website. Waarom? Simpelweg omdat als er geen caching op je WordPress website draait, er hierdoor voor elk verzoek (elke klik dus) minimaal 1 bestand opnieuw geladen moet 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 echt nodig dan? Hier kunnen we 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.

Plugins voor caching en optimalisatie

Met welke plugins kun je jouw WordPress website laadtijd verbeteren? Er zijn verschillende opties. Welke plugin je zou moeten gebruiken verschilt per website door bijvoorbeeld het gebruikte thema, de hosting en zo zijn er nog een groot aantal factoren die invloed hebben op de laadtijd van je website.

Hoe optimaliseer je dan de CSS en de JS bestanden? Wij leggen het je graag uit aan de hand van de onderstaande plugins die wij regelmatig gebruiken. We gaan niet alle plugins stap voor stap uitleggen maar geven globaal aan waar de opties voor zijn die aangeboden worden.

Cache je WordPress website met LiteSpeed Cache plugin
Cache je WordPress website met de W3 Total Cache plugin
Conclusie

1. Cache je WordPress website met LiteSpeed Cache plugin

De hosting die wij aanbieden maakt gebruik van LiteSpeed caching. Kort samengevat is dit: LiteSpeed Cache (LSCache) is een ingebouwde, high performance dynamische contentbouwer die gebruikt maakt van de LiteSpeed-functionaliteit op een server. Nog korter? LiteSpeed op je server betekent een snellere website.

LiteSpeed Cache

Als je de LiteSpeed Cache plugin installeert in je website krijg je een extra optie in je dashboard met de verrassende naam LiteSpeed cache. Hieronder vind je een aantal submenu-items die we kort zullen benoemen.

Standaard instellingen

Hier vind je eigenlijk maar twee opties die van belang zijn. Dat is de ‘automatische upgrade’ functie, die is aan te raden standaard aan te zetten. Mocht er een update voor de plugin zijn, vaak met verbeteringen qua performance of opties, dan wordt deze automatisch geïnstalleerd.

Daarnaast vind je een optie om een domeinsleutel aan te vragen. Deze is gratis te verkrijgen en heb je later bij de andere opties nodig. Vraag deze dus altijd aan.

Cache tabblad

Onder dit tabblad vind je weer een groot aantal tabbladen met enorm veel opties. De opties die wij in ieder geval instellen zijn de volgende:

Cache inschakelen op aan.
Cache voor ingelogde gebruikers in principe uit, in sommige gevallen zoals grote zware webshops kan het een voordeel zijn ook de achterkant van je website te cachen.
Uitsluiten van bepaalde URL’s is absoluut aan te raden in een webshop, sluit in ieder geval de winkelmand-URL en de afrekenpagina uit. Ook pagina’s die je met een wachtwoord beschermt zijn moet je hier invoeren.
Object caching moet altijd aan staan. Op dit tabblad heb je ook de keuze om Memcached of Redis te activeren. Let op dat je hiervoor de juiste poorten invoert, als alles goed ingesteld staat zal een verbindingstest ook uiteraard groen weergegeven worden.
Browser cache altijd aanzetten.

CDN van LiteSpeed cache

Wij maken voor onze klanten meestal geen gebruik van een CDN (Content Delivery Network; servers in het buitenland die je content lokaal aanbieden) aangezien dit geen toegevoegde waarde heeft als je klanten vooral uit de Benelux komen en je server hier ook staat. Dan zou het eerder nadelig werken.

Optimalisatie afbeeldingen

Dit is een belangrijk onderdeel als je de website wilt optimaliseren qua laadtijd. Hier stel je namelijk in dat er WebP-afbeeldingen gegenereerd worden. Dit kan helemaal gratis als je gebruik maakt van het al eerder genoemde QUICK.cloud.

Instellingen optimalisatie afbeeldingen stel hier de Cron job in, door dit op aan te zetten. Dit betekend dat nieuwe afbeeldingen automatisch omgezet zullen worden in het WebP formaat.
Maak WebP versies dus ook op aan zetten
Afbeeldingsformaat veranderen in WebP ook op aan. Dit betekend dat als het kan er een WebP in plaats van een JPG- of PNG-afbeelding geladen zal worden.

Pagina-optimalisatie

Hier vind je de meeste opties met betrekking tot het samenvoegen van CSS- en JS-bestanden op je website. Dit is een belangrijk onderdeel in het hele optimalisatieproces. De enige optie om het allerbeste hieruit te halen is testen, testen, testen en vooral blijven testen. Hier is geen ideale opstelling voor te geven.

Onder CSS instellingen kun je in ieder geval aanpassen:

Verklein CSS die altijd wel aan kan zonder problemen te geven.
Optimalisatie weergave lettertypes is aan te raden altijd op Swap te zetten in plaats van Standaard.

Onder JS-instellingen is het echt een kwestie van alle opties uitproberen en je site in een incognito venster testen, dus zonder oude browsercache of ingelogd te zijn. Hiermee voorkom je dat in je webshop bijvoorbeeld je klanten niet meer kunnen bestellen omdat een script niet meer geladen wordt. Je zou de eerste niet zijn die dit overkomt.

Onder Optimalisatie instellingen zijn een aantal opties die je ook goed moet testen:

Verklein HTML werkt op veel sites prima. Andere sites werkt bijvoorbeeld opeens een sidebar of filter niet meer. Testen dus.
Ingesloten CSS verkleinen geeft weinig problemen door deze aan te zetten.
Ingesloten JS verkleinen geeft ook weinig problemen dus zet deze gerust aan. Uiteraard: testen.

Onder Media instellingen vind je nog een aantal belangrijke opties:

Lazy Load afbeeldingen; de naam zegt het eigenlijk al. Een afbeelding wordt pas geladen op het moment dat deze ook daadwerkelijk in beeld zou moeten komen op je beeldscherm. Een belangrijke optie die de scores in de diverse online testen zoals bijvoorbeeld GTMetrix behoorlijk kan beïnvloeden.
Responsive plaatshouder; als je deze optie niet aanzet laat een afbeelding die nog niet geladen is eerst een grijs vlakje zien voordat hij getoond wordt. Een responsive plaatshouder is niets meer dan een mini afbeelding die gegenereerd is.
LQIP genereren in Cloud; hiermee worden de responsive plaatshouders gemaakt. Dit gebeurt volledig automatisch op de achtergrond.

Onder media uitzonderingen vind je de optie Afbeelding(en) uitsluiten van Lazy Load. Het is aan te raden om hier in ieder geval de URL van je logo te plaatsen zodat deze altijd direct getoond zal worden.

Database

Onder database vind je allerlei opties om je database op te schonen. Het is aan te raden om hier periodiek aandacht aan te besteden omdat een schone, opgeruimde database de performance van je website zeker ten goede komt. Bekijk de opties rustig en selecteer dat waarvan jij denkt dat je het nodig hebt. Het is wel aan te raden om te zorgen voor een goede database-backup.

Toolbox

Een belangrijke optie die wij regelmatig gebruiken onder de toolbox is de optie onder de tab Debug Instellingen om tijdelijk alle LiteSpeed Cache-opties uit te schakelen. Heb je een probleem op je website, doe dit dan als eerste.

Cache van WordPress met LiteSpeed Cache 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 LiteSpeed cache-icoon. Als je daar overheen gaat zie je in het submenu de optie ‘Verwijder alle cache’.

2. Cache je WordPress website met de W3 Total Cache plugin

Op een aantal door ons gebouwde of achteraf geoptimaliseerde WordPress websites zul je de W3 Total Cache plugin vinden. Ondertussen hebben wij al diverse cache plugins getest, een goed resultaat behalen wij nog steeds met een juist afgestelde W3 Total Cache plugin. Maar het “juist afgestelde” is dus wel een belangrijk detail. Door verkeerd instellen kan je website namelijk trager worden, terwijl je juist aan het optimaliseren bent.

Algemene instellingen

De opties die wij instellen vind je hieronder. Wat we niet instellen is de database cache, die geeft vaak onverklaarbare problemen. Ook de minify van W3 laat ik bijna altijd uit staan. Hierover later meer.

Het is ook van belang om te weten wat voor cache er op je server draait. De meeste van onze klanten maken gebruik van onze kwaliteitshosting inclusief LiteSpeed servercaching.

Wat vinken wij aan op het General Settings tabblad?

Pagina Cache – In ieder geval Disk Enhanced en beter Memcached, als je provider dit ondersteunt.
Object Cache – Ook Disk Enhanced en beter ook Memcached
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 gecachet worden.

Object cache

Hier hoef je geen specifieke wijzigingen te doen. 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.

Cache van WordPress met W3 Total cache legen

Je hebt nu alle caching optimaal ingesteld. Soms kan het wel nodig zijn om alle cache te legen. Dat doe je in de backend van je WordPress website, waar je bovenaan een Performance tekst vindt. Als je daar overheen gaat zie je in het submenu de optie ‘Empty all caches’.

3. Andere cachingplugins en tips voor het optimaliseren

Naast de hier beschreven cachingplugins zijn er nog honderden andere plugins. Een aantal hiervan hebben wij ook getest en sommigen hebben we ook in gebruik omdat een website zo specifiek is dat dit de beste plugin hiervoor is. Zo maken wij in sommige gevallen gebruik van WP Fastest cache en WP Supercache.

Zoals je waarschijnlijk begrijpt gaat het te ver om een stap voor stap handleiding te schrijven voor de caching van jouw specifieke website. Daarvoor is het een te complex geheel en per website is dit zo verschillend dat hier echt geen standaard oplossing voor is. Elke optimalisatie is maatwerk. En elke optimalisatie kost een aantal uren testen. En dan vind je soms nog steeds onvolkomenheden. Vraag dus vooral om iemand anders te laten testen.

Let ook op snelheid bij de aanschaf van een thema. Onze tip: 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.

Benieuwd hoe snel een site is met zo’n score in de praktijk? Bekijk dan eens desampler.nl