Webstick.nl logo Webdesignburo en Wordpress-blog

W3 Total Cache met Cloudflare & Stackpath CDN 💥

CDN perfect instellen, Stackpath + Cloudflare + W3 Total cache

We gaan hier voor de snelst mogelijke combinatie om uw pagina's razendsnel aan te bieden bij uw bezoekers en gebruiken daarvoor Stackpath (CDN) + (Cloudflare CDN2) + W3 Total Cache (plug-in). De W3 Total Cache is een Wordpress plug-in die voorbereid is op de samenwerking met deze beide top CDN-netwerken. Perfect voor onze klus.


Advertisement

Divi Ad 680px


Zowel Cloudflare als Stackpath doen veel meer dan alleen uw content op servers wereldwijd opslaan. Ze zorgen ook voor veiligheid en cache en nog veel meer optimalisatie onderdelen. De W3 Total Cache plug-in is op zijn best met de betaalde versie, maar hier kunnen we gewoon met de gratis versie aan de slag. De keuze is aan u, als u 49 dollar overheeft is het geen slecht idee om de PRO-versie te hebben.

We gaan ervan uit dat u al een lopende Wordpress website heeft en deze super snel wilt maken. Als u nog geen website heeft lees dan eerst: Website maken met Wordpress en Divi Theme.

We beginnen met het installeren van W3 Total Cache in uw Wordpress...



W3 Total Cache installeren (free plan)

W3 Total Cache is een gratis plug-in die gewoon via "Nieuwe plugin" in Wordpress geïnstalleerd kan worden zoals hieronder afgebeeld. W3 Total Cache is een van de snelste en meest complete gratis plug-ins voor optimalisatie van WordPress-prestaties. Door miljoenen vertrouwd. W3 Total Cache verbetert de gebruikerservaring van uw site door de serverprestaties te verbeteren, elk aspect van uw site te cachen, de downloadtijden te verkorten en een content delivery network (CDN) te bieden. Meteen na de installatie activeren en we kunnen al verder met de instellingen van de plug-in. Zorg dat u eventuele andere cache plugins vooraf verwijderd heeft.

W3 Total Cache installeren

Veel W3 Total Cache-instellingen zijn vooraf al ingesteld, maar niet alle. Ik zal je door de prestatietabs leiden en je helpen bij het instellen van Cloudflare (gratis versie). Een zeer uitgebreid tutorial door ons geschreven voor het instellen van Cloudflare, gratis en betaald vind u hier: Cloudflare perfect instellen.

Voordat u begint, raden we u ten zeerste aan de prestaties van uw site te controleren met behulp van Google Pagespeed Insights, GT-Metrix en Pingdom Tools. Dit geeft u een vergelijking voor en na de installatie van W3 Total Cache.

Als u snel klaar wilt zijn kunt u hier een bestand downloaden wat u in W3 Total Cache kunt importeren (eerst even ontpakken), alle settings worden dan in 1x overgenomen. Als u liever wat leert over uw cache plug-in en zelf alles even in wilt stellen lees dan gewoon verder. Ook moet ik zeggen voor degenen die de optimale settings wel importeren dat als de website problemen toont bepaalde settings ongedaan gemaakt moeten worden zoals minifying van javascript en css bijvoorbeeld.

General settings

Het eerste scherm hieronder verschijnt pas nadat je "Activeer" geklikt hebt bij "Preview". Het preview systeem zou ik alleen gebruiken als u een druk bezochte site heeft en het u geld gaat kosten als uw site laten we zeggen 10 minuten fouten vertoont. Ik gebruik dit zelf niet.

Algemene instellingen 0

Algemene instellingen 1

Minify mag alleen gebruikt worden in of W3 total Cache of Cloudflare, niet beide. Als u Cloudflare gaat gebruiken wat aan te raden is, laat het hier dan uit.

Algemene instellingen 2

OPcache verbetert uw php prestaties maar dit zit alleen in de PRO versie. De databasecache gebruikt u alleen als u het zonder Cloudflare of ander CDN netwerk gaat doen.

Algemene instellingen 3

