Webstick.nl logo Webdesignburo en Wordpress-blog

CDN perfect instellen, Stackpath + Cloudflare + WP fastest cache

CDN perfect instellen, Stackpath + Cloudflare + WP fastest 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) + WP fastest cache (plug-in). De WP fastest cache is een Wordpress plug-in die voorbereid is op de samenwerking met deze beide top CDN-netwerken. Perfect voor onze klus.

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 WP fastest 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 WP fastest cache in uw Wordpress...

WP fastest Cache installeren (free plan)

WP fastest Cache is een van de snelste Wordpress plug-ins voor cache en al helemaal als we het over de betaalde versie hebben. WP fastest Cache heeft speciale settings voor Cloudflare en Stackpath ingebouwd en is perfect om deze beide tegelijkertijd voor u te laten werken. Een andere zeer goed cache plugin bijvoorbeeld is W3 Total Cache maar deze heeft erg veel verschillende settings.

Om te beginnen installeert u de plugin via uw Wordpress backend in "Plug-ins" >> "Nieuwe plug-in" zoals hieronder op de afbeelding en activeer meteen de plugin.


WP fastest Cache installeren backend wordpress

Gebruik voor CDN de onderstaande instellingen in WP fastest Cache. Schakel Auto Minify en Rocket Loader uit op het tabblad "speed" van uw Cloudflare-instellingen (SG Railgun moet ingeschakeld zijn). Dit is wat de WP Fastest Cache-plug-inontwikkelaar aanbeveelt in zijn Cloudflare-zelfstudie.

Gebruik de onderstaande instellingen voor WP fastest Cache (instelling met CDN).


WP fastest Cache instellingen met CDN

Delete cache

Deze tab spreekt voor zich, u kunt hier cache en minified wissen als u veranderingen doorgevoerd heeft aan uw website en die niet getoond worden in uw browser.

Optimalisatie van afbeeldingen

De optimalisatie van afbeeldingen is erg belangrijk. Het zit niet in de standaard versie dus of u moet dit handmatig doen, of met een andere plug-in (de beste is Imagify) of u koopt de Premium-versie van WP fastest Cache. De beide CDN netwerken optimaliseren uw images (virtual) maar het is beter om de fysieke images op uw eigen server te optimaliseren.


Optimalisatie van afbeeldingen

Premium

De premium versie van WP fastest cache geeft een hoop extra opties die uw website nog sneller maken.


premium opties

Exclude

U kunt hier pagina's opgeven die niet ge-cached moeten worden zoals check out pagina's of pagina's waar zich fouten voordoen. Ook uw complete back-end zou u hierin kunnen zetten.


WP Fastest Cache Exclude instellingen

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 WP fastestcache gaat gebruiken. Hieronder leggen we dit verder uit.


Stackpath URL voor WP fastest cache



WP fastest cache instellen voor Stackpath

WP fastest cache Stackpath

WP fastest cache Stackpath create account

WP fastest cache Stackpath URL

WP fastest cache Stackpath file types

WP fastest cache Stackpath sources

WP fastest cache Stackpath ready



Cloudflare CDN instellen

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


WP fastest cache instellen voor Cloudflare

Cloudflare API vinden

WP fastest cache Cloudflare settings

WP fastest cache Cloudflare API

Als u doorgaat, schakelt WP Fastest Cache nu uw minify-instellingen uit (aangezien Cloudflare dit nu overneemt). Ze zullen ook de Rocket Loader stoppen om dingen compatibel te maken (uw site zal hier geen last van hebben) en het verloop van de browsercache instellen op 24 dagen. Screenshots hiervan tonen we niet (te eenvoudig). De installatie in WP Fastest Cache is nu klaar.



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.



Tip: Bouw je website met Wordpress theme DIVI met de wereldwijd beste pagebuilder, 600.000x verkocht!

Divi