LiteSpeed cache instellen in WordPress

LiteSpeed cache is een cache plugin om WordPress websites sneller te maken. In deze handleiding gaan we de LiteSpeed Cache configureren op de website, zodat je jouw website sneller kunt maken.

Wat ik je wel meteen mee moet geven is dat ‘de beste’ instellingen echt per website verschillen. Je zal dus alle instellingen moeten doornemen en testen welke het beste resultaat voor jouw website geven.

Om alles uit de LiteSpeed Cache plugin te halen zal je website op een LiteSpeed webserver moeten draaien. Gebruik je nog geen LiteSpeed webhosting provider, dan raad ik Cloud86 aan. Dit is een uitstekende LiteSpeed hosting provider waar Webtalis ook zonder problemen op draait.

Voordat we beginnen zal ik je eerst wat meer over caching vertellen en uitleggen of deze cache plugin wel of niet goed is om te gebruiken voor jou.

Wat is caching?

Voordat je aan de slag gaat met caching, is het altijd handig om te weten wat het precies doet. Caching is een techniek die op websites gebruikt wordt om de website sneller te maken en hierdoor automatisch dus ook de prestaties van de website beter maakt.

In simpele woorden kun je dankzij caching tijdelijke kopieën van webpagina’s, afbeeldingen en andere statische content op de server worden opgeslagen, zodat die aan bezoekers van je website kunnen worden voorgeschoteld. In plaats van iedere keer de database om de inhoud vragen die getoond moet worden, kan nu direct een HTML-bestand geladen worden om de website weer te geven. Het zal hierdoor sneller getoond kunnen worden aan een bezoeker.

Het is mogelijk om caching op verschillende niveaus toe te passen. Zo kun je caching actief hebben staan op de server, website, in de browser van de bezoeker of op externe netwerken (bijv. een CDN).

Met de LiteSpeed cache plugin werk je samen met de server, website en browser van je bezoeker om alles zo snel mogelijk te maken.

Is LiteSpeed cache de beste cache plugin om te gebruiken?

Er zijn een hoop cache plugins waar je uit kunt kiezen. Zo zijn LiteSpeed Cache en WP Rocket twee populaire caching plugins waar je gebruik van zou kunnen maken.

Welke plugin handig is voor jouw website hangt af van diverse factoren. Wil je bijvoorbeeld de beste resultaten met zo min mogelijk opties om in te stellen of wil je juist de mogelijkheid om super veel in te stellen? Daarnaast ligt het ook aan je hostingomgeving. LiteSpeed cache is enkel te gebruiken als je op een LiteSpeed server draait. Draait je website hier niet op, dan zal je sowieso voor een andere plugin moeten kiezen om caching voor je website in te stellen.

LiteSpeed Cache is wat mij betreft de beste optie voor als je website op een LiteSpeed server draait. De reden hiervan is dat het een goede integratie heeft tussen de webserver en website. Je kunt optimalisatietechnieken gebruiken die speciaal voor LiteSpeed zijn geoptimaliseerd.

WP Rocket is daarentegen een uitstekende optie als je geen LiteSpeed server gebruikt voor je website. WP Rocket werkt op alle omgevingen en heeft ook een gebruiksvriendelijke interface. Qua opties heb je minder dan bij LiteSpeed Cache, maar dit kun je juist ook als prettig ervaren. Het is hierdoor eenvoudiger om in te stellen op je website en je hebt minder technische kennis nodig.

Maak je dus niet druk om welke plugin het allerbest is, want dit kan dus per website verschillen. Gebruik LiteSpeed Cache op een LiteSpeed server en probeer WP rocket als je een andere hostingomgeving hebt.

Handleiding: LiteSpeed cache instellen op WordPress

Nu je weet wat je kunt bereiken met LiteSpeed Cache, kunnen we de plugin gaan instellen. In deze handleiding zal ik je stap voor stap meenemen door alle instellingen heen, waardoor je deze caching plugin volledig leert kennen.

Ik zal je ook advies geven over hoe ik zelf dingen zou instellen, maar het kan altijd zijn dat het op jouw website net wat andere resultaten geeft. Test dus altijd de snelheid van je website voordat je de plugin instelt. Het is verder ook belangrijk om je website zelf te controleren, want sommige instellingen kunnen problemen opleveren in combinatie met andere plugins.

Wanneer je van de LiteSpeed Cache plugin gebruik wil maken, dan is de eerste stap de plugin natuurlijk downloaden en installeren. Wanneer je dit gedaan hebt krijg je aan de linkerkant een extra menu-item genaamd ‘LiteSpeed Cache’. We gaan per pagina de verschillende mogelijkheden bekijken.

Dashboard

Allereerst kom je in het dashboard van LiteSpeed terecht. Hier kun je de status van geoptimaliseerde afbeeldingen zien, pagina optimalisaties, PageSpeed score, cache status en nog een aantal dingen meer.

Voorinstellingen

Ik raad iedereen aan om vooral de LiteSpeed Cache handleiding door te lopen, zodat je snapt wat alle instellingen doen en wat je opties zijn. Mocht je hier geen geduld voor hebben en voor een ‘quick fix’ willen gaan, dan kun je bij de voorinstellingen terecht. Je kunt hier voor LiteSpeed cache standaardinstellingen gaan. Mocht je iets willen kiezen, dan zou ik voor ‘Gevorderd (Aanbevolen)‘ gaan.

Controleer wel altijd nadat je dit hebt ingesteld of je website nog goed werkt.

Import/Export

Dit is een optie die voornamelijk op een later moment handig is. Wanneer je op een website alles al een keer hebt ingesteld, dan kun je de instellingen exporteren en vervolgens op een andere site weer importeren.

Veel uitleg zal je hier niet over nodig hebben. Het is een kwestie van op ‘Exporteer’ klikken om de instellingen te exporteren en vervolgens kun je het bestand uploaden op een andere website en op de knop ‘Importeer’ klikken.

