Geplaatst op

Cloudflare instellen op je domein

Cloudflare blog boek

In deze blog gaan we het hebben over Cloudflare, wat is Cloudflare en wat kun je er precies mee, hoe populair is het, en wat zijn de voordelen ten opzichte van de nadelen? Daarnaast gaan we je ook laten zien hoe je Cloudflare kunt instellen op je domein en hoe je Cloudflare kunt gebruiken. Tot slot laten we je ook nog zien hoe je bepaalde features kunt instellen. We hopen dat je na het lezen van deze blog zelf in staat bent om je domein te verbinden met Cloudflare en bepaalde features toe te passen. Laten we beginnen met het begin, en erachter komen wat Cloudflare precies is en wat het doet en waar het voor gebruikt wordt.

Cloudflare: Wat is het precies?

Cloudflare is een Content Delivery Network (CDN) en kun je het beste zien als een soort laag dat tussen je server en het browser zit. Cloudflare is opgericht in 2009 door Lee Holloway, Michelle Zatlyn & Matthew Prince. Het netwerk van Cloudflare is enorm. Zo beschikt het over verschillende servers verspreid over 93 landen. Cloudflare is het bekendst om zijn firewall en gegevenscachingservers. Een firewall is een apparaat dat internet adressen (IP-adressen) observeert. Bij verdacht-afwijkend gedrag kan de firewall ervoor zorgen het IP-adres te blokkeren, waarna de toegang tot de website ontnomen zal worden.

Gegevenscaching in Cloudflare

Naast de firewall beschik je met Cloudflare ook over gegevenscaching. Met het gebruik van de gegevenscaching feature wordt er een realtime kopie opgeslagen op de server die aangeroepen wordt op het moment dat iemand je website wil bezoeken. Ook hebben we verteld dat Cloudflare verschillende servers heeft verspreid over 93 landen. Dit heeft als voordeel dat Cloudflare je een caching copy verstuurd vanaf de dichtstbijzijnde server, waardoor je website nog sneller zal laden.

Cloudflare: Wat kun je er nog meer mee?

Nu we weten waar Cloudflare hoofdzakelijk voor gebruikt wordt, kunnen we iets inhoudelijker op de verschillende features ingaan van Cloudflare, want er is nog veel meer dat je moet weten! Naast dat Cloudflare gegevenscaching toepast en je website- domeinnaam beveiligd door middel van een firewall, is Cloudflare ook een DNS-service, Caching server, de uitgever van je SSL-certificaat en nog veel meer! Laten we starten met het instellen van Cloudflare op je domein.

Cloudflare instellen op je domein

Om je domein in te kunnen stellen op Cloudflare maken we eerst een account aan. Je kunt kiezen voor een gratis of betaald account. Om met Cloudflare te kunnen starten is een gratis account voldoende. Omdat Cloudflare werkt op basis van DNS, is het noodzakelijk de nameservers te wijzigen naar Cloudflare. Dit betekend dan ook dat de DNS-instellingen die normaliter doet via jouw registrar, vanaf het moment dat de nameservers gewijzigd zijn alleen nog maar bij Cloudflare doorgevoerd worden. Gebruik jij je domeinnaam al bij je huidige registrar, en heb je al DNS-records hier ingesteld? Dan neem Cloudflare deze records in bijna alle gevallen over, het is wel noodzakelijk om beide DNS-zones te vergelijken en eventueel aan te passen waar nodig.

Belangrijk! Nadat je straks de domeinnaam aan Cloudflare hebt gekoppeld en je jouw DNS op laat halen let dan even goed op de huidige proxy status. Omdat Cloudflare de mogelijkheid bied je originele server IP-adres te maskeren, kun je het beste al je records via de proxy laten verlopen.

Laten we Cloudflare instellen op je domein

We zullen nu eerst een Cloudflare account aanmaken, en onze domeinnaam toevoegen aan Cloudflare:

  1. Ga naar cloudflare.com en klik op ‘Aanmelden’.
  2. Vul je gegevens in als het e-mailadres en bedenk een goed wachtwoord en klik op ‘Create account’.
  3. Als het goed is, wordt je hierna direct doorgestuurd naar het Cloudflare dashboard en kun je jouw eerste domeinnaam toevoegen.
  4. Vul je domeinnaam in en klik op ‘Add site’.
  5. Nu kom je op het scherm waar je het abonnement kunt kiezen. Het gratis plan vind je onderaan de pagina. Maak een keuze en klik op ‘Continue’.
  6. Nadat je verder hebt geklikt zullen al je huidige DNS-records ingeladen worden (waar mogelijk). Controleer deze DNS-records goed met je huidige DNS-zonefile.
  7. Nadat je alle DNS-records hebt gecontroleerd kun je klikken op ‘Continue’.
  8. Nu zul je op het scherm uitkomen waar er van je wordt gevraagd de nameservers te wijzigen bij je registrar. Doe dit en wijzig de nameservers die worden weergegeven bij punt vier in het desbetreffende venster. Nadat je beide nameservers hebt doorgevoerd klik je op ‘Done, check nameservers’.
  9. Nadat we op de knop ‘Done, check nameservers’ hebben geklikt opent er een Quick Start Guide. Om deze wizard te starten klikken we op ‘Get started’. Volg de drie stappen. Alle drie de stappen staan hieronder gespecificeerd. Na het afronden van deze wizard is je domein goed ingesteld op Cloudflare. Het is nu enkel afwachten tot je nameservers gaan resolven naar Cloudflare. Het kan tot 24 uur duren voordat de wijzigingen met betrekking tot de nameservers ook daadwerkelijk zichtbaar zijn.

Uitleg Quick Start Guide

Bij stap 9 hierboven zijn we aangekomen bij het doorlopen van een Quick Start Guide. Met deze wizard doorloop je in vogelvlucht belangrijke configuratie. Je kunt er ook voor kiezen deze wizard later uit te voeren. We zullen nu per punt dat je tegenkomt in deze wizard uitleg geven:

Improve security

Bij stap 1 kun je de keuze maken of je al het verkeer wilt afdwingen om via HTTPS te laten verlopen. We adviseren deze functie inderdaad te gebruiken. Ook kun je het schuifje zetten op ‘Always use HTTPS’.

Optimize performance

Bij stap wordt er gevraagd of je ook bestanden- en scripts automatisch wilt laten verkleinen en samenvoegen. Zoals eerder besproken hangt dit af van het feit of er al bestanden zijn verkleind en samengevoegd door middel van een optimalisatie plugin. Zo ja, dan laat je deze optie bij Cloudflare verder met rust. Ook staat de functie ‘Brotli’ automatisch aan. Deze mag je aan laten staan en zorgt voor extra bestandscompressie.

Summary

De laatste stap in deze wizard. Eigenlijks is het geen stap maar meer een controle van opgegeven configuratie. Na het afronden van deze stap is je domein volledig verbonden met Cloudflare!

SSL-certificaat aanvragen

Nu je domeinnaam ingesteld staat op Cloudflare, hoef je geen SSL-certificaat meer aan te vragen. Dit wordt al automatisch door Cloudflare verzorgt. Mocht je problemen ervaren met je beveiligde verbinding, zoals het te vaak omleiden, dan zou je nog even bij de instellingen van SSL/TLS. Je kunt hier de verbinding het best op ‘Full’ zetten.

De Cloudflare cache functie

Zoals we eerder hebben besproken cached Cloudflare ook je website, wat wil zeggen dat Cloudflare een kopie van je webpagina’s opslaat op hun servers. Hierdoor zullen de webpagina’s sneller laden, dan wanneer er geen gebruik gemaakt wordt van caching. Echter, wanneer je wijzigingen aanbrengt aan je webpagina, door bijvoorbeeld een tekst aan te passen, dienen we na het opslaan van de pagina, ook nog even de pagina cache te verwijderen van de website. Normaal doe je dit al via het dashboard met een caching plugin. Ditzelfde geldt nu ook voor Cloudflare, aangezien Cloudflare ook je website cached. Je kunt de cache in Cloudflare legen door hier in te loggen en te gaan naar ‘Caching’ > ‘Configuration’ en hier te klikken op ‘Purge Everything’.

TIP! Ben je bezig met het ontwikkelen van je website, en komt de cache functie van Cloudflare even niet goed uit? Dan kun je er ook voor kiezen om op de ‘Configuration’ pagina de ‘Development mode’ te activeren.

Cloudflare cache automatisch legen met API

Wist je dat je ook automatisch je Cloudflare cache kan laten legen bij het legen van je eigen website cache? Hiervoor kun je de plugin WP Fastest Cache gebruiken. Met deze plugin kun je een API-koppeling leggen tussen je WordPress website en Cloudflare. Hierdoor hoef je niet elke keer op Cloudflare in te loggen om de cache te legen. Hoe je deze koppeling precies legt lees je in het blog ‘WordPress website optimaliseren’.

Domeinnaam doorsturen met HTTPS

Nog een handige feature van Cloudflare is dat je ook je domeinnaam kunt doorsturen via HTTPS. Het grote voordeel hiervan is dat je niet een speciaal hostingpakket hoeft aan te schaffen, hierop een SSL-certificaat installeert en de domeinnaam vervolgens doorstuurt middels een 301 redirect. Het toevoegen van je domeinnaam in Cloudflare is voldoende! Het doorsturen kun je instellen bij de optie ‘Filters’. We gaan nu laten zien hoe je een domeinnaam kunt doorsturen in Cloudflare:

  1. Login op je Cloudflare account
  2. Voeg de domeinnaam toe aan je Cloudflare account.
  3. Nadat je het domeinnaam toegevoegd hebt op je Cloudflare account klikken we links op de zijbalk op ‘Rules’.
  4. Er zal een nieuwe pagina openen, druk hier op de knop ‘Create Page Rule’.
  5. Je kunt nu de redirects instellen. Hieronder zullen we een kleine toelichting geven op wat je precies moet instellen.

Toelichting: Rules aanmaken

