Setting up CloudFlare with WordPress

Over the last few weeks I’ve paid more and more attention to optimizing the performance on this website. As well as service as a blog, this site is a great place I can test techniques to keep on top of web optimization. The first thing I setup, some years ago, was Expires and Last-Modified headers to control content expiration on clients. The configuration for this is as follows:

ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/xhtml+xml "access plus 30 minutes"
ExpiresByType text/html "access plus 30 minutes"
Header unset ETag
Header unset Pragma
FileETag none

Because the Last-Modified header is sent, I then disable Entity Tag’s with the last three lines.

For some time, this configuration worked well, then I heard about CloudFlare. CloudFlare are a content delivery network (CDN) with a free offering.

CloudFlare take over DNS hosting – so you’ll need to point your nameservers to them and ensure that they have a copy of all DNS records for your domain. This process is painless and their setup process picks up a lot of common records just from querying your current nameservers. If you have a BIND compatible zonefile you can even upload it to make sure all records are migrated.

CloudFlare DNS

Once you’re confident that the DNS records are as you’d like, login to your domain registrar and update your nameservers. I use GoDaddy for this domain, from the “My Account” page navigate to your domain and click “Manage” next to the “Nameservers” heading:

GoDaddy CloudFlare Nameservers

Enter the nameservers CloudFlare assigned to you (rather than the ones I’ve used for my domain) and click Save. Once the change has propagated CloudFlare will be acting as a reverse proxy for your domain, caching content and delivering it from a geographic location closer to the visitor.

By default CloudFlare will cache content for a minimum of 4 hours, if you use Expires Headers correctly they will obey those and cache for longer. They also provide the ability to minify css, JavaScript and html.

CloudFlare Savings

A week or two on from enabling CloudFlare, their free service has knocked about 100ms off my overall load time but also reduced bandwidth and total requests by about 50%. CloudFlare also provide threat detection and prevention services, though I’m not clear on how accurate their statistics are as the numbers do seem unusually high. It’s certainly something I’ll continue to monitor.

Published by

Dave Hope

Dave is a Principal Software Analyst for a UK based retirement developer, in his spare time he enjoys digital photography and rock climbing.

Leave a Reply

Your email address will not be published. Required fields are marked *