Mocht je overigens helemaal de weg kwijt zijn en opnieuw willen starten, dan kun je op deze pagina ook op Reset instellingen klikken om ervoor te zorgen dat je terug gaat naar de standaard instellingen en vanaf daar alles weer opnieuw kunt doorvoeren.

Algemeen

Hier begint het eigenlijk echt met de instellingen. We gaan direct aan de slag met een aantal basis instellingen die maar beter meteen geregeld kunnen zijn.

• Voer automatische upgrades uit: Kun je instellen op AAN. Updates worden dan automatisch voor je gedaan, zodat je dit nooit zelf hoeft te doen. Liever zelf alles in eigen hand? Dan kan het op uit.
• Domein sleutel: Het is handig om hier direct een domeinsleutel aan te vragen. Deze zal vervolgens automatisch toegevoegd worden. Je krijgt dan gebruikmaken van QUICK.cloud voor diensten als afbeeldingen optimaliseren, kritische CSS genereren (CCSS), lage kwaliteit afbeelding placeholder genereren en Content Delivery Network (CDN).
• Gast modus: Instellen op AAN. Dit verbetert de laadtijd voor eerste bezoekers door tijd te besparen bij het lezen van cookies, zoeken naar cache-variaties en meer.
• Gast optimalisatie: Instellen op AAN. Dit zorgt voor agressieve optimalisatie van pagina’s en afbeeldingen voor eerste bezoeken (gast modus).
• Server IP: Vul hier het IP-adres van de server van je website in. Je zorgt ervoor dat er minder DNS en CDN verzoeken gedaan hoeven te worden. Weet je het IP-adres van je website niet? Klik dan op de link ‘Controleer mijn publieke IP van DoAPI.us’ en je zal het juiste IP-adres zien.
• Meldingen: Wil je meldingen ontvangen van LiteSpeed wanneer er bijvoorbeeld een nieuwe release is? Je kunt meldingen dan instellen op AAN.

Cache

Bij de Cache instellingen kun je een hoop belangrijke in- of uitschakelen die veel te maken hebben met de snelheid van je website.

• Cache inschakelen: Deze stel je uiteraard in op AAN. Je kunt vervolgens ook testen of alles goed werkt. Ga naar de header check van uptrends.com en controleer of je bij x-litespeed-cache ‘hit’ ziet staan.
• Ingelogde gebruikers cachen: Ik stel dit standaard in op UIT. Je ziet dan zelf altijd de echte versie zonder cache. Heb je echter een online leeromgeving, dan kun je dit op AAN zetten.
• Cache reageerders: Beide mogelijk. Wordt een reactie direct gepubliceerd op je site, dan zet je het op AAN. Moet je het eerst nog controleren, dan zet je het op UIT. De reageerder ziet na zijn reactie niet de pagina in de cache, maar de echte versie waar te zien is dat het nog gecontroleerd moet worden.
• Cache Rest API: Instellen op AAN. De REST API wordt gebruikt door veel thema’s, plugins en de blok editor van WordPress.
• Cache Login Pagina: Instellen op AAN. Door het op aan te stellen help je je server, aangezien deze pagina vaak aangevallen wordt (brute force attacks). Heb je een andere URL genomen om in te loggen, dan kun je het instellen op UIT. LiteSpeeld + QUIC.cloud optimaliseren namelijk alleen de standaard inlogpagina URL.
• Cache Favicon.ico: Instellen op AAN. Deze instelling zorgt ervoor dat de favicon van je website in de cache komt. Een favicon is een icoon die je in het tabblad van je website in de browser ziet.
• Cache PHP Recources: Staat bij mij altijd op AAN. Thema’s en plugins voegen resources toe via een PHP-aanvraag. Met deze instelling cache je pagina’s, waardoor je minder PHP-aanvragen hoeft te doen en de server beter zal presteren.
• Cache mobiel: Dit heeft alleen nut om op AAN te zetten wanneer je verschillende inhoud toont op desktop of mobiel of gebruikmaakt van AMP, CCSS, UCSS of gastmodus en gastoptimalisatie aan hebt staan. In alle andere situaties kun je dit instellen op UIT.
• Cache-URI’s: De Cache URI’s optie zal je vermoedelijk niet nodig hebben. Forceren en afdwingen is over het algemeen niet nodig bij pagina’s van je website. De Privé cache kan de cache ingelogde gebruikers instelling al voor je regelen.
• Zoekopdracht string laten vervallen: Hier kun je eventueel query strings invullen waarbij caching genegeerd moet worden. Standaard staan er al een paar dingen ingevuld zoals fbclid, gclid, utm, _ga. Vaak is dit voldoende en anders zal je wel weten dat er meer nodig is, want het gaat vaak om strings voor marketingdoeleinden.

TTL

TTL staat voor Time To Live. Waarschijnlijk zegt je dit nog steeds niet heel veel. In simpele woorden is het de tijd dat een object in de cache staat voordat het vernieuwd wordt.

Persoonlijk pas ik hier nooit iets aan en laat ik alles op de standaard waarden staan. De enige reden om dit te verkorten is als je mega actief bent op je website en wil dat bezoekers altijd de nieuwste versie van de pagina zien. Het zal dan alleen wel meer vermogen van je server vragen.

Verwijderen

De cache moet regelmatig opgeschoond worden, zodat je bezoekers geen verouderde content te zien krijgen en alles goed blijft functioneren na het updaten van bijvoorbeeld WordPress, plugins en het thema waar je gebruik van maakt.

