Cloudflare CDN caching installeren WordPress website handleiding

Cloudflare CDN caching is een een mooie oplossing als je op zoek bent naar een eenvoudige manier om de beveiliging van je WordPress site wil verbeteren en je website sneller wil maken. Lees de Nederlandse handleiding voor starters. Enige kennis van WordPress is vereist.

WordPress website sneller maken met CDN van Cloudfare

Zoals ik al heb uitgelegd in mijn handleiding om de snelheid van een WordPress site te optimaliseren, is een CDN een netwerk van servers die zich over de hele wereld bevinden.
Handleiding snelheid van WordPress website meten en optimaliseren

Hoe werkt Cloudfare CDN?

Het idee is heel simpel: je WordPress website wordt gekopieerd op alle servers van het netwerk en wanneer een gebruiker surft op je WordPress website, ontvangt hij de inhoud van de dichtstbijzijnde server. Stel u voor dat u in Australië bent en u zoekt informatie over onze reisblog. Aangezien de server in Nederland staat, zal elk http verzoek veel langer duren omdat het de oceaan moet oversteken naar Nederland en weer terug moet komen naar Australië 😉 . Als je een kopie van je site op een server in Australië hebt staan, zullen de verzoeken uiteraard veel sneller gaan!

We kunnen in dit plaatje zien dat hoe verder we van Nederland af gaan, hoe trager de site wordt. U kunt deze test doen op deze site

 

Het klinkt eenvoudig als je het zo stelt, maar als je wat dieper op de details ingaat, zul je zien dat het niet zo triviaal is om het op te zetten (maar maak je geen zorgen, ik laat je zien hoe je het moet doen).

Heb ik een CDN nodig voor mijn WordPress site?

Dit is waarschijnlijk de eerste vraag die je zult willen beantwoorden. Je zou moeten overwegen een CDN te installeren als je één of meer van deze vragen met ja beantwoordt:

  • Heeft u een internationaal lezerspubliek? Als een aanzienlijk deel van uw lezers (meer dan 20%) je WordPress website vanaf de andere kant van de wereld bezoekt, kan het verstandig zijn om een CDN te installeren.
  • Heeft u de indruk dat uw hostingplan niet toereikend is voor uw verkeer? Zo ja, dan kan een CDN de bandbreedte (het volume van overgedragen bestanden) op uw oorspronkelijke server aanzienlijk verminderen door een groot deel van de bestanden van je WordPress website over te brengen naar de servers van het CDN.
  • Bent u het slachtoffer geweest van DDoS-aanvallen? Bij dit soort aanvallen wordt veel verkeer tegelijk naar de server van je WordPress website gestuurd om deze buiten werking te stellen. Dankzij een CDN heb je een heel netwerk van servers tot je beschikking en zal het veel moeilijker zijn om deze uit te schakelen.

Dit zijn best goede redenen om een SSC op te zetten, nietwaar? Maar zoals u hieronder zult zien, is Cloudflare geen traditioneel CDN en kunt u er nog veel meer mee doen. Maar om te begrijpen hoe het allemaal werkt, laten we eens kijken wat Cloudflare anders maakt dan meer traditionele CDN’s.

De verschillen tussen Cloudflare en een traditioneel CDN

Cloudflare en alle andere CDN’s hebben hetzelfde doel: uw website over de hele wereld sneller maken. Maar ook al is het doel hetzelfde, de manier waarop Cloudflare werkt is heel anders dan die van de meeste andere CDN’s.

Cloudflare: reverse proxy, domeinregistrator en nog veel meer

Cloudflare is wat wij noemen een “reverse proxy” en je hebt misschien geen idee wat deze barbaarse termen betekenen (we zullen proberen het eenvoudig te houden). In feite, om Cloudflare te gebruiken, moet je je domeinnaam naar Cloudflare wijzen. Het resultaat is dat Cloudflare alle verzoeken van je bezoekers onderschept nog voor ze je origin server bereiken en er dan zo goed mogelijk gebruik van maakt (bv. informatie ophalen bij de dichtstbijzijnde server). Dat is ook de reden waarom wanneer u Cloudflare gebruikt, al uw inhoud nog steeds wordt geladen vanaf uwsite.com, terwijl bij een traditioneel CDN uw inhoud wordt geserveerd vanaf een nieuwe url zoals cdn.uwsite.com.

afbeelding krediet Cloudflare

 

