W3 Total Cache met Cloudflare & Stackpath CDN 💥
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.
Advertentie
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.
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.
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.
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.
Browsercache maakt de laadtijd veel sneller voor uw bezoekers en is dus erg belangrijk. Object cache laten we uit.
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.
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.
Fragment cache is zeker iets goeds, aanzetten als u de PRO versie heeft.
Heeft u de PRO versie? Dan hier uw license-key invullen.
Pagespeed Insight data kan in uw eigen dashboard in uw back-end getoond worden.
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.
Pagina cache
Er komt nu erg veel waaraan we niets veranderen, we tonen hieronder alleen de stukjes waar wat veranderd kan worden.
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.
Database Cache
Laat zoals het is (aanbevolen op het tabblad Installatie)
Object Cache
Laat zoals het is (aanbevolen op het tabblad Installatie)
Browser Cache
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
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.
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.
Log in in uw account bij Stackpath. In de linkerkolom klik op "CDN". Volg verder de aanwijzingen op de afbeeldingen hieronder.
U geeft uw domein op van uw site en Stackpath vindt automatisch de IP erbij
Stackpath genereert nu een URL die u in de settings van W3 Total Cache gaat gebruiken. Hieronder leggen we dit verder uit.
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"
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.
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.
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.
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.
W3 Total Cache instellen voor Cloudflare
In W3 Total Cache, ga naar de tab "Extensions" en activeer Cloudflare zoals afgebeeld op de afbeelding hieronder.
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.
In het volgende scherm geeft u uw mailadres op wat u bij Cloudflare heeft geregistreerd en de API die u van Cloudflare krijgt.
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 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:
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".
In het hoofdstuk "Speed" in Cloudflare zet u Rocket loader uit zoals hieronder afgebeeld. (WP fastest cache deed dit al maar check het)
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.
Cloudflair optimaliseert ook uw afbeeldingen, stel "Polish" (hoofdstuk Speed) in op "Lossy" zoals hieronder weergegeven.
Brotli
Versnel pagina laadtijden voor het HTTPS-verkeer van uw bezoeker door Brotli-compressie toe te passen.
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.
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?
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