Browsercache maakt de laadtijd veel sneller voor uw bezoekers en is dus erg belangrijk. Object cache laten we uit.

Algemene instellingen 4

Het gebruik van CDN zorgt dat uw website overal ter wereld snel beschikbaar is door bestanden op servers overal ter wereld op te slaan. We bespreken in dit artikel alleen het Cloudflare netwerk wat het beste en gratis is. Er is ook een betaalde versie die nog beter is maar u bent dan 20 dollar pe rmaand kwijt. Ik gebruik zelf de betaalde versie op deze website. We bespreken Cloudflare verderop in dit artikel.

Algemene instellingen 5

Als Varnish op de server geïnstalleerd is, is het aan te raden dit aan te zetten en uw server IP in te vullen, anders niet.

Algemene instellingen 6

Fragment cache is zeker iets goeds, aanzetten als u de PRO versie heeft.

Algemene instellingen 7

Heeft u de PRO versie? Dan hier uw license-key invullen.

Algemene instellingen 8

Pagespeed Insight data kan in uw eigen dashboard in uw back-end getoond worden.

Algemene instellingen 10

Algemene instellingen 11

Zowel importeren als exporteren van de instellingen van uw plug-in kan u veel werk besparen door niet steeds alles opnieuw in te moeten stellen.

Algemene instellingen 12


Pagina cache

Pagina cache 1

Pagina cache 2

Pagina cache 3

Pagina cache 4

Pagina cache 5

Pagina cache 6

Er komt nu erg veel waaraan we niets veranderen, we tonen hieronder alleen de stukjes waar wat veranderd kan worden.

Pagina cache 7

Pagina cache 8

Het inschakelen van de compatibiliteitsmodus wordt sterk aanbevolen door de ontwikkelaar van de plug-in (op het installatietabblad) en hoewel het de prestaties enigszins kan verminderen, zijn er waarschijnlijk minder problemen met uw site. Hij zegt dat dit "de interoperabiliteit van caching optimaliseert; het nadeel is dat de prestaties van de schijf verbeterde paginacache tijdens laadtests op schaal met ~20% worden verminderd".

Minify instellingen

De plugin-ontwikkelaar zegt dat de aanbevolen instellingen voor minify, database en objectcache vooraf goed zijn ingesteld. U vindt dit op het tabblad Installatie zoals op de afbeelding hieronder te zien is. Vergeet niet dat als u Cloudflare gebruikt, dit voor u zal zorgen voor Minify, dus zorg ervoor dat Minify is uitgeschakeld op het tabblad Algemene instellingen.

W3 total Cache vooraf juist ingesteld

Database Cache

Laat zoals het is (aanbevolen op het tabblad Installatie)

Object Cache

Laat zoals het is (aanbevolen op het tabblad Installatie)

Browser Cache

Browser cache 1

Browser cache 1a

Browser cache 1b

Browser cache CSS

Browser cache CSS2

Browser cache HTML

Browser cache HTML2

Browser cache media

Browser cache media 2

Browser cache security


CDN

Een CDN (content delivery network) maakt uw site sneller door deze te hosten op meerdere servers in het hele land en de wereld, in tegenstelling tot 1 origin-server (het vermindert de geografische afstand die uw content nodig heeft om uw bezoekers te bereiken). We gaan beginnen met he tinstellen van de CDN-netwerken, als eerst Stackpath.

DB

Als u niet de full version heeft, kunt u met WP-optimize uw database optimaliseren.



Stackpath CDN instellen



Stackpath account maken


Ga naar de site van Stackpath (klik), en kies voor het goedkoopste plan. U kunt dit een maand gratis testen, daarna kost het 20 dollar per maand wat niet veel is voor de services die u krijgt.


Stackpath account maken

Is alleen Cloudflare niet genoeg?