Deze aanpak geeft Cloudflare veel controle over uw website, waardoor ze meer kunnen doen dan “alleen” uw inhoud afleveren vanaf de dichtstbijzijnde server:

  • Cloudflare is de 2e grootste domeinnaam provider na GoDaddy maar heeft bovenal de snelste DNS. We praten echter niet veel over Cloudflare en tot voor kort wist ik niet dat ze het mogelijk maken om domeinnamen te kopen. Dus ik denk dat ik waarschijnlijk mijn domeinnamen beetje bij beetje naar hen zal verhuizen, omdat ze geen extra kosten in rekening brengen (zoals GoDaddy bijvoorbeeld).
  • Cloudflare beveiligt uw website in geval van DDoS of andere aanvallen
  • Als u net als ik ooit een webserver hebt ingesteld (apache, nginx of andere), weet u dat het snel ingewikkeld kan worden. Dankzij de “reverse proxy”-configuratie kunt u met Cloudflare eenvoudig paginaregels definiëren vanuit de interface zonder het configuratiebestand van uw server aan te raken (maar daar hebben we het later over).
  • Als u nog steeds niet bent overgeschakeld op HTTPS, kunt u dankzij de configuratie van Cloudflare HTTPS in 1 klik activeren met gratis SSL-certificaten.
  • Cloudflare heeft het grootste server netwerk met meer dan 200 locaties wereldwijd. Het is bij mijn weten de enige provider die zijn CDN gratis aanbiedt. In feite gebruikt bijna 13% van alle websites Cloudflare om hun prestaties te verbeteren!
  • Naast traditionele CDN’s kunt u met Cloudflare ook de prestaties van uw website optimaliseren door uw bestanden te comprimeren (gzip, brotli…), automatische minificatie van uw css/js-bestanden, Http2, TLS 1.3 etc…

 

Het Cloudflare CDN-servernetwerk. Stel je voor dat je een kopie van je site op elk van deze servers hebt (Clouflare image credit)

 

Meer traditionele CDN’s

Bij een meer traditioneel CDN hoeft u uw domeinnaam niet naar het CDN te verwijzen. Maar omdat deze CDN’s uw domeinnaam niet controleren, kunnen ze uw inhoud niet automatisch vanaf de dichtstbijzijnde server serveren. Daarom moet je er bij een traditioneel CDN voor zorgen dat de url’s van je bestanden (afbeeldingen, css, js etc…) herschreven worden van bijvoorbeeld yousite.com naar cdn.yousite.com. In het algemeen, de meeste cache plugins (w3 total cache, wp rocket…) kunt u dit gemakkelijk doen door het invoeren van de url van uw CDN in de parameters. Traditionele CDN’s zullen dan automatisch de inhoud van je WordPress website “trekken” en verspreiden over hun netwerk van servers. Telkens wanneer een bezoeker een verzoek indient met de url cdn.yoursite.com, zal het bestand dus worden afgeleverd door de dichtstbijzijnde server. Enkele voorbeelden van traditionele CDN’s:

  • Amazon Cloudfront
  • Key CDN
  • StackPath
  • Bunny CDN
  • Jetpack (misschien is het u opgevallen dat als u de afbeeldings CDN optie van Jetpack heeft geactiveerd, de url’s van al uw afbeeldingen anders zijn)

Hoe Cloudflare in te stellen op uw WordPress site

Wel moet ik toegeven dat toen ik besloot een CDN in te stellen op deze site, ik verwachtte te gaan betalen voor deze dienst (we betalen al voor veel tools zoals zoekwoordenonderzoek, e-mails, afbeelding optimalisatie, backups, goede hosting etc…). Maar, na veel onderzoek op het net, bleek dat Cloudflare een tool was die vrij gemakkelijk op te zetten was en bovenal gratis was voor de meeste van zijn gebruikers (er zijn betaalde opties, maar voor een wordpress site is de gratis versie meestal voldoende). En eerlijk gezegd, ik kon het niet geloven totdat ik het zelf instelde! Dus laten we samen eens kijken hoe je Cloudflare op je WordPress site installeert.

Teken in bij Cloudflare en wijs je domeinnaam aan naar Cloudflare

