Webstick.nl logo Webdesignburo en Wordpress-blog

Cloudflare perfect instellen, voorkom veelvoorkomende fouten

Cloudflare perfect 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


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

Cache

Als uw website met Wordpress is gebouwd is het aan te raden om de cache plugin WP-Rocket te gebruiken, deze werkt perfect samen met Cloudflare via api. Na de installatie en instelling van deze top plugin klikt u links in de kolom van de plugin op "Add-ons", Cloudflare en bouwt u via de API-sleutel en Zone-ID die u in uw Cloudflare account vindt de connectie op tussen plugin en Cloudflare CDN.

WP Rocket instellen voor Cloudflare

Website compressie

Of u een Wordpress website heeft met cache plugin of een HTML website waar de compressie ingesteld is via uw .htaccess op de server, zodra uw website over de nameservers van Cloudflare begint te lopen valt dit weg. Van belang is dus om bij Cloudflare alles aan te vinken zoals hieronder in de afbeelding te zien is. Om hier te komen klikt u in het Cloudflare topmenu op het blauwe knopje "Speed".

Cloudflare compressie html css javascript

In het hoofdstuk "Speed" in Cloudflare zet u Rocket loader aan zoals hieronder afgebeeld.

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.

Business optimalisatie

Ik raad hier aan om via de WP Rocket plugin de extra "Imagify" te installeren, deze optimaliseert zelfstandig alle afbeeldingen tegen een zeer correcte prijs. Uiteraard zijn er vele gratis plugins voor Wordpress die uw afbeeldingen voor u optimaliseren.

Imagify 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.



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

Divi