• Alles opschonen bij upgrade: Altijd instellen op AAN. Dankzij deze optie wist de cache wanneer WordPress, thema’s of plugins up-to-date worden gebracht. Je zorgt ervoor dat je website correct zal blijven werken.
• Automatische verwijderregels: Laat hier alles ingesteld staan zoals het standaard al staat. Dit is een handige optie om je cache goed up-to-date te houden. Wanneer je bijvoorbeeld een artikel op je website publiceert, dan wordt de cache geleegd op belangrijke pagina’s, zodat alles zichtbaar is en goed wordt weergegeven.
• Serveer verlopen content: Zet deze optie op UIT. Indien je toch aan hebt staan, dan wordt een oude versie van de pagina weergegeven als er nog geen nieuwe versie in de cache staat. Dit kan niet de bedoeling zijn.
• Lijst met (geplande) urls: Ik vul hier zelf nooit URL’s in. Je hoeft hier enkel wat in te vullen als je de cache van specifieke pagina’s op een bepaald tijdstip wil laten verwijderen. Indien je hier URL’s invult kun je ook het tijdstip aangeven wanneer de cache gewist mag worden bij geplande verwijder tijd.
• Alle hooks verwijderen: Alles wat hier standaard staat ingesteld is prima. Wanneer bepaalde hooks worden uitgevoerd zal de cache gewist worden.

Uitsluiten

Ik kan er eigenlijk vrij kort over zijn. Zelf heb ik hier op geen enkele website iets ingesteld en dit zal vermoedelijk voor jou ook niet nodig zijn. Alle andere instellingen van de LiteSpeed Cache plugin geven je voldoende controle. Mocht je echter URL’s willen uitsluiten van de cache, dan is dit de pagina waar je moet wezen.

ESI

Met ESI (Edge Side Includes) kun je pagina’s weergeven vanuit cache voor ingelogde gebruikers. Dit is bijna nooit nodig, dus ik schakel dit altijd UIT. De andere instellingen op de pagina doen er eigenlijk niet meer toe, aangezien het toch uitstaat.

Object

Object caching is niet direct beschikbaar op alle LiteSpeed servers. Wil je bijvoorbeeld Object caching gebruiken bij Cloud86, dan zal je minimaal een WordPress hostingpakket moeten afnemen. Dit is iets duurder dan de normale webhosting pakketten, maar je krijgt er wel meer vermogen en opties voor terug.

• Object Cache: Indien je de mogelijkheid hebt kun je dit op AAN zetten. Heb je geen memcached of redis bij je pakket, dan kun je het op UIT laten staan. Wanneer je het op aan zet zal je database in de cache komen. Dit is super handig voor WooCommerce en dynamische websites.
• Methode: Beide opties zijn prima, maar mijn persoonlijke voorkeur gaat uit naar Redis. Vaak staat dit bij je hostingprovider al ingeschakeld en hoef je niks te doen. Heeft je hosting provider alleen Memcached ingeschakeld, dan ga je uiteraard voor deze optie.
• Host: Hoef je vrijwel nooit iets aan te veranderen. Je kunt het op localhost laten staan.
• Poort: Kies de standaard poort voor Redis (6379) of Memcached (11211).
• Standaard Object Levensduur: Laat staan op de standaard 360 seconden.
• Gebruikersnaam en wachtwoord: Vrijwel nooit nodig om in te vullen, dus je hoeft hier niks te doen.
• Redis Database ID: Hier hoef je meestal niks in te vullen, tenzij Redis een ander ID gebruikt (kun je nakijken bij je hosting provider).
• Globale Groepen: Dit kun je laten op de standaard instellingen.
• Cache geen groepen: Dit kun je wederom laten staan op de standaard instellingen. Eventueel zou je extra groepen kunnen toevoegen mocht je dit nodig vinden.
• Blijvende verbinding: Altijd instellen op AAN. Op deze manier wordt de verbinding actief gehouden, waardoor de cache sneller kan werken.
• Cache WP beheer: Heb je een trage WP admin? Je kunt deze optie dan instellen op AAN om de boel te versnellen. Het enige nadeel is wel dat het mogelijk is dat je verouderde gegevens ziet en niet de actuele gegevens. Is je WP admin snel genoeg, dan kun je deze optie op UIT laten staan.
• Sla transients op: Zet dit op AAN als Cache WP beheer op uitstaat. Met deze instelling zorg je ervoor dat je server status meldingen kunt ontvangen (bijv. XXXX is succesvol voltooid).

Browser

De browser van bezoekers van je website kunnen ook dingen onthouden wat ervoor zorgt dat je website voor een bezoeker sneller geladen gaat worden. Een prima optie om te gebruiken wat mij betreft.

• Browser Cache: Altijd instellen op AAN. Je kunt hiermee de laadtijd versnellen bij een volgend bezoek.
• Browser Cache TTL: Kun je op de standaard waarde 31557600 houden. Deze instelling geeft aan bij browsers hoe lang de cache wordt bewaard. Google geeft ook altijd aan dat dit prima 1 jaar kan zijn.

Geavanceerd

Tot slot zijn er bij de cache instellingen van de LiteSpeed cache plugin ook nog een aantal geavanceerde opties. Je hoeft hier over het algemeen niet veel mee te doen, maar één optie vind ik altijd wel interessant en zet ik op aan.

• Login Cookie: Vul hier niks in. Dit is een optie om ervoor te zorgen dat de cache kan onderscheiden wie op welke WordPress-site is ingelogd. Dat zal niet van toepassing zijn op jouw website. Ook wanneer je WordPress Multisite hebt is dit niet nodig.
• Verbeter de compatibiliteit van HTTP/HTTPS: Kun je op UIT laten staan. Dit is enkel nodig wanneer je zowel HTTP als HTTPS gebruikt op je website. Wanneer dit het geval is raad ik je aan om alles om te zetten naar HTTPS. HTTP is niet meer van deze tijd.
• Instant Click: Dit is de enige optie die ik op deze pagina interessant vindt. Deze optie heb ik dan ook ingesteld op AAN. Deze optie zorgt ervoor dat wanneer een bezoeker met de muisaanwijzer over een link beweegt, dat de pagina op de achtergrond alvast wordt klaargezet. Wanneer een bezoeker er vervolgens daadwerkelijk op klikt zal de pagina direct laden. Het enige nadeel van deze optie is dat het iets meer van de server vraagt.