Ik geef toe dat deze stap me een beetje bang maakte (mijn domeinnaaminstellingen zijn een beetje ingewikkeld)… maar ik had het mis. Hier zijn de stappen om Cloudflare handmatig te activeren: Note: Bij sommige populaire hostingproviders zoals Siteground kunt u Cloudflare eenvoudiger activeren vanuit uw cpanel. Maar als u deze optie niet heeft, zult u te werk moeten gaan zoals hieronder beschreven.

  • Maak een Cloudflare-account
  • Voeg uw domeinnaam toe en laat Cloudflare uw DNS-records scannen (kies het gratis pakket)
  • Controleer of al je records (A, MX, TXT, NS…) er zijn en controleer of er een klein oranje wolkje staat naast je domeinnaam en alle subdomeinen die je wilt cachen op het Cloudflare CDN.
  • Log in op je domeinnaam host en wijs je domeinnaam naar de server van Cloudflare (als je je domeinnaam bij Cloudflare hebt gekocht, is deze stap nutteloos)
    Vul nameserver 1 en 2 in.
  • Wacht tot 24 uur voor de verandering om te verspreiden (wat mij betreft duurde het 1-2 uur om te verspreiden). U ontvangt een e-mail van Cloudflare waarin wordt bevestigd dat je WordPress website actief is.

Het instellen van de Cloudflare CDN voor WordPress

Ondanks dat Cloudflare zeer eenvoudig in gebruik is, wordt het nu een beetje ingewikkeld. Het probleem is dat Cloudflare instellingen kunnen verschillen als je wel of niet een cache plugin gebruikt zoals w3 total cache, wp rocket…, als je een plugin gebruikt om je css/js bestanden te optimaliseren zoals autoptimize, fast velocity minify enzovoort. Maar hey, ik zal proberen om u te vertellen wat parameter zou kunnen veranderen als u het soort plugin die ik net noemde.

Het SSL / TLS menu

In het SSL/TLS menu onder “overzicht” kun je kiezen tussen Uit, Flexibel, Volledig of Volledig (strikt). Hier zijn verschillende gevallen:

  • Uit:u zou geen site meer moeten hebben zonder HTTPS, dus vermijd dat
  • Als u nog geen HTTPS op je WordPress website hebt (d.w.z. u hebt geen SSL-certificaat), moet u de optie Flexibel kiezen (hoewel ik u aanraad HTTPS ingeschakeld te hebben voordat u Cloudflare instelt). Als u door het inschakelen van deze optie een probleem hebt met “te veel omleidingen”, deze wordpress plugin zou uw probleem moeten verhelpen.
  • Als je WordPress website al onder HTTPS is, zou u de optie Volledig (strikt) moeten kunnen kiezen.

Onder het “Edge Certificates” menu zijn er ook verschillende opties te configureren:

  • Gebruik altijd HTTPS: u kunt deze optie op Aan zetten
  • HTTP Strict Transport Security (HSTS): als u zeker weet wat u doet, kunt u deze optie inschakelen. Ga anders gewoon naar de volgende optie
  • Minimale TLS-versie: u kunt de standaardoptie TLS 1.0
  • Opportunistische encryptie: laat de optie uit als u HTTPS op uw website hebt ingeschakeld (wat het geval zou moeten zijn)
  • TLS 1.3: u kunt deze optie op Aan zetten
  • Automatische HTTPS-herschrijvingen: als u “Gemengde inhoud” problemen hebt, kunt u deze optie op “aan” zetten.

Het snelheidsmenu

Onder het menu “Optimalisatie” kunt u de volgende opties configureren:

  • Auto Minify: Als u al een cache-plugin gebruikt die de minificatie van js-, css- en html-bestanden afhandelt, hoeft u deze opties niet in te schakelen. Als u geen plugin hiervoor gebruikt, kunt u proberen Cloudflare te gebruiken om uw bestanden te minifiëren en het resultaat te zien. Persoonlijk geef ik de voorkeur aan andere plugins met meer opties zoals Autoptimize of fast velocity minify voor deze taak.
  • Brotli: u kunt deze optie op Aan zetten. Brotli compressie is efficiënter en sneller dan Gzip.
  • Rocket Loader: deze optie wordt verondersteld de laadsnelheid te verbeteren door javascripts asynchroon te laden. Probeer deze optie op On te zetten en als u geen fouten in de console van uw browser opmerkt, kunt u deze optie ingeschakeld laten.

Het Caching menu