Misschien, maar het kan beter en vandaar dit artikel. Alleen Stackpath is ook niet optimaal en zonder CDN gaat ook. De vraag is hoeveel u van uw website houdt... We gaan hier voor de optimale settings for asociale laadtijden. Stackpath gebruikt supersnelle puur SSD servers met 10GB uplink connecties, een stuk sneller dan Cloudflare. Maar Cloudflare heeft meer datacenter (193) dan Stackpath (45) en mag zeker ook niet ontbreken voor de optimale settings. StackPath kost u niets extra voor HTTPS-verkeer, Cloudflare-kosten per gebruik. Ook toont StackPath uitgebreide panelen die veel gegevens over uw in de cache opgeslagen bestanden geven. U kunt beide netwerken uw account beveiligen met behulp van een tweestaps-bevestigingsprocedure en kunt u de IP-locaties van personen die toegang tot uw account krijgen op de witte lijst zetten.

Stackpath: Ons wereldwijde 65Tbps-netwerk beschikt over een geavanceerde architectuur, aangepaste hardware, redundante Tier 1-carrierverbindingen en volledige stack-implementatie op elke locatie om een platform te creëren dat veiliger, sneller en veel flexibeler is.

In het volgende scherm geeft u uw mailadres en paswoord op en klik "Create account". We maken hiervan geen screenshot zo eenvoudig is het.

Volgende scherm: Geef uw CC data op of klik door via Paypal, u wordt de eerste maand niet gefactureerd en kunt op elk moment opzeggen, mocht u dat willen.


Stackpath creditcard


Log in in uw account bij Stackpath. In de linkerkolom klik op "CDN". Volg verder de aanwijzingen op de afbeeldingen hieronder.


Stackpath CDN domein


U geeft uw domein op van uw site en Stackpath vindt automatisch de IP erbij


Stackpath server IP


Stackpath genereert nu een URL die u in de settings van W3 Total Cache gaat gebruiken. Hieronder leggen we dit verder uit.


Stackpath URL voor W3 Total Cache



Stackpath integreren in W3 Total Cache

Log in to your Stackpath account then open this url in a new tab. op de nieuwe pagina, klik "Generate credentials"

Stackpath API Management

Geef een naam op en klik "Save". Een nieuw scherm zal openen met de 2 API's (zie afbeelding hieronder) die u zo in W3 Total cache in gaat voeren.

Stackpath API Management 2

Ga in W3 Total Cache naar de tab "CDN". Vervolgens scroll je naar beneden tot "Configuration: Objects". Hier klik je op "Authorize" zoals hieronder op de afbeelding te zien is.

W3 Total Cache Stackpath

In de box die zich nu opent, kunt je de 2 API's invoeren die je bij Stackpath gekregen hebt. Sla de nieuwe configuratie op.

W3 Total Cache Stackpath API's



Cloudflare integreren in W3 Total Cache

U heeft om te beginnen een account nodig bij Cloudflair en u moet weten hoe u uw website integreert. Klik op de knop hieronder om naar de officiële Cloudflare instructies te gaan.



Cloudflare account maken


W3 Total Cache instellen voor Cloudflare

In W3 Total Cache, ga naar de tab "Extensions" en activeer Cloudflare zoals afgebeeld op de afbeelding hieronder.

W3 Total Cache activeer Cloudflare extensie

Na de Cloudflare extensie geactiveerd te hebben, zoek je hem opnieuw op in het rijtje met extensies. Deze keer is het mogelijk om te klikken op "Instellingen". In het scherm wat nu open gaat, klik "Authorize" zoals hieronder afgebeeld.

W3 Total Cache authorize Cloudflare

In het volgende scherm geeft u uw mailadres op wat u bij Cloudflare heeft geregistreerd en de API die u van Cloudflare krijgt.

W3 Total Cache Cloudflare mail en api

De Cloudflare API kunt u zelf maken als u daar inlogt en via "My profile" >> "API tokens" klikt op "Create token" zoals hieronder afgebeeld.

Cloudflare api maken



Cloudflare instellen (free plan)

Mailverkeer niet over Cloudflare laten lopen

Cloudflare pikt zelf alle DNS instellingen op van de server waarop de website staat. Ook voor "mail" wordt een record gemaakt. Zet u dit uit want anders zal uw mail niet meer aankomen en kunt u geen mail meer versturen via mailclients als Outlook of Thunderbird. De oranje kleur in het wolkje rechts naast de record verandert in grijs als u erop klikt, dat is alles wat u moet doen. De afbeelding hieronder is hier een screenshot van:

Veelvoorkomende fouten met Cloudflare

Website compressie

Minifying zet u uit, dit is belangrijk en op aanraden van onze plug-in. (WP fastest cache deed dit zelf al maar u checkt of alles goed staat) Om hier te komen klikt u in het Cloudflare topmenu op het blauwe knopje "Speed".

Cloudflare compressie html css javascript off

In het hoofdstuk "Speed" in Cloudflare zet u Rocket loader uit zoals hieronder afgebeeld. (WP fastest cache deed dit al maar check het)

Rocket loader Cloudflare

Afbeeldingen optimaliseren

In de afbeelding hieronder kunt u zien dat hiervoor een upgrade naar "Business" nodig is, dit kost 200 dollar per maand en is absurd. Zet "Polish" aan in Cloudflare voor image optimalisatie.

Business optimalisatie

Cloudflair optimaliseert ook uw afbeeldingen, stel "Polish" (hoofdstuk Speed) in op "Lossy" zoals hieronder weergegeven.

Polish lossy

Brotli

Versnel pagina laadtijden voor het HTTPS-verkeer van uw bezoeker door Brotli-compressie toe te passen.

Brotli

Ontwikkelingsmodus

Ontwikkelingsmodus

Als u aan uw site gaat werken is het aan te raden om tijdelijk in Cloudflare deze modus aan te zetten onder hoofdstuk "Caching" zoals hieronder afgebeeld anders worden aanpassingen niet meteen weergegeven. Wat betreft een gratis Cloudflare account heb ik de belangrijkste zaken besproken. De rest van de opties spreken voor zich.

Services die los betaald worden

Argo kost u 5 dollar per maand. Argo is een service die geoptimaliseerde routes in het Cloudflare-netwerk gebruikt om sneller, betrouwbaar en veilig antwoorden aan uw gebruikers te leveren. Door Argo in te schakelen worden Argo Smart Routing en Tiered Caching geactiveerd, waardoor de latentie van internet gemiddeld met 35% en de verbindingsfouten met 27% worden verminderd. Dit is zeker de 5 dollar p/m waard. De Argo tunnel zou ik niet gebruiken.

reactietijd sneller met Argo

Load Balancing: Beschermen tegen onderbrekingen van services door load balancing, automatische failover, geografische routering en actieve gezondheidscontroles met uw oorspronkelijke servers. Ook deze service kost 5 dollar maar hier zou ik liever vanaf zien, zeker als u vertrouwen in uw eigen server heeft waar de site op staat.



Cloudflare instellen (Pro plan)

Alle opties die een gratis account heeft, heeft het Pro plan ook. Daarvoor geldt dus voor alles hetzelfde, maar het Pro plan heeft veel meer en het is naar mijn mening zeker de moeite waard hier 20 dollar per maand voor te betalen. Het zal uw site topsnel maken, om de beveilgingsopties geef ik minder.

Wat krijgt u erbij voor 20 dollar p/m?

pro plan extra opties

In het hoofdstuk "Speed" zet u de volgende nieuwe opties aan: "Verbeterde prioritering van HTTP/2" optimaliseert de volgorde van bronafgifte, onafhankelijk van de browser. "TCP Turbo" versnelt de latentie en doorvoer met op maat afgestelde TCP-optimalisaties. "Mirage" verbetert de laadtijd voor pagina's met afbeeldingen op mobiele apparaten met trage netwerkverbindingen. Verdere nieuwe opties zijn minder interessant maar deze 3 zorgen voor een dusdanig snellere laadtijd dat het de moeite waard is een Pro Plan te nemen als speed voor uw site belangrijk is.


Slot

Voor degenen die op dit punt nog steeds in dit artikel zitten... "knap werk, u heeft uw dubbele CDN en Cache Plug-in netjes ingesteld en zich door de complete set up heengewerkt!". Veel plezier met uw razendsnelle Wordpress website.



Advertisement

Divi Ad 680px