CDN

Een CDN kun je gebruiken om de snelheid globaal te versnellen. Neem bijvoorbeeld een bezoeker uit Amerika. De weg naar een Nederlandse server is dan een stuk langer dan voor iemand die in Nederland woont. De website zal daarom in Amerika trager geladen worden. Met een CDN heb je servers verdeeld over heel de wereld, waardoor er voor iedereen een server relatief dichtbij kan zijn.

Eerlijk gezegd maak ik zelf nooit gebruik van deze optie. De reden hiervan is dat al mijn websites zich richten op de Nederlandse markt. Aangezien mijn server gewoon in Nederland staat voegt een CDN voor mij niet veel toe (blijkt ook uit een aantal snelheidstesten).

Richt je je echter op de internationale markt, dan kan een CDN wel handig zijn om in te schakelen.

• QUIC.cloud CDN: Als je het wil gebruiken zet je dit op AAN. Ga ook naar het tabblad ‘QUIC.cloud CDN instelling’ om je account te koppelen. Wil je geen CDN gebruiken, dan hoef je dit allemaal niet te lezen. Er zijn geen verdere opties.
• Gebruik een CDN mapping: QUIC.cloud’s CDN en Cloudflare maken geen gebruik van CDN mapping, dus je kunt dit bijna altijd op UIT laten staan. Mocht je een subdomein gebruiken voor je CDN, dan kun je het op AAN zetten.
• Te vervangen HTML attribuut: Je kunt de standaard waarde ingesteld laten staan.
• Originele URL’s: Ingesteld laten zoals dat het standaard staan. De enige reden om hier iets aan te passen is als je ene multisite met verschillende domeinen hebt.
• Inbegrepen Directory’s (mappen): Laat ingesteld staan zoals het is. Dit is enkel met wp-content en wp-includes ingevuld. Je zal hier niets hoeven te veranderen, tenzij je WordPress op een niet standaard manier hebt geïnstalleerd.
• Bestandslocatie uitsluiten: Je kunt hier bestandslocaties invullen die je niet vanaf een CDN wil laten tonen en dus altijd via de eigen server. Meestal hoef je hier dus niks in te vullen. Mocht je toch iets willen uitsluiten, dan kun je dit hier invullen.
• Cloudflare API: Wil je geen QUIC.cloud CDN gebruiken, maar liever Cloudflare’s CDN? Je kunt hier Cloudflare aanzetten en met de API sleutels goed koppelen aan je website.

Afbeeldingen optimaliseren

Op alle websites staan wel afbeeldingen en het is belangrijk voor de snelheid van je website om deze zo goed mogelijk te optimaliseren. Het is verstandig om dit voor het uploaden al te doen, maar ook na het uploaden zijn er nog verschillende optimalisatie mogelijkheden voor afbeeldingen. Bekijk dus vooral de afbeelding optimalisatie instellingen in de LiteSpeed Cache plugin.

• Cron-taak voor verzoeken: Dit kun je instellen op AAN. Er wordt dan automatisch een verzoek verzonden om een afbeelding te optimaliseren die je nieuw hebt geüpload.
• Cron-taak voor ophalen: Deze instelling moet ook AAN worden gezet, anders werkt de cron-taak voor verzoeken ook niet goed.
• Optimaliseer originele afbeeldingen: Stel dit in op AAN. De LiteSpeed cache zal dan de afbeeldingen die je upload optimaliseren om de bestandsgrootte zo klein mogelijk te maken.
• Verwijder originele back-ups: Deze optie zet ik altijd op UIT. Het originele bestand is dan altijd nog beschikbaar. Stel je het in op AAN, dan wordt het originele bestand weggegooid. Je kunt de optimalisatie dan nooit ongedaan maken, ook niet als je er ontevreden bent.
• Optimaliseer zonder kwaliteitsverlies: Stel dit in op AAN. Op deze manier zal de kwaliteit van je afbeelding goed zijn na het optimaliseren. Optimaliseer je wel met kwaliteitsverlies, dan kan het zijn de afbeelding er minder goed uit komt te zien.
• Behoudt EXIF/XMP-gegevens: Ik stel dit altijd in op UIT. Het verwijderen van EXIF/XMP-gegevens zorgt er automatisch voor dat de bestandsgrootte van een afbeelding kleiner wordt.
• Afbeeldingsformaat veranderen in WebP: Dit kun je instellen op AAN. WebP is een afbeeldingsformaat die qua bestandsgrootte vaak het kleinst is en tegenwoordig overal goed kan worden weergegeven.
• Te vervangen WebP attribuut: Meestal zijn de standaard elementattributen die hier al zijn ingevuld voldoende. Mocht je nog meer elementattributen willen vervangen voor WebP, dan kun je dit hier invullen.
• WebP voor extra srcset: Dit kun je instellen op AAN. Met deze instelling zorg je ervoor dat afbeeldingen buiten de WordPress logica, dus bijvoorbeeld in custom code, ook in WebP-formaat worden weergegeven.
• Beheer kwaliteit afbeeldingen in WordPress: WordPress optimaliseert automatisch al afbeeldingen wanneer je deze upload. Standaard staat de kwaliteit hiervan ingesteld op 82%. Vroeger (voor WordPress 4.5) was dit 90%. Bij deze optie kun je aangeven welke compressiekwaliteit je wil gebruiken. Ik ben er een beetje tussen gaan zitten met 85%.

Pagina optimalisatie

De pagina optimalisatie instellingen hebben ontzettend veel invloed op je website. Dit is het gedeelte waar je het meest moet gaan controleren of je website nog goed blijft functioneren, omdat bepaalde plugins soms voor conflicten zorgen. Ga er dus niet blind vanuit dat wat voor mij werkt, ook direct voor jou werkt. Ik zal je in ieder geval mijn best doen om je zoveel mogelijk informatie te geven zodat je weet wat alles is.