Onder het “Caching” menu, zijn er verschillende opties die nuttig voor u zullen zijn:

  • Cache wissen: Hiermee kunt u de CDN-cache wissen voor uw hele site of slechts voor enkele url’s. Deze optie is vooral handig als u wijzigingen op je WordPress website hebt aangebracht en u wilt dat deze overal ter wereld live op je WordPress website worden weergegeven (maar daarover later meer).
  • Caching-niveau: kies de optie “Standaard”
  • Browser cache TTL: als u een cache-plugin zoals Wp rocket of W3 total cache gebruikt om de browsercache te configureren, kiest u de optie “Respecteer bestaande headers” (als u niet weet wat de browsercache is, leg ik het hier:
    Webbrowser cache instellen
    Het is beter om een plugin te gebruiken om de browser cache in te stellen, zodat je een andere waarde kunt kiezen afhankelijk van het type bestand (voor afbeeldingen, js, css kun je gemakkelijk een lange duur kiezen zoals 1 jaar, maar voor html-pagina’s die vaker kunnen veranderen, is het beter om een korte duur te kiezen van 1 uur tot 1 dag). Maar als je geen plugin hebt kun je hier ook een enkele waarde instellen.
  • Altijd online: als uw origin server om de een of andere reden crasht, zal je WordPress website met deze optie ingeschakeld nog steeds zichtbaar zijn vanuit de CDN-cache.
  • Ontwikkelingsmodus: als u aan je WordPress website werkt en wijzigingen aanbrengt, schakelt u deze optie in om de cache te omzeilen en al uw wijzigingen direct te zien. Uiteraard is door het inschakelen van deze optie de CDN-cache niet meer actief en zal je WordPress website over de hele wereld langzamer zijn.

Hoe controleer ik of de Cloudflare-cache werkt?

<{{>Voordat ik verder ga en u vertel over Cloudflare’s “Page Rules”, zal ik eerst uitleggen hoe u kunt controleren of je WordPress website goed wordt geserveerd door het Cloudflare CDN. Er zijn verschillende manieren om dit te doen en u kunt bijvoorbeeld deze snelheidstesttools gebruiken (u kunt de downloadcascades zien), maar de gemakkelijkste manier om dit te doen is nog steeds om uw browser te gebruiken. Klik met de rechtermuisknop op een open tabblad op je WordPress website, kies “inspecteren” en klik dan op het netwerk tabblad. Herlaad dan uw pagina om de download cascade te zien en alle bestanden die nodig zijn voor uw pagina.

 

Als u klikt op een van de bestanden die nodig zijn voor uw pagina (een afbeelding, een css of een js) en u hebt Cloudflare ingesteld met de instellingen die ik u tot nu toe heb laten zien, dan zou u onder de “headers” tab met name een regel moeten zien met “cf-cache-status”.

Deze header geeft de status van de Cloudflare-cache voor dit bestand aan en kan de volgende waarden hebben:

  • HIT: deze bron is afgeleverd vanaf de dichtstbijzijnde server door de Cloudflare CDN
  • MISS: Cloudflare heeft in zijn cache naar deze bron gezocht, maar kon deze niet vinden en moest deze daarom van de origin server halen. Maar de volgende keer zou dit verzoek een HIT moeten zijn.
  • EXPIRED: Cloudflare had dit bestand al in de cache opgeslagen, maar de cache is verlopen en daarom moest het van de oorspronkelijke server worden gedownload.
  • DYNAMISCH: dit verzoek wordt niet standaard in de cache opgeslagen omdat niets is geconfigureerd om het in de cache op te slaan.

Normaal gesproken, als u deze pagina meer dan eens hebt geladen (en Cloudflare deze bestanden dus al in de cache heeft opgeslagen), zouden al uw afbeeldingen, js/css-bestanden de HIT-header moeten hebben die aangeeft dat deze bronnen zijn geserveerd vanaf de dichtstbijzijnde Cloudflare-server. Je zult ook zien dat de “content-encoding” header de waarde heeft van “br” voor Brotli compressie die we ook eerder hebben geconfigureerd. Dat is al heel wat voor een gratis dienst, nietwaar? En het zou de laadsnelheid van je site overal ter wereld al aanzienlijk moeten verhogen.

Cachen van het 1e HTML-verzoek van uw pagina’s

Nu laten we een kleine test doen met bijvoorbeeld de GT Metrix test tool door te scannen vanaf een server in Australië (u kunt de serverlocatie kiezen in de scanopties). Scan een pagina van je site een keer en dan een tweede keer om er zeker van te zijn dat Cloudflare je bestanden op zijn Australische servers in de cache heeft opgeslagen. Als je naar het “Waterfall”-tabblad gaat, zou je iets als dit moeten zien:

U zult zeker merken dat het laden van uw bestanden supersnel gaat, maar dat het 1e verzoek dat de HTML van uw pagina terugstuurt superlangzaam is, in dit geval 1,7s. Dit komt simpelweg omdat de HTML van uw pagina’s nog niet in de cache is opgeslagen op de servers van Cloudflare. Dus, wanneer een gebruiker een pagina van de site bezoekt, zal het eerste verzoek in dit geval de reis naar Nederland maken om de HTML van uw pagina op te halen en terug te komen naar Australië … niet echt geweldig, is het niet?

Bovendien, als je op dit eerste verzoek klikt, zul je zien dat de header “cf-cache-status” is aangegeven als DYNAMISCH

Het pagina regels menu dat het verschil maakt!

Om de HTML van uw pagina’s met succes te cachen, moeten we het laatste Cloudflare-menu configureren waar we vandaag naar gaan kijken: de “Paginaregels”. Met deze paginaregels kunt u het gedrag van Cloudflare op alleen bepaalde pagina’s van je WordPress website regelen door enkele regels te definiëren Met Cloudflare’s gratis account kunt u 3 paginaregels instellen. Laten we samen eens kijken hoe je het meeste uit deze 3 regels kunt halen om je WordPress site zo snel mogelijk te maken. Hier zijn de 3 regels die u moet instellen:

Note: De volgorde van deze pagina regels is belangrijk omdat slechts één van deze regels per pagina getriggerd zal worden. Met het * teken kunt u meerdere url’s met een enkele regel targeten. Laten we elk van deze regels samen ontleden: De eerste zal Cloudflare vertellen om niet alle beheerders van je WordPress website te cachen (Belangrijke opmerking!!!! In jouw geval heb je waarschijnlijk niet de “/wp/” in de url. Dit is iets dat specifiek is voor mijn installatie):

 

Het belangrijkste hierboven is dat u het “Cache Level” op “Bypass” hebt gezet om ervoor te zorgen dat uw admin pagina’s nooit door Cloudflare worden gecached. De 2e pagina regel zal Cloudflare vertellen om niet alle previews van uw berichten te cachen wanneer u ze aan het schrijven bent. Om deze regel te maken, gebruik je gewoon dezelfde parameters als voor de eerste regel, maar richt je de url’s als volgt gestructureerd: jouwwebsite.com/*preview=true*. Ten slotte zal de laatste en belangrijkste regel Cloudflare vertellen om al uw pagina’s (html, css, js, afbeeldingen) gedurende een maand te cachen, wat toevallig de maximale duur is die Cloudflare aanbiedt.

Zodra je deze 3 regels hebt ingesteld, als je dezelfde pagina opnieuw test met gtmetrix, zou de snelheid van je 1 verzoek veel sneller moeten zijn dan voorheen (en als je op het 1e verzoek klikt, zul je zien dat de status van de Cloudflare cache HIT is) en je site zou nu een vergelijkbare laadsnelheid moeten hebben over de hele wereld . en het is nog steeds gratis!

We kunnen ook de test van de 1e afbeelding van het artikel opnieuw doen vanaf verschillende plaatsen in de wereld, en we kunnen zien dat de site veel sneller is dan voorheen overal in de wereld!

U kunt zien dat de site overal ter wereld veel sneller is, vooral na het 2e bezoek wanneer alle inhoud in de cache is opgeslagen.


Cloudflare Web Application Firewall WAF

Met Cloudflare Web Application Firewall (WAF) kun je je website extra beveiligen. Het intuïtieve dashboard van Cloudflare Web Application Firewall stelt gebruikers in staat om krachtige regels op te stellen met eenvoudige muisklikken en biedt ook Terraform-integratie. Elk verzoek aan de WAF wordt geïnspecteerd aan de hand van de rule engine en de informatie over bedreigingen die is verzameld uit de bescherming van ongeveer 25 miljoen websites. Verdachte verzoeken kunnen worden geblokkeerd, in twijfel getrokken of gelogd, afhankelijk van de behoeften van de gebruiker, terwijl legitieme verzoeken worden doorgestuurd naar de bestemming, ongeacht of deze zich op locatie of in de cloud bevindt. Analytics en Cloudflare Logs maken bruikbare statistieken zichtbaar voor de gebruiker.

 


Meer handleidingen over CDN

Meer handleidingen over CDN en snelheid verbeteren: