Wil je je WordPress site flink versnellen? Dan is het implementeren van Varnish een logische stap. Toch zien we dat nog weinig sites op ons clusterplatform hier gebruik van maken. Zonde, aangezien het helemaal niet moeilijk is om Varnish te implementeren met de ‘Varnish voor WordPress plugin’. Deze plugin hebben we in samenwerking met Ferdy Perdaan van 42functions ontwikkeld. Ik sprak met Ferdy over de kracht van Varnish, de ontwikkelde plugin, de implementatie van Varnish op een complexe WordPress site en de bijbehorende valkuilen en adviezen. Ben je zelf van plan om binnenkort met Varnish aan de slag te gaan? Dan is deze blog boordevol tips een must-read.

Waar ligt de kracht van Varnish?

De kracht van Varnish is dat het een volledige kopie van je pagina opslaat waardoor deze niet meer bij elk verzoek gegenereerd hoeft te worden. Hierdoor levert Varnish vrijwel altijd een enorme snelheidswinst op. De totale snelheidswinst die je kan behalen met Varnish is afhankelijk van de plugins en het maatwerk dat bovenop je standaard WordPress installatie staat. Een standaard WordPress installatie heeft namelijk minstens één seconde nodig om een pagina te generen. Alle plugins, je thema en het maatwerk wat je er vervolgens bovenop bouwt, zorgen ervoor dat de laadtijd alleen maar langer wordt.

“Je hebt met Varnish minimaal 1,5 seconde snelheidswinst omdat je WordPress niet meer hoeft in te laden, en afhankelijk van de plugins en thema’s die je geïnstalleerd hebt kan deze winst nog meer worden.”

Veel WordPress sites maken gebruik van een tool om afbeeldingen automatisch te laten bijschalen naar het gewenste formaat. Als een bezoeker de pagina opvraagt moet er op dat moment techniek aan te pas komen om ervoor te zorgen dat de afbeeldingen in het juiste formaat gegenereerd worden. Dit kost tijd omdat er wat denkwerk en proceswerk overheen gaat. Op het moment dat je Varnish gebruikt hoeft het bijschalen maar één keer uitgevoerd te worden. Vervolgens onthoudt Varnish het juiste formaat, en bij een volgende bezoeker kunnen deze stappen worden overgeslagen.

“Wanneer er techniek aan te pas komt, ga je winst behalen met Varnish. Hoe meer gebruik je maakt van techniek, hoe groter je winst!”

Varnish makkelijk te installeren met de WordPress plugin

Om Varnish gemakkelijk draaiende te krijgen hebben we samen met 42functions een plugin ontwikkeld. Deze plugin zorgt ervoor dat communicatie tussen Varnish, je hostingomgeving en de WordPress installatie vlekkeloos verloopt. Met één druk op de knop kun je in ons Service Panel Varnish activeren. Vervolgens kun je in WordPress aangeven welke pagina’s je wel en niet wilt opslaan in de caching. De plugin zorgt dat de juiste paginaheaders worden meegestuurd. Je hoeft dus geen extra implementatietrucjes uit te voeren om Varnish goed draaiende te krijgen.

“Varnish is een tool die in makkelijk aangezet kan worden. Zolang jij de headers op al je pagina’s goed hebt staan werkt Varnish feilloos.”

42functions drukt iedereen wel op het hart om te bedenken dat áls je met caching gaat werken, je deze ook moet legen. Dit betekent dat op het moment dat je een pagina of nieuwsbericht toevoegt niet alleen die pagina uit de cache moet worden geleegd, maar ook alle pagina’s die daaraan gerelateerd zijn. Anders zal niemand je kersverse content zien. De WordPress plugin kan relaties tussen pagina’s herkennen en zorgt ervoor dat de juiste pagina’s geflushed worden op de juiste momenten.

De maatwerk implementatie van Varnish op milin.nl

Één van de sites waarop het team van 42functions Varnish heeft geïmplementeerd is de WordPress site van milin.nl. Milin, specialist in kunststof afbouwmaterialen levert exclusief aan B2B-klanten. De site van Milin heeft naast een publieke functie ook een stukje webshop functionaliteit die 42functions zelf gebouwd heeft.

“Toen Milin bij ons klant werd hebben we binnen een week Varnish geïmplementeerd. We moesten er tijdens de implementatie rekening mee houden dat het een webshop is, en daar zitten wat trucjes aan. Het grote vraagstuk was wanneer je caching wel of niet moet inladen. Dat is vooral een kwestie van meten en weten.” legt Ferdy uit.

“Wanneer je caching wel of niet moet inladen. Dat is vooral een kwestie van meten en weten.”

Normaal gesproken moet je bij een webshop rekening houden met het winkelwagentje omdat deze specifieke bezoekersinformatie bevat die niet over gebruikers heen gedeeld mag worden. Aangezien het winkelwagentje bij Milin pas beschikbaar is na inloggen gaf dit geen probleem want na het inloggen worden bezoekers automatisch uitgesloten van caching. Maak je gebruik van grote plugins zoals WooCommerce en WP-Ecommerce? Deze houden hier vaak al rekening mee door de winkelwagen achteraf in te laden op de pagina.

“Een winkelwagentje mag zeker niet gedeeld worden over bezoekers heen.”

Een snelheidswinst van 65%

Doordat er geen metingen zijn gedaan in de situatie voor Varnish, is het lastig om de exacte snelheidswinst te weten te komen. Om de snelheidsverbetering te testen heeft Ferdy de cachingheaders uitgezet en vervolgens weer aangezet. Het resultaat was fantastisch: zonder Varnish duurt het 4 á 5 seconden voordat de pagina helemaal geladen is, en met Varnish heb je de complete pagina al binnen 1 á 2 seconden geladen. Een snelheidswinst van zo’n 65%. Doordat de site van Milin erg visueel is ingesteld zijn laadtijden onder de seconde zelfs met Varnish lastig te behalen.