CSS

CSS wordt op een website gebruikt voor de vormgeving. Denk aan alle kleuren, lettertypes, groottes en nog veel meer. Alle plugins en thema’s zorgen weer voor extra CSS. Het is daarom verstandig om dit te optimaliseren, zodat het zo snel mogelijk geladen wordt. Hieronder volgen de CSS instellingen die je in LiteSpeed hebt.

• Verklein CSS: Kun je bijna altijd probleemloos instellen op JA. Je zorgt er met deze instelling voor dat onnodige tekens en witruimtes uit je CSS-code worden verwijdert.
• Bundel CSS: Ik schakel deze zelf UIT. Met deze instelling maak je van alle CSS-bestanden één groot bestand. Dit werd altijd vaak gebruikt maar sinds HTTP/2, waar bestanden tegelijkertijd geladen kunnen worden, is dit zeker niet altijd meer nodig. Mocht je UCSS willen gebruiken zal je dit echter wel op AAN moeten zetten.
• Genereer UCSS: Staat bij mij op AAN. Met deze optie kun je ongebruikte CSS verwijderen. Je zal hiervoor wel je cache moeten koppelen met QUIC.cloud en je zal de opties Cache Mobiel en Bundel CSS ook ingeschakeld moeten hebben om het perfect te laten werken. Test het vooral eens uit of dit goede resultaten geeft op jouw site. De reden waarom ik het aan heb gezet is omdat dit mijn CLS probleem heeft opgelost.
• UCSS Inline: Stel ik altijd, maar dan ook altijd, in op UIT. Het kan betere scores opleveren in Google PageSpeed, maar voor je daadwerkelijke bezoekers is het nadelig. Inline CSS kan namelijk niet in de cache terechtkomen, waardoor je het beter als apart bestand kan laden.
• CSS Combineer extern en inline: Heb ik ingesteld op UIT. Het heeft alleen nut om in te schakelen wanner je CSS combineren ook hebt ingeschakeld. Deze optie helpt bij het behouden van de prioriteiten in de CSS uitvoering. Dit zorgt er dan weer voor dat potentiële fouten geminimaliseerd zouden moeten worden wat veroorzaakt kan worden door het bundelen van CSS.
• CSS asynchroon laden: Op sommige websites werkt dit uitstekend. Zet het dus gerust op AAN en test het uit. Bij mezelf had ik last van een klein moment dat er geen opmaak was voor mijn content en dat vond ik niet fijn voor mijn bezoekers. Ik heb het daarom zelf op UIT staan op Webtalis, maar op een aantal andere websites van mezelf heb ik op AAN staan. Kortom, TEST het vooral uit.
• CCSS Per URL: Stel dit in op UIT. Je kunt hiermee critical CSS genereren. Wanneer je asynchroon laden uit hebt staan werkt dit in mijn ervaring nooit helemaal lekker. Je kunt het dus wel uittesten als je asynchroon laden ingeschakeld hebt staan.
• Inline CSS Async Lib: Stel in op UIT als je asynchroon laden ook hebt uitgeschakeld. Anders zou je het kunnen uittesten en op AAN zetten om te kijken of het voorkomt dat de weergave geblokkeerd wordt (melding die je Google PageSpeed kunt zien). Als je hier überhaupt last van hebt natuurlijk.
• Optimalisatie lettertypeweergave: Stel dit in op SWAP. Hiermee voorkom je fouten als dat je ervoor moet zorgen dat er altijd tekst zichtbaar is tijdens het laden.

JavaScript (JS)

Net als met CSS, kan ook JavaScript voor problemen zorgen in combinatie met een cache plugin. Dit komt omdat alle plugins en thema’s ook weer JavaScript met zich meebrengen. Controleer dus wederom ontzettend goed of alles nog goed blijft werken op je website.

• Verklein JS: Kun je instellen op AAN. Hiermee zorg je ervoor dat onnodige tekens en witruimtes worden verwijdert uit je JavaScript-bestanden.
• Bundel JS: Stel ik zelf altijd in op UIT. In combinatie met HTTP/2 is dit niet nodig om in te schakelen (meerdere bestanden kunnen tegelijkertijd geladen worden). Stel je dit in op AAN, dan zal er één groot JS-bestand gemaakt worden van alle kleine JS-bestanden. Vaak levert dit problemen op, maar test gerust uit wat beter op jouw website werkt.
• JS combineer extern en inline: Heb ik ingesteld op UIT. Het heeft enkel nut om in te schakelen wanner je JS combineren ook hebt ingeschakeld.
• Stel laden JS uit: De beste optie wisselt per website. De opties uitgesteld en vertraagd houden de verwerking van JavaScript vast totdat de HTML volledig is geladen. Het verschil zit hem in de timing hiervan. Zelf heb ik op deze website het beste resultaat met UITGESTELD, terwijl het wellicht vaker voorkomt om hier voor VERTRAAGD te gaan. Het ding is dat de verschillende opties in combinatie met je website je website kapot kunnen maken. TEST dus vooral uit wat bij jou het beste werkt.

HTML