Nadat wij op ‘Create Page Rule’ hebben gedrukt opent zich er een venster waar we de regels kunnen instellen voor het doorsturen. Voor het doorsturen van 1 domein binnen Cloudflare maken wij 2 verschillende rules aan. Zo maken we eerst één rule aan voor met WWW. En de tweede rule die we gaan instellen is zonder WWW. Tevens zetten we achter beide domeinnamen die we willen doorsturen een forward slash gevolgd door een sterretje [/*]. Dit zorgt ervoor dat wanneer men de door te sturen domeinnaam intypt en achter de domeinnaam bijvoorbeeld /contact neerzet, deze automatisch doorgestuurd wordt naar het hoofddomein. Dit noemen ze ook wel Wildcard.Bij de destination URL vul je altijd de gehele domeinnaam in, dus ook https:// en www indien gewenst.

Je kunt de volgende gegevens invullen voor het doorsturen met WWW:

If the URL matches: www.voorbeelddoorgestuurddomein.nl/*
Then the settings are: Forwarding URL
Select status code: 301 Redirect
Enter destination URL: https://www.urlwaarnaardoorgestuurdwordt.nl

Je kunt de volgende gegevens invullen voor het doorsturen zonder WWW:

If the URL matches: voorbeelddoorgestuurddomein.nl/*
Then the settings are: Forwarding URL
Select status code: 301 Redirect
Enter destination URL: https://www.urlwaarnaardoorgestuurdwordt.nl

Domeinnaam forceren naar HTTPS/WWW

Ook is het mogelijk om verschillende 301 redirects in te stellen naar HTTPS/WWW. Dit heeft als voordeel dat je website nog sneller opkomt. Dit komt omdat er achter de schermen geen koppeling meer gemaakt hoeft te worden, omdat dit al is gebeurt met het instellen van de 301 redirects. Om dit in te stellen voer je de onderstaande stappen uit:

  1. Login op je Cloudflare account
  2. Voeg de domeinnaam toe aan je Cloudflare account.
  3. Nadat je het domeinnaam toegevoegd hebt op je Cloudflare account klikken we links op de zijbalk op ‘Rules’.
  4. Er zal een nieuwe pagina openen, druk hier op de knop ‘Create Page Rule’.
  5. Je kunt nu de redirects instellen. Hieronder zullen we een kleine toelichting geven op wat je precies moet instellen.

Toelichting: 301 redirects instellen

Nadat wij op ‘Create Page Rule’ hebben gedrukt opent zich er een venster waar we de regels kunnen instellen voor de redirects.In dit voorbeeld willen we ervoor zorgen dat als wanneer men http://www of http:// intypen, deze automatisch geredirect worden naar het voorvoegsel waar je ook je website op hebt ingesteld. Door dit in te stellen, zul je meer laadtijd besparen. In dit geval gaan wij drie regels instellen. Dit is ook gelijk het maximaal aantal regels dat je met een gratis Cloudflare account mag instellen.

Je kunt de volgende gegevens invullen voor het doorsturen vanaf http://www > https://www.

If the URL matches: http://www.voorbeelddoorgestuurddomein.nl/*
Then the settings are: Forwarding URL
Select status code: 301 Redirect
Enter destination URL: https://www.voorbeelddoorgestuurddomein.nl/$1

Je kunt de volgende gegevens invullen voor het doorsturen vanaf https:// > https://www.

If the URL matches: https://voorbeelddoorgestuurddomein.nl/*
Then the settings are: Forwarding URL
Select status code: 301 Redirect
Enter destination URL: https://www.voorbeelddoorgestuurddomein.nl/$1

Je kunt de volgende gegevens invullen voor het doorsturen vanaf http:// > https://www

If the URL matches: http://voorbeelddoorgestuurddomein.nl/*
Then the settings are: Forwarding URL
Select status code: 301 Redirect
Enter destination URL: https://www.voorbeelddoorgestuurddomein.nl/$1

Uitgelicht: Tevens zie je achter de eerste URL een ‘/*’ staan en bij de destination URL ‘$1’. Dit zorgt ervoor dat wanneer men de door te sturen domeinnaam intypt en achter de domeinnaam bijvoorbeeld /contact neerzet, deze automatisch doorgestuurd wordt naar het hoofddomein. Dit noemen ze ook wel Wildcard.

Geplaatst op

Opzetten van een zakelijke website

Handen samen als één team!

Heb je plannen op binnenkort jouw eigen onderneming te starten, of ben je al reeds ingeschreven bij de Kamer van Koophandel? Begin dan met het opzetten van een zakelijke website. Je website is tevens je visitekaartje en aangezien anno 2022 internet niet meer weg te denken is, zul je hier wat ons betreft extra aandacht aan mogen besteden. In deze blog proberen we je zo veel mogelijk praktische informatie te geven, zodat je goed kunt starten en wellicht een professionele en zakelijke website binnen no time hebt opgezet.

De domeinnaam alvast laten vastleggen

Om er voor te zorgen dat je zakelijke website ook vindbaar wordt en je de website makkelijk kunt vinden is het noodzakelijk om een domeinnaam vast te laten leggen. Hierbij is het niet van belang of je al bent ingeschreven bij de Kamer van Koophandel, want zodra jouw domeinnaam is vastgelegd kan er niemand anders meer mee vandoor gaan. Meer weten over domeinnamen? Lees dan ook eens deze uitgebreide blog waar we je alles vertellen over domeinnamen:

Het opzetten van je zakelijke website

Ben je er al over uit wie jouw zakelijke website zal opzetten, of heb je wellicht al de keuze gemaakt om zelf aan de slag te gaan door de website zelf op te zetten? Dit kan een lastige vraag zijn. Vandaag de dag zijn er veel aanbieders die jouw zelf de mogelijkheid bieden om een eigen website op te bouwen. Dit kan handig en voordeliger zijn dan een ervaren webdesigner / web developer een website te laten opzetten. Echter zijn hierover ook wel weer voor en nadelen over te benoemen. De voordelen van je website zelf opzetten (kunnen) zijn:

  • Vrij eenvoudig zelf een website op kunnen zetten
  • Lage kosten
  • Veel aanbieders beschikbaar
  • Geen technisch inzicht nodig

Echter zitten er ook nadelen aan het zelf opzetten van je website, je kunt hierbij denken aan bijvoorbeeld:

  • Geen maatwerk mogelijk
  • Maandelijkse kosten voor het hosten liggen vaak hoger
  • Designs waar je vaak uit kunt kiezen zijn niet uniek
  • Je kunt je website niet verhuizen naar een andere provider

Waar kan ik zelf mijn website maken?

Wil je toch echt zelf aan de gang met het maken van je eigen website? Dan zou je bij de volgende partijen terecht kunnen: Wix, Shopify, Hostnet, Squarespace, Lightspeed. Dit zijn de wat commerciëlere partijen, uiteraard zijn er nog veel meer partijen waar je vrij eenvoudig zelf je website kunt bouwen. Wist je bijvoorbeeld ook dat het meest gebruikte content management systeem, WordPress zowel gehost kan worden bij WordPress zelf dan wel op een eigen server? Lees in onze blog over content management systems meer hierover.

Afbeeldingen gebruiken voor je website

Nadat je de keuze hebt gemaakt of je de website zelf wilt maken, of dat je hem door een partij wilt laten ontwikkelen, zullen we ook moeten kijken naar de inhoud. Hierbij ga je ongetwijfeld gebruik willen maken van afbeeldingen. Helaas is het niet toegestaan om zomaar elke afbeelding te gebruiken die je geschikt acht. Het kan namelijk zijn dat de afbeeldingen die je wilt gebruiken voor je website auteursrechtelijk beschermd zijn. Om toch leuke afbeeldingen op je website te kunnen zetten, zou je deze zelf kunnen maken. Echter zijn er ook websites waar gratis stockfoto's worden aangeboden. In deze blog lees je alles over het gebruik van afbeeldingen op je website.

Je website vindbaar maken

Voordat je jouw website oplevert of laat opleveren, is het ook van belang om even te kijken naar de vindbaarheid van je website. Dit kan op verschillende manieren. Zo kunnen we aanraden om de website aan te melden via Google Search Console & Bing Webmaster tools. Ook zal het helpen om goede content te schrijven. Tevens een erg belangrijke methode om hoger te ranken in zoekmachines is door het gebruiken en gebruik maken van backlinks. Lees alles over het beter vindbaar maken van je website in onze eerdere blog. Tot slot kan het ook lonen om je website qua snelheid en performance te optimaliseren.

Verder profileren naast je websites via socialmedia kanalen

Naast je eigen website te hebben, is het ook belangrijk je verder te profileren via socialmedia kanalen als Facebook, Instagram, Twitter & Linkedin. Vooral als je jouw website nog bekend moet maken is het verstandig om ook gebruik te maken van andere instrumenten zoals socialmedia. Heb je bijvoorbeeld een leuke blog geschreven? Plaats deze dan ook op al je socialmedia kanalen met een linkje naar de desbetreffende blog, om zo meer website traffic te genereren.

TIP! Plaats je vaak video’s op je website? Dan is het aan te raden om je video’s te uploaden naar bijvoorbeeld je YouTube of Vimeo kanaal. Zo bespaar je veel schijfruimte en maak je je zelf ook bekend via socialmedia.

Wijs je bezoekers op aanwezigheid van cookies

Zoals je wellicht op de meeste zakelijke websites hebt kunnen zien, is dat bijna iedere zakelijke website over een cookiebanner beschikt. Het is sinds 5 juni 2012 verplicht om de website bezoeker te wijzen op aanwezige cookies. Deze regels gelden voor de hele Europese unie. Cookies zijn als ware kleine bestandjes die geplaatst worden op de computer van de bezoeker. Met deze cookies wordt het bijvoorbeeld mogelijk voor de website beheerder om te zien waar bezoekers vandaan komen, wat ze doen op je website en welke pagina’s ze bezoeken. Een goede cookiebanner die je kunt gebruiken is de cookiebanner van Cookiebot.

Meer advies nodig?

Heb je na het lezen van deze korte blog toch nog vragen? We geven je graag meer advies! Neem contact op via het contactformulier, chat, telefonisch of kom eens lang op locatie! Zo kunnen we onder het genot van een verse bak koffie advies geven over je nieuwe zakelijke website.

Beoordeel deze pagina post
Geplaatst op

WordPress website optimaliseren

WordPress website optimalisatie

Merk je op dat jouw WordPress website enorm traag laadt? Hier is wat aan te doen! WordPress is gemakkelijk te optimaliseren. Het ideale van dit platform is dat er de mogelijkheid is tot het installeren van plugins. Er zijn veel plugins beschikbaar die het optimaliseren van jouw website vereenvoudigen. In deze blog behandelen alleen plugins die wij zelf ook getest hebben. Vergeet straks niet het artikel te delen!

Wat kun je precies optimaliseren aan je website.

Binnen WordPress valt er veel te optimaliseren. Zo zijn er diverse plugins te installeren die afbeeldingen comprimeren en optimaliseren. Javascript, HTML en CSS’s bestanden kun je minfyen en samenvoegen. Jouw WordPress website kan aangesloten worden op een CDN netwerk zoals Cloudflare en zo zijn er nog een aantal punten.

Hulp nodig bij het optimaliseren?

Wij staan graag voor je klaar om je te helpen bij het optimaliseren van jouw WordPress website. Ook als je ergens niet uitkomt tijdens het lezen van dit artikel, mag je altijd even contact opnemen. Dit kan telefonisch, per e-mail of via de chat en natuurlijk onze socialmedia kanalen. Wist je dat wij gevestigd zijn in het centrum van Amsterdam? Je mag bij ons altijd een afspraak maken om langs te komen.

GZIP compression inschakelen.

Een van de makkelijkste manieren om je WordPress website sneller te maken is het gebruik van GZIP compression. Wat is GZIP compression? We leggen het je graag uit. Gzip staat voor GNU zip en is een datacompressiemethode. GZIP zorgt er voor dat webpagina’s, stylesheets en scripts geminimaliseerd worden. Over het algemeen kun je met GZIP-resources met veel tekst al verkleinen tot 70 a 90%. Het is daarom niet alleen een van de makkelijkere manieren, maar ook een van de beste manieren om jouw WordPress website te optimaliseren.

Om GZIP compression in te schakelen kun je inloggen via jouw FTP-programma op jouw webserver waar de website staat. In de hoofdfolder (rootfolder) maak je een nieuw bestand aan en noemt het “.user.ini” tot slot geef je het bestand de bestandsrechten 644 mee. Mocht dit bestand al aanwezig zijn, dan open je dit bestand en voeg je vervolgens de volgende code toe:

zlib.output_compression = 1

Sla het .user.ini bestand op en daarna ga je opzoek naar het .htaccess bestand. Het kan zijn dat er geen .htaccess bestand aanwezig is. Deze kun je vrij eenvoudig aanmaken door een nieuw bestand te creëren. Je noemt dit bestand vervolgens ".htaccess" en geeft het de bestandsrechten 644 mee. We openen vervolgens het .htaccess bestand en zetten er de volgende code in:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

GZIP-compressie hoort nu volledig geactiveerd te zijn. Het kan ook zijn dat jouw webserver geen GZIP ondersteund, dit merk je gauw genoeg bij het testen van je website. Om je website te testen kun je websites als GTMetrix, PageSpeed Insights, Pingdom gebruiken.

Expired headers toevoegen aan je .htaccess bestand.

Naast GZIP compression kun je ook expired headers instellen voor jouw WordPress website. Expired headers zijn opdrachten die naar het browser gestuurd worden om te bepalen of een bestandstype wel of niet geladen moet worden uit de cache. Ook wordt vanuit de expired headers duidelijk wat het tijdsbestek is van een op te bouwen cache. In het voorbeeld zie je staan “access 1 year”. Dit wil zeggen dat als iemand vandaag jouw WordPress website voor het eerst bezoekt, deze website nog 1 jaar uit de cache wordt opgehaald bij ieder nieuw bezoek. Dit vervalt uiteraard wanneer je zelf jouw browser cache leegt. Hieronder vind je de expires header die je kunt toevoegen aan je .htaccess bestand.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Het optimaliseren van jouw website met caching.

Wat is caching? Dat hoor ik je zeggen! Caching is het tijdelijk opslaan van jouw website in het korte termijn geheugen. Elke keer dat je een website bezoekt wordt deze website opgeslagen in jouw browser in de tijdelijke cache. Waarom dit zo belangrijk is, heeft te maken met de snelheid van jouw pagina’s die moeten inladen. Zonder het gebruik van caching duurt het laden van de pagina’s langer dan als je wel caching zou gebruiken. Op het moment dat je een pagina bezoekt slaat het browser gedeeltes van de pagina op in de cache. Wanneer je zo’n pagina vervolgens op een later moment weer zou bezoeken, controleert je browser eerst of er wellicht iets in jouw cache geheugen is opgeslagen. Mocht dit zou zijn, dan zal de webpagina meteen naar voren komen aangezien deze al opgeslagen staat op de computer in het desbetreffende browser.

Voordelen van WordPress laten cachen.

Naast dat caching zorgt voor een snellere website, wat altijd fijn is voor de gebruikerservaring, zorgt caching ook voor databesparing voor mobiele gebruikers, denk aan gebruikers van smartphones en tablets. Omdat deze groep vaak mobiel internet gebruikt kan dit erg prijzig zijn. Daarom is caching ideaal omdat er zo minder bandbreedte verbruikt wordt omdat de website immers uit de cache opgehaald wordt.

Het gebruik van de caching plugin WP Optimize.

Een van de betere plug-ins om jouw website te cachen is WP Optimize. Met deze plugin kun je naast caching ook gebruik maken van de andere functies. Zo is het ook mogelijk om met deze plugin gebruik te maken van de volgende functies: Database optimalisatie, Comprimeren van afbeeldingen, en tot slot minifying van scripts en stylesheets.

Installeren, activeren en configureren van de plugin WP Optimize.

Ga opzoek in de pluginstore van je backend. “Plugins” > “Nieuwe plugin” > en zoek hier naar WP Optimize. Als het goed is zie je gelijk links bovenaan de desbetreffende plugin staan. Mocht je hem niet kunnen vinden, dan kun je hem hier downloaden. Na het installeren klik je nog even op ‘Activeren’ en je caching plugin is geïnstalleerd.

Het optimaliseren van de database.

Vervolgens klikken we in de linker sidebar op ‘Plugins’ en zoeken de plugin op. Klik op “Optimaliseren”. Je zult dan op het tabblad ‘Database’ uitkomen. We starten dus met het optimaliseren van de database. Dit doen we door op de button “Start alle geselecteerde optimalisaties”. Je kunt eventueel nog op eigen inzicht meer bepaalde selectievakken aanvinken. Persoonlijk laten we de gekozen opties voor optimalisaties staan, en optimaliseren deze. Je zult nu een loader bij alle componenten zien die aan het optimaliseren zijn. Zodra deze loaders gestopt zijn is het proces voltooid en kunnen we naar het volgende tabblad genaamd “Afbeeldingen”.

Afbeeldingen comprimeren en optimizen.

Nadat we de database hebben geoptimaliseerd, kunnen we beginnen met de afbeeldingen. Het is ook mogelijk met deze plugin alle afbeeldingen automatisch te laten comprimeren. Schakel deze functie in door op “Automatisch nieuw toegevoegde afbeeldingen comprimeren”. We zouden dit persoonlijk wel aanraden. Bij “Opties voor compressie” laten we de optie “Aangepast” staan zoals deze al staat ingesteld. Hiermee worden de afbeeldingen naar een gangbaar gegeven gecomprimeerd. Laat de schuif in het midden staan zoals deze al staat ingesteld. Je kunt hem eventueel op eigen gevoel nog iets naar links verplaatsen om de afbeeldingen nog iets meer te comprimeren. Tot slot kun je hier ook nog op geavanceerde opties klikken. Aangezien we enorm veel opties hebben wat betreft comprimeren en optimaliseren kunnen we deze hier helaas niet allemaal behandelen. Verderop in dit artikel lees je ook nog over het optimaliseren van je afbeeldingen met de Smush plugin.

De cache functie gebruiken van WP Optimize.

Nadat we klaar zijn met de afbeeldingen, is het tijd om de cache functie te configureren. Ga hiervoor naar het volgende tabblad ‘Cache’ toe. Gelijk bovenaan de pagina vind je ook een handige video die je uitlegt wat is caching is, hoe het werkt en hoe je het toepast. Om gebruik te maken van de cache functie dien je bovenaan de pagina het schuifje “Zet cachen pagina’s aan” naar rechts te zetten, tot deze blauw opkleurd. Dit kan soms even duren. Nadat dit afgerond is, klik je nog even onderaan de pagina op “Sla wijzigingen op”. Nu is caching geactiveerd en actief. Tot slot voegen we nog een klein stukje code toe in het .htaccess bestand om de website optimaal te laten cachen. Dit stukje code kun je plaatsen onder de code voor GZIP compression wat we eerder in dit artikel hebben geplaatst en opgeslagen. De code is als volgt:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>

Sla het bestand op, en verwijderd de cache. Dit doe je vanuit je WordPress backend. Je ziet als het goed is na het activeren van de cachinig optie in de plugin WP Optimize, boven in beeld een knop genaamd “Cache legen”. Hier kun je kiezen voor “Cache geheugen opschonen voor alle pagina’s” of het cache geheugen legen per specifieke pagina. Nadat je de cache geleegd hebt, zijn alle wijzigingen die je aan je pagina hebt gedaan zichtbaar.

Caching performance testen na optimalisatie.

Nadat je caching ingesteld hebt, is het handig om te kijken wat dit doet qua prestaties. Om dit goed te testen, gebruiken we hier GTMetrix Legacy reports voor. Met legacy reports kun je erg goed zien welke bestanden er gecached worden en hoe intensief caching toegepast wordt.

Minify van scripts en stylesheets.

Met de laatste stap die we moeten nemen in deze plugin zijn we aanbeland bij het tabblad “Minify”. Dit is een zeer belangrijk onderdeel om jouw WordPress website nog beter te optimaliseren en sneller te maken. Met deze optie kun je het aantal requests terug dringen. Requests zijn verzoeken die gedaan worden vanaf jouw website. Alle losse onderdelen op jouw website zijn in principe per stuk allemaal requests- en verzoeken. Stel dat je drie afbeeldingen hebt, twee scriptjes en een stylesheet dat ingeladen wordt tijdens het openen van je website, Dan moeten we eerst wachten tot deze ingeladen zijn.

Des te meer verzoeken er verwerkt moeten worden, hoe langer het wachten duurt, en dit wil je dus niet. In dit voorbeeld hebben dus te maken met maximaal 6 verzoeken. Wat uiteraard erg weinig is. Gemiddeld heeft een goede WordPress website zo’n 85 requests. Zit je hierboven dan kan je website al een stuk langzamer worden. Het zou nog mooier zijn om lager dan die 85 requests uit te komen. Dit kunnen we realiseren met de functie Minify.

Minify inschakelen en optimaliseren.

Om bestanden te minifyen zullen we als eerst de optie “Verkleinen inschakelen” actief moeten maken. Zet het schuifje naar rechts tot het blauw opkleurd. Vervolgens zien we drie opties omhoog komen die allen staan aangevinkt. Dit kun je eerst prima aanhouden. Klik nu op de button “Schoon de verkleinde bestanden op”.

Het kan een beetje tricky zijn, de optimalisatie van bestanden als Javascript en CSS stylesheets. Na het wijzigen van de minify settings, legen we eerst de pagina cache weer uiteraard, en testen de website uitvoerig op styling maar ook functionaliteit. Uiteraard kun je ook de website gelijk testen op GTMetrix of andere performance testing websites.

LET OP! Gebruik je Cloudflare? Dan zul je je een keuze moeten maken waar je graag je scripts en stylesheets laat minifyen. Je kunt geen bestanden dubbel minifyen, dit zal in de meeste gevallen voor problemen zorgen.

Het gebruik van de caching plugin WP Fastests Cache.

De volgende plugin die we gaan behandelen is de plugin van Emre Vona genaamd WP Fastests Cache. Deze plugin werkt weer iets anders dan de besproken plugin van WP Optimize. Beide plugins optimaliseren je website door middel van caching. Echter, kun je bij deze plugin jouw CDN netwerk verbinden middels een API. Een API is niets meer dan een integratie.

Inhoudelijk over het optimaliseren van afbeeldingen en caching gaan we hier verder niet op in. We gaan nu bespreken hoe je een koppeling kunt leggen met in dit geval Cloudflare en WP Fastest Cache op jouw WordPress website.

Het grote voordeel van deze integratie is dat je niet meer hoeft in te loggen op Cloudflare om hier je opgebouwde cache te legen. Je hoeft dan na het wijzigen van een pagina of iets dergelijks enkel nog je pagina cache te legen op je WordPress website zelf. Met deze cache flush wordt ook gelijk de cache history bij Cloudflare zelf geflushed. Wel zo handig!

We gaan ervan uit dat je de plugin hebt kunnen vinden in de plugin store van je WordPress backend.  Problemen met het vinden van de plugin? Klik dan hier. Om Cloudflare te koppelen middels een API gaan we naar “Plugins” > “Instellingen” > “CDN”. Nu zie je een tabblad met meerdere iconen. Klik hier op de icoon van Cloudflare (“CDN by Cloudflare”).

Er wordt nu gevraagd om een token op te geven. Dit token kun je enkel genereren als jouw WordPress website al reeds aangesloten is op Cloudflare. In dit geval gaan we er van uit dat dit al bij jouw WordPress website al is gebeurt. Om een API token te genereren moeten we inloggen op Cloudflare. Log nu in op Cloudflare en volg de volgende stappen:

  1. Klik op de juiste domeinnaam die je wilt verbinden met de plugin.
  2. Op het huidige tabblad “Overview” zie je rechtsonder aan de pagina “Get your API token”. Klik hier op.
  3. Nu komen we uit bij een tabblad waar je jouw gegevens en taal kunt wijzigen. Bovenin beeld zien we in het menu staan “API tokens”, deze klikken we aan.
  4. Om een nieuwe API token aan te maken klikken we op “Create Token” en kiezen hierbij “Edit zone DNS” door op “use template” te klikken.
  5. Nu is het de bedoeling de juiste regels aan te maken. We beginnen eerst de permissions in te stellen. Deze moeten als volgt staan:
    PermissionsZone >> Cache Purge >> Purge
    Zone >> Zone Settings >> Edit
    

    Dit zijn de bovenste twee invoervelden onder elkaar. Zie je geen 2 invoervelden onder elkaar? Klik dan nog even op de “+Add more” button.

  6. Nu stellen we de onderste regel in. Het instellen hangt hier van af wat hoe jouw situatie is. Je kunt deze API ook voor alle domeinnamen instellen binnen jouw Cloudflare omgeving. Kies dan voor “Include >> All zones”. Stel je deze API in voor een specifiek domein, kies dan de optie “Include >> Specific zone” en zoek hier de juiste domeinnaam op.
    Zone resourcesInclude >> All Zones
    Include >> Specific zone > “example.nl”
  7. De laatste stap is om op "Create Token” te klikken. Nu zul je het API token in beeld zien en kun je klikken op “Copy”.

De juist gegenereerde API gaan we implenteren in jouw WordPress website. We keren terug naar het WordPress dashboard. Om de API te implenteren voeren we de volgende stappen uit:

  1. Ga naar “Plugins” > “WP Fastest Cache” > “Instellingen” > “CDN” en klikken op “CDN by Cloudflare”.
  2. We vullen hier de API token in dat wij van Cloudflare hebben ontvangen en klikken op “Next”.
  3. In het volgend scherm krijgen we de “Auto minify” opties te zien. Zoals eerder besproken is, moet je hier opletten of je wilt minfyen via Cloudflare of via jouw eigen WordPress website (WP Fastest Cache). Maak hier een keuze en klik op “Next”.
  4. Je kunt hier nog kiezen om “Rocket Loader” in te schakelen. Maak je keuze en klik op “Next”. Mocht je meer informatie willen weten over de Rocket Loader functie, lees dan het hele artikel hier.
  5. Nu krijgen we het tabblad met “Browser Cache Expiration” in beeld. Hier kunnen we aangeven hoelang we willen dat Cloudflare de cache bewaard. Dit stellen we in op standaard 6 maanden. En klikken hier weer op “Next”.
  6. Ready to go! Jouw WordPress website is nu verbonden middels een API met Cloudflare.

Mocht je na het uitvoeren tegen bepaalde punten aanlopen, waar je hulp bij nodig hebt? Geen probleem! Laat het ons weten en we helpen je graag verder.

Afbeeldingen optimaliseren op jouw WordPress website.

Wist je dat het inladen van (grote) afbeeldingen voor performance verlies leidt? Jouw WordPress website kan door het optimaliseren van grote afbeeldingen stukken sneller worden! Soms kan het comprimeren van afbeeldingen afdoende is. Maar het komt ook voor dat afbeeldingen middels HTML (dus in de code) worden verkleind van bijvoorbeeld 1920x1080 pixels naar 350x190 pixels. Het probleem hierbij is dat de afbeelding zijn ware formaat behoud en daarom eerst de grote afbeelding ingeladen moet worden, terwijl hij maar klein op de website wordt weergegeven. Dit is zonde en zal leiden tot een hoger bounce percentage. We bespreken in dit hoofdstuk de verschillende manieren om jouw afbeeldingen te optimaliseren en te comprimeren.

Afbeeldingen optimaliseren met behulp van Smush.

De makkelijkste manier om jouw WordPress website te optimaliseren, wat afbeeldingen betreft is het gebruik van een plugin. In deze case gebruiken we  de plugin van Smush.

Zoek hiervoor de volgende plugin op “Smush – Lazy Load Images, Optimize & Compress Images” van de uitgever “WPMU DEV” en installeer deze plugin. Na het installeren van de plugin activeer je deze nog even en gaan we naar de instellingen toe. Er zal nu een popup naar bovenkomen en deze gaan we even samen met je door:

  1. Klik allereerst op “Setup starten”.
  2. Je krijgt nu de vraag of je automatische compressie in wilt stellen. Deze vinken we aan. Elke keer als er een nieuwe afbeelding geüpload wordt zal deze automatische gecomprimeerd worden. En we klikken weer op “Volgende”.
  3. Nu wordt er gevraagd of je EXIF-metadata wil verwijderen. Hier kiezen we uiteraard ook weer voor. Het voordeel hiervan is dat de afbeeldingen kleiner worden qua bestandsgrootte. En klikken weer op “Volgende”.
  4. Uiteindelijk zijn we bij een best belangrijk proces aangekomen, het lazy-loaden van afbeeldingen. Dit is afhankelijk van je website of het even soepel werkt. Je zou het kunnen testen, en eventueel bij fouten uit kunnen schakelen. Het is zeker aan te raden, en zal ook leiden tot minder HTTP requests. Na je keuze gemaakt te hebben klikken we op “Volgende”.
  5. De laatste stap is of jij ook gebruikersgegevens wil verzenden bij eventuele fouten of iets anders dergelijks. Maak hier jouw eigen keuze en klik op “Setup wizard afronden”.
  6. Na het afronden van de Setup wizard, worden alle afbeeldingen gecontroleerd.
  7. Vervolgens scroll je iets naar benden op de pagina tot je de button “Bulk smush nu” en hier klikken we op.
  8. Nu worden alle afbeeldingen die aanwezig zijn geoptimaliseerd voor jouw WordPress website.
  9. Nadat de afbeeldingen allemaal geoptimaliseerd zijn scrollen we een klein stukje door naar beneden en zetten bij “Afbeeldingen verkleinen” het schuifje naar rechts, zodat deze blauw opkleurd. We zouden persoonlijk een maximum formaat van 1920 pixels breed en 1080 pixels hoog adviseren. Lager kan soms nog beter zijn, maar dit heeft wel invloed op de kwaliteit van de afbeelding. We klikken vervolgens op “Instellingen bijwerken”.
  10. Gefeliciteerd alle afbeeldingen op jouw WordPress website zijn nu geoptimaliseerd!

We hebben tot nu toe wel de belangrijkste opties besproken die er mogelijk zijn in de plugin van Smush. We willen je zeker aanmoedigen om even rond te kijken en te testen welke mogelijkheden er nog meer zijn voor het optimaliseren en het sneller maken van jouw WordPress website.

Afbeeldingen optimalisatie via GTMetrix (Legacy reports)

Wil je liever geen gebruik maken van plugins die de afbeeldingen optimaliseren? Dan is het ook mogelijk de afbeeldingen allemaal handmatig te optimaliseren. Het uitvoeren van de onderstaande stappen kan erg lastig zijn voor beginners. Gebruik in dat de plugin van Smush zoals hierboven al reeds besproken is.

Via GTMetrix is het vrij eenvoudig om van het originele afbeelding bestand, het geoptimaliseerde bestand te downloaden en terug te plaatsen op de server waar het origineel ook staat. Je kunt de locatie opzoeken door de URL te volgen in GTMetrix. Deze kun je vervolgens herleiden naar het pad van jouw server, zodat je weet waar je deze foto moet terug zetten. Om deze functie te gebruiken moeten we wel ingelogd zijn bij GTMetrix. Je kunt een gratis account aanmaken, en het account instellen op “Legacy Reports”. Bekijk nu onze tutorial hoe je Legacy reports kan instellen!

Hoe optimaliseren we afbeeldingen via GTMetrix? Volg de onderstaande stappen:

  1. Login met je juist aangemaakte account in bij GTMetrix (of bestaand account).
  2. Voer nu jouw URL in en start de test.
  3. Klik bij het tabblad “PageSpeed” op “Optimize images” en bekijk hier de te optimaliseren afbeeldingen.
  4. Je ziet hier als er afbeeldingen te optimaliseren zijn, een rijtje met mogelijke afbeeldingen. Klik hier op “Optimized version”.
  5. De afbeelding zal nu opkomen in een aparte tabblad. Sla deze afbeelding met dezelfde naam op die je ook in de link ziet verschijnen van de vorige tab.
  6. Upload de afbeelding nu in de exacte map via een FTP cliënt. Deze map kun je traceren door het pad te volgen van de afbeelding. Het pad kun je vinden in de URL.
  7. Wis eventuele cache en test je website opnieuw. Je zult zien als je alle afbeeldingen hier geoptimaliseerd hebt, de balk volledig groen zal kleuren.

TIP! Moet je de afbeeldingen nog resizen? Doe dat dan eerst voordat je de afbeeldingen gaat optimaliseren. Anders zul je er dubbel zo veel werk aan hebben.

Geschaalde afbeeldingen gebruiken.

Wat vaak tot een extreem hoge performance boost kan leiden, is het schalen van jouw afbeeldingen. Doe dit in het exacte formaat dat je ook op je website gebruikt. Zo bespaar je veel datagebruik van afbeeldingen die anders onnodig lang moeten inladen. Het is niet de bedoeling om grote afbeeldingen te uploaden in WordPress. WordPress heeft dit zelf al dicht gezet door het upload limiet te verlagen naar 2MB, wat alsnog erg groot is voor een afbeelding voor op je website. Zorg dat je afbeeldingen altijd onder het formaat van 1920 bij1080 pixels blijven. En dat afbeelding maximaal 1MB groot is. Dit is wel echt het uiterste!

We gebruiken in dit geval GTMetrix Legacy reports om te checken of jouw website wel geschaalde afbeeldingen gebruikt. Hiervoor ga je in GTMetrix naar de tab “PageSpeed” en kijkt nu in de rubriek “Serve scaled images”. Mocht jouw pagina geen geschaalde afbeeldingen bevatten, dan zul je ze hier in het overzicht niet tegenkomen. Zijn er afbeeldingen gevonden? Dan zie je nu achter de link van de afbeelding ongeveer deze tekst staan “is resized in HTML or CSS from 3231x1420 to 102x45. “. Dit kun je als volgt uitlezen; de aangetroffen afbeelding heeft een oorspronkelijk formaat van 3231x1420. Deze afbeelding wordt op de website weergegeven in het formaat 102x45.

Het is dan de bedoeling om in bijvoorbeeld Photoshop eerst een nieuw document aan te maken met de volgende waardes: 102 pixel bij 45 pixel hoog. Hier plak je vervolgens de afbeelding in die je weer van GTMetrix kan halen. Sla het bestand op en zet het terug via FTP. Leeg de cache van je website waar nodig en test de website opnieuw. Nu zul je waarschijnlijk ook opmerken dat je de afbeelding opnieuw moet optimaliseren. Doe dit zoals eerder in dit artikel is besproken.

Jouw WordPress website nog beter optimaliseren.

We komen nu aan het einde van dit artikel. We hopen dat je er wat aan hebt, en jouw WordPress website nu goed kunt optimaliseren. Je weet nu hoe je de laadtijd van je WordPress website kunt verbeteren. Ook weet je nu wat grote afbeeldingen kunnen doen met de laadtijd van jouw website of webshop. Tevens hebben we een greep uit het assortiment van cache en optimize plugins gedaan, behandeld en besproken. Er zijn nog zo veel meer plugins en tools beschikbaar. Laat je dan ook niet afschrikken en ga op onderzoek uit en bekijk hoe jij jouw WordPress website nog beter kunt optimaliseren. Heel veel succes gewenst!

Kom je ergens niet uit, geen probleem!

Wij kunnen je helpen bij het optimaliseren van jouw WordPress website. Wil je meer informatie? Neem dan contact met ons op. Wil je langs komen? Dat is mogelijk, wij zijn gevestigd op de Marnixstraat in het centrum van Amsterdam ter hoogte van de Westerstraat.