Een stijging van 50% op de conversie

De conversie van milin.nl is met 50 procent gestegen na het implementeren van Varnish. Omdat er tegelijkertijd nog allerlei andere verbeterpunten zijn doorgevoerd is het lastig om precieze percentages van de conversiestijging toe te schrijven aan de verschillende verbeterpunten. Ferdy: “Ik weet zeker dat het bijdraagt, alle onderzoeken die zijn uitgevoerd laten zien dat op het moment dat de laadtijd van jouw site afneemt je conversie toeneemt. Daar zijn wij ook sterk van overtuigd.”

“Zodra de laadtijd van je website afneemt, neemt de conversie toe.”

Valkuilen bij het implementeren van Varnish

Bij een simpele WordPress site zonder extensies en plugins, is het implementeren van Varnish redelijk plug & play. Bij de site van Milin was dit niet het geval omdat deze site maatwerk is en gebruik maakt van een aantal plugins en een webshop functionaliteit. Hierdoor moet je bij de installatie goed rekening houden met de vraag welke pagina’s je wel en niet moet uitsluiten van caching.

“Bij een simpele WordPress site is het implementeren van Varnish redelijk plug & play”

Sluit de juiste componenten uit van caching

“Een van de dingen die we in eerste instantie over het hoofd zagen is dat we op milin.nl een LMS (Learning Management System) hebben draaien. Op het moment dat een gebruiker een formulier invult dan is die gebruiker bij ons bekend, vraagt hij een 2e formulier op op de site dan worden die gegevens automatisch aangevuld. Heel mooi, maar die gegevens moet je natuurlijk niet in een cache opslaan, want dan komt er een andere bezoeker en die ziet opeens vreemde gegevens terugkomen. Dat zijn dingetjes waar je wel rekening mee moet houden.”

Een andere caching-uitdaging die we tegenkwamen was de twitterfeed van Millin. Op hun site wordt bijna alles gecached, op de twitterfeed na. Deze moet namelijk altijd up-to-date-zijn. We hebben dit opgelost door de output van de twitterfeed niet in WordPress te zetten maar naderhand in te laden via javascript, zo wordt deze automatisch uitgesloten van caching.

“Door componenten naderhand in te laden via javascript worden ze automatisch uitgesloten van caching”

Schakel ook de browser cache uit

Een ander probleem waar je tijdens de implementatie van Varnish rekening mee moet houden is de combinatie van Varnish met de browser cache. Op het moment dat Varnish is uitgesloten, kan je browser cache nog wel werken. Dit zorgt er dan voor dat toch de verkeerde dingen worden ingeladen. Samen met Byter Flip heeft 42functions de oplossing voor dit probleem gevonden. “We hebben uiteindelijk een techniek gevonden die tegen de browser cache zegt dat deze geen cache mag uitserveren als er cookies worden meegestuurd. Op het moment dat er dan cookies aanwezig zijn, die je zelf meestuurt met bijvoorbeeld Google Analytics, wordt de browser caching uitgeschakeld. Varnish doet op dat moment nog wel gewoon haar werk.”

Algemene tips

Nog een belangrijke tip van Ferdy: “ Kijk altijd goed welke plugins je hebt draaien. WordPress is open source en dat betekent dat iedereen hier voor kan bouwen. Niet alle pluginbouwers houden rekening met een mogelijke Varnish-koppeling en dat kan voor fouten zorgen tijdens de implementatie. Maak je gebruik van sessies? Dan wordt caching automatisch uitgeschakeld. Varnish werkt dan dus niet meer.”

“Sommige bouwers zetten (onbedoeld) iets in hun plugin waardoor caching in het geheel niet meer werkt.”

Controleer in je browser of Varnish werkt. Dit doe je door naar de header te kijken. Op het moment dat Varnish draait geeft deze netjes aan dat de pagina gecached kan worden, en belangrijker nog, of de pagina daadwerkelijk uit de cache gehaald is of niet. Als Varnish niet werkt dan zie je of dit komt door no-caching headers of doordat iemand ingelogd is. Als je een no-caching header krijgt is dit meestal het gevolg van een plugin die geen nette techniek heeft. Je browser geeft helaas niet aan welke plugin de boosdoener is, en het vergt dus wat handmatig uitzoekwerk om te achterhalen welke plugin de werking van Varnish verstoort.

“Kijk heel goed in je browser waarom een pagina niet gecached wordt, en of die pagina überhaupt gecached kan worden”.

Het verschil tussen Varnish en Redis

Een andere caching oplossing waar ze bij 42functions veel gebruik van maken is Redis. Het is afhankelijk van hoeveel controle je wilt hebben en wat voor functies je website heeft, welke cachingtechniek voor jou de beste oplossing is. Redis is een goede keuze als je een complexere website hebt die gekke technieken met zich meebrengt. Bij Redis heb je namelijk volledige controle over de cache; dit geeft extra ruimte waardoor je kan kiezen om specifieke onderdelen op de pagina te cachen. Hier komt vaak meer techniek aan te pas omdat je dan richting maatwerk caching oplossingen gaat. Varnish is makkelijker in gebruik, deze werkt op de meeste websites al goed zonder dat hier verdere aanpassingen voor nodig zijn. Ook websites met een winkelwagen kunnen prima met Varnish draaien. Plugins als WP-Ecommerce en Woo-Commerce houden hier al rekening mee door de winkelwagen achteraf in te laden.

Scan je eigen Magento shop op veiligheidslekken