• Verklein HTML: Kun je instellen op AAN. Het verwijdert onnodige witruimte uit je HTML code. Wanneer je alles in de code wel goed wil zien en niet op 1 regel, dan kun je het op UIT zetten (dat is mijn reden). Voor snelheid is verkleinen echter beter.
• DNS Prefetch: DNS Pretching zorgt ervoor dat je domeinnamen kunt oplossen (een DNS-lookup op de achtergrond kunt uitvoeren) voordat een gebruiker op een link klikt. Dit helpt de snelheid te verbeteren.
• DNS Prefetch beheren: Je kunt dit op AAN zetten. DNS Prefetching is dan actief voor alle URL’s in het document, dus ook voor afbeeldingen, CSS en JavaScript.
• HTML Lazy-Load Selectoren: Je kunt ervoor kiezen om HTML content te lazy loaden. Het wordt dan pas geladen zodra het (bijna) in beeld is bij een bezoeker op je website. Je zal hiervoor de selector moeten aangeven. Dit is meestal een id of class die je terug kan vinden in de HTML code. #comments en #footer zijn wat dat betreft een no-brainer om in te vullen.
• Verwijder query strings: Ik heb dit ingesteld op AAN. Er zijn mensen die zeggen dat dit al verouderd is en niet meer nodig, maar zelfs dan is het handig om query strings te verwijderen. Vaak kun je namelijk de versie van een plugin terugzien, wat slecht is voor de veiligheid van je website (indien je een verouderde versie hebt).
• Google Fonts asynchroon laden: Gebruik je Google Fonts, dan zou je moeten testen of aan of uit het beste voor jou werkt. Bij mij was dit de optie UIT.
• Verwijder Google Fonts: Indien je geen lettertype gebruikt via Google Fonts en je lettertypes lokaal host, kun je deze optie op AAN zetten. Gebruik je wel Google Fonts (meestal is dit wel zo), dan kun je deze optie op UIT laten staan.
• Verwijder WordPress Emoji: Ik stel dit op alle websites in op AAN. Emoji’s van WordPress kosten weer extra laadtijd en dit is onnodig.
• Verwijder noscript tags: Wanneer je deze optie op UIT instelt, zorg je voor compatibiliteit met alle browsers, inclusief oudere versies die geen JavaScript ondersteunen. Mijn website wordt niet echt bezocht door mensen met oude browsers, daarom heb ik het op AAN staan.

Media

Bij de media instellingen in de LiteSpeed cache plugin heb je onder andere invloed op lazy loading, responsive plaatshouders en het toevoegen van ontbrekende afmetingen op je website. Volg niet alleen de instellingen zoals ik het hieronder op de afbeelding heb ingesteld. Dit is bij mijn eigen website en ik gebruik een andere tool om bepaalde dingen te regelen, waaronder dus lazy loading.

• Lazy-Load afbeeldingen: Kun je instellen op AAN. Wil je een vervagingseffect (fade) toevoegen, zodat het er net wat soepeler uitziet. Bekijk in de LiteSpeed documentatie de code.
• Eenvoudige tijdelijke opvulling voor afbeelding: Wanneer je Lazy Load hebt ingeschakeld, wordt een grijs vak weergegeven als tijdelijke aanduiding totdat een afbeelding kan worden geladen. Wil je iets anders tonen, dan kun je hier je eigen base64-afbeelding invullen.
• Responsive plaatshouder: Gebruik je een eenvoudige tijdelijke opvulling, dan kun je deze optie op UIT instellen. Gebruik je geen eenvoudige tijdelijke opvulling, dan kun je dit op AAN zetten.
• Responsive plaatshouder SVG: Dit kun je ingesteld laten zoals het standaard staat.
• Kleur van responsive plaatshouder: Je kunt hier de kleur voor de plaatshouder hierboven invullen. Ik laat dit persoonlijk altijd op de standaard kleur die staat ingesteld, maar je kunt iedere kleur kiezen die je maar zou willen.
• LQIP genereren in Cloud: Dit kun je instellen op AAN. Er wordt dan een afbeelding van lagere kwaliteit gebruikt als tijdelijke plaatshouder. Deze afbeelding wordt door QUIC.cloud gegenereerd.
• Kwaliteit LQIP: Kun je op de standaard waarde 4 houden. Dit is enkel van toepassing als je de optie hierboven op aan hebt staan.
• Minimale afmetingen LQIP: Kun je op de standaard waarde van 150×150 pixels laten staan. Je geeft hiermee aan dat voor afbeeldingen groter dan dit formaat een LQIP afbeelding gegeneerd moet worden.
• Maak LQIP aan in de achtergrond: Kun je instellen op AAN. Dit zorgt ervoor dat LQIP automatisch op de achtergrond wordt uitgevoerd. Wanneer je dit uitzet, zal het de laadtijd van de pagina vertragen.
• Lazy-Load Iframes: Kun je het best instellen op AAN. Op deze manier kunnen pagina’s waarop video’s, google maps en andere iframes geladen worden sneller laden.
• Ontbrekende afmetingen toevoegen: Altijd instellen op AAN. Mocht er ergens op de website een afbeelding ingeladen worden zonder afmetingen, dan zal dit automatisch voor je geregeld worden. Je zorgt op deze manier ervoor dat de pagina niet verspringt als een afbeelding geladen wordt. Het zal ook je Core Web vitals score in Google verbeteren.

Viewport Afbeeldingen (VPI)

VPI staat voor “Viewport Images” en is een service waarmee je afbeeldingen boven de vouw (above the fold) kunt uitsluiten van lazy loading. Dit is handig, want afbeeldingen die direct getoond worden hoeven tenslotte niet door het lazy loading proces.

• Viewport afbeeldingen: Instellen op AAN. Er zal voor je gedetecteert worden welke afbeeldingen boven de vouw staan, waarna deze uitgesloten worden voor vertraagd laden (lazy loading). Je zal hierdoor een betere Largest Contentful Paint (LCP) score krijgen.
• Viewport afbeeldingen Cron: Wederom instellen op AAN. Je zorgt er hiermee voor dat de viewport afbeeldingen automatisch op de achtergrond worden gegenereerd.

Media uitzonderingen

Wanneer je lazy loading in combinatie met VPI aan hebt staan, denk je wellicht dat je geen media uitzonderingen nodig hebt. Hoewel dit best het geval kan zijn, kan het nooit kwaad om er zeker van te zijn dat bepaalde afbeeldingen op alle pagina’s worden uitgesloten. Denk bijvoorbeeld aan je logo in de header.

• Afbeelding(en) uitsluiten van lazy-load: Je kunt hier URL’s of gedeeltes van een URL van je afbeeldingen toevoegen om deze uit te sluiten voor lazy loading. Doe dit enkel voor afbeeldingen die structureel bovenaan je website zichtbaar zijn. Denk aan je logo of afbeeldingen in je sidebar als je die hebt.
• Uit te sluiten afbeelding klassen voor lazy-load: Wil je zelf kunnen aangeven bij een afbeelding of het uitgesloten moet worden, dan kun je hier een klasse noemen. Bijvoorbeeld ‘nolazy’. Je kunt dit dan als CSS class instellen bij een afbeelding, waarna de afbeelding wordt uitgesloten van de lazy-load functionaliteit. Je kunt ook kijken naar de klasse van je uitgelichte afbeelding en die hier invoeren, aangezien de uitgelichte afbeelding altijd bovenaan de pagina wordt getoond.
• Lazy-load afbeelding naam van hoofd klasse: Maak je gebruik van een pagebuilder en heb je bijvoorbeeld een rij (sectie) waarbij alles uitgesloten moet worden van lazy loading? Je kunt de rij dan een CSS class meegeven. Door deze klasse hier ook in te vullen zorg je ervoor dat alles in de rij uitgesloten wordt.
• Lazy-load iframe klasse naam uitsluiting: Geef een klasse op die je wil gebruiken om iframe uit te sluiten van lazy loading.
• Uitsluiten lazy load iframe op hoofd klasse attribuut: Hier gaat het weer om alle iframe uit te sluiten binnen een bepaalde klasse op hoger niveau (bijvoorbeeld via een css klasse van een rij/sectie).
• Voorkom lazy-load per URI: Wil je op een specifieke pagina van je website helemaal geen gebruik maken van lazy loading? Je kunt hier de URL van de pagina invullen.
• LQIP uitsluitingen: Heb je bij Media LQIP aanstaan? Je kunt hier afbeeldingen aangeven waar geen LQIP van gemaakt wordt.

Lokalisatie

Bij de lokalisatie instellingen kun je zoals je vermoedelijk al verwacht, bepaalde onderdelen op je website lokaal maken.

• Gravatar Caching: Heb je de reactiemogelijkheid op je website ingeschakeld, dan kun je te maken krijgen met Gravatar afbeeldingen. Stel deze optie in op AAN. Heb je op heel je website de reactiemogelijkheid uitgeschakeld, dan kun je deze optie op UIT laten staan.
• Gravatar Cache door Cron-taak: Stel dit in op AAN als je Gravatar caching aan hebt staan.
• Gravatar Cache TTL: Je kunt hier instellen hoe lang Gravatars in de cache bewaard blijven. De standaad waarde van 604800 (1 week) is prima.
• Lokaliseer bronnen: Ik stel dit altijd in op AAN. Op deze manier kun je externe JS-bestanden lokaal op je website draaien. Test wel of alles goed blijft werken.
• Lokalisatie bestanden: Dit is de plek waar je externe code kunt toevoegen om lokaal te laden. Je kunt hier van alles toevoegen. Denk aan code van Twitter, Facebook, Google Analytics, Google Tag Manager en andere externe codes die je op je website gebruikt.

Fijninstelling

Ik ga de fijninstellingen niet mega uitgebreid behandelen. De reden hiervan is dat wat je moet toevoegen per website enorm kan verschillen. Bij de fijninstellingen hoef je alleen te komen wanneer bepaalde scripts of css-bestanden je website kapot maken. Ik zal de fijninstellingen voor JavaScript laten zien.

Wanneer je op je website merkt dat een functionaliteit niet meer werkt nadat je een cache instelling hebt aangezet, kun je uitzoeken hoe dit komt. Bij mij werkte bijvoorbeeld de pop-ups niet meer om je te abonneren op mijn mailinglijst. Je zal dan in de code moeten gaan uitzoeken welk javascript bestand dit veroorzaakt. In mijn geval moest ik een JavaScript bestand van Convertbox uitschakelen, waarna de rest netjes in de cache kon blijven en de website ook goed functioneerde. Naast dat je scripts kunt uitsluiten, kun je bij URI uitsluitingen ook aangeven dat je op een specifieke pagina niks wordt geoptimaliseerd. Bij de CSS fijninstellingen werkt het zo’n beetje hetzelfde.

Database optimalisatie

Met de database optimalisatie tool van LiteSpeed cache kun je op een eenvoudige manier de database van je website opschonen. Bij database wijzigingen raad ik wel altijd aan om vooraf een backup te maken van je website.

Om je database op te schonen is het een kwestie van klikken op ‘alles opschonen’ om direct alles te doen. Wil je het per onderdeel doen, dan kun je op het onderdeel (bijv. verlopen transients) klikken wat je wil laten optimaliseren.

Database optimalisatie instellingen

Revisies nemen op de meeste websites veel ruimte in de database in beslag. Dit is in veel gevallen overbodig en daarom kun je hier in de LiteSpeed cache plugin de revisies beperken.

• Aantal te bewaren revisies: Ik heb dit ingesteld op 3. Bepaal voor jezelf wat een goed aantal voor jouw website is. Als ik 3 versies terug kan gaan, ben ik in ieder geval al tevreden. Sommige vinden 10 revisies een prettiger gedachte.
• Maximale leeftijd revisies: Ik heb dit ingesteld op 0. Ik bewaar niet veel revisies, maar de revisies die ik heb wil ik wel behouden. Ik update niet altijd even snel weer een artikel en soms is het na lange tijd alsnog fijn om een revisie te kunnen bekijken.

Crawler

Bij de Crawler instellingen hoef je eigenlijk niks te doen. Het kost veel vermogen van je service om dit aan te zetten. Het wordt dan ook niet door alle hosting providers toegestaan als je shared hosting hebt. Me je eigen VPS zal het wel kunnen, maar dan zou ik er persoonlijk alsnog niks mee doen. Mocht je het toch aan willen zetten, dan zou ik voornamelijk de standaard instellingen gebruiken.

• Crawler: Stel dit in op AAN als je het wil gebruiken (doe dit enkel als je een eigen server hebt). Het verbruikt best wat vermogen van je server, dus controleer of je website er niet trager door wordt of dat je tegen limieten aanloopt.
• Vertraging: De standaard waarde van 500 is in bijna alle gevallen goed genoeg.
• Actieve run: Wederom zou ik dit gewoon op de standaard waarde laten staan, wat in dit geval 400 is. Je kunt het eventueel verhogen mocht je dit willen.
• Tijd tussen de runs: Laat het op 600 staan. Is de server vaak inactief, dan kun je het getal verlagen.
• Crawl interval: Je hoeft niet dagelijks een crawl te laten uitvoeren. De standaard waarde van 302.400 zorgt ervoor dat het iedere 3,5 dagen, dus 2x per week word uitgevoerd.
• Threads: Laat het op de standaard waarde van 3 staan. Stel je dit hoger in, dan zal er ook meer CPU gevraagd worden van je server.
• Time-out: Je kunt dit ingesteld houden op 30. Dit geeft de crawler voldoende tijd voor iedere pagina op je website. Mocht je een ontzettend grote website hebben, dan zou je de waarde eventueel kunnen ophogen.
• Server load limiet: Het is belangrijk om je server niet te overbelasten. Hoeveel cores heeft je server is in dit geval de vraag. Bij 1 core ga je voor 0.5. Bij 2 cores voor 1, bij 4 cores voor 2 en ga zo maar door. Controleer altijd of deze instelling er niet voor zorgt dat je server overbelast raakt.

Toolbox

In de toolbox kom je een aanal onderdelen tegen die je ook al op andere plekken hebt gezien in de plugin. Denk aan de functie om instellingen te importeren en exporteren en de database te optimaliseren. Ook staan hier onderdelen in waar je niks aan kunt doen, behalve de info bekijken. Dit is bij ‘Bekijk .htaccess‘ en ‘Bekijk log’. Ik zal dus alleen de dingen behandelen waar je ook daadwerkelijk iets kunt instellen.

Hartslag

Met Hartslag, wat beter bekend staat als WordPress Heartbeat, kun je de serverbelasting verminderen. Het is alleen wel belangrijk om goed op te letten, omdat het ook negatieve invloed kan hebben. Zo kan het voorkomen dat AJAX-taken niet goed worden uitgevoerd.

• Frontend Heartbeat Control: Kun je instellen op AAN, zodat je de heartbeat op de frontend kun beheren.
• Frontend Heartbeat TTL: Afhankelijk van je website kun je dit op 0 (uit) zetten. Ondervind je problemen, dan kun je het op de standaard waarde van 60 laten staan of ophogen naar 120 seconden.
• Backend Heartbeat Control: Kun je instellen op AAN. In dit geval gaat het om de heartbeat in het beheerdersgedeelte van je website.
• Backend Heartbeat TTL: Laat ik op de meeste websites ingesteld staan op de standaard waarde van 60. Je kunt het uitzetten en testen of alles nog steeds goed blijft functioneren.
• Editor Heartbeat: Kun je instellen op AAN om de controle over heartbeat in de editor van WordPress te krijgen.
• Editor Heartbeat TTL: De standaard waarde van 120 seconden is prima. Ik zou het zelf nooit op 0 (uit) zetten, want wanneer je dit doet slaat WordPress bijvoorbeeld niet automatisch eens in de zoveel tijd het artikel waarmee je bezig bent in de editor op.

Debug instellingen

Bij de debug instellingen hoef je hopelijk nooit te komen. Je hoeft hier enkel te zijn met je website als je problemen hebt. Ik heb het zelf nog nooit hoeven te gebruiken. Wel kan ik mij voorstellen dat het fijn voor je is om te weten hoe het werkt mocht je het wel nodig hebben.

• Schakel alle functies uit: Zet deze optie enkel op AAN als je problemene ervaart en je website moet debuggen zonder caching of optimalisatie functionaliteiten. Vergeet het niet uit te schakelen als je klaar bent, want anders zal je website geen gebruik maken van caching.
• Debug log: Zet dit enkel op AAN bij het debuggen. Er zal een debug log gemaakt worden die je terug kunt vinden via wp-content/debug.log.
• Admin IP-adressen: Vul je IP-adres in om debugacties uit te voeren vanuit je browser.
• Foutopsporing niveau: Ga voor de optie die je nodig hebt. Je kunt standaard eerst Basis proberen. Heb je meer informatie nodig, dan kun je voor Geavanceerd kiezen.
• Limiet logbestand: Hier kun je aangeven hoe groot het logbestand maximaal mag worden. Standaard staat het ingesteld op 3MB. Heb je een groter logbestand nodig, dan kun je een hogere waade invoeren.
• Log Cookies: Zet AAN indien het nodig is om cookie waarden bij te houden.
• Query strings samenvouwen: Verkort query strings in het debug logbestand om de leesbaarheid te verbeteren. Zet op AAN indien dit nodig is.
• Debug URI bevat: Heb je enkel problemen op een aantal specifieke pagina’s? Je kunt dan hier de URL’s van deze pagina’s invoeren, zodat je enkel hier een log van krijgt.
• Foutopsporing URI uitsluitingen: Wil je een paar pagina’s uitsluiten uit je debuglog, dan kun je hier de URL’s van de pagina invoeren.
• Debug string uitsluitingen: Hier kun je query strings aangeven die je wil uitsluiten uit je debuglog.

Veelgestelde vragen over LiteSpeed Cache

Ondanks deze complete handleiding om de LiteSpeed cache plugin in te stellen, zit je wellicht nog met een aantal vragen. Ik behandel daarom hieronder meerdere veelgestelde vragen, zodat jij in dit artikel hopelijk echt al je antwoorden hebt gevonden.