Let’s put our geek hats on today and talk about website optimization! Now there are lots of ways you can go about optimizing and speeding up your website, but today I want to focus exclusively on CloudFlare, a free service that can optimize, accelerate, and protect your site!
You may recall me mentioning CloudFlare briefly in my website blueprint, and it’s so amazing, I’m actually dedicating a full post to it. I’ll skip the basics since they actually have a great getting started guide. What I really want to share are 5 tips that I use for my blog that have really made an impact on its performance:
#1. The Speed options are your best friend
CloudFlare comes with some performance-enhancement features like auto-minifying your css/html files and loading your script files asynchronously. In the Speed section, I would recommend enabling the Auto-Minify features and setting the RocketLoader to automatic.
For the most part turning these options on shouldn’t cause any problems with your site, but if some third party scripts (eg. ad display script) stop loading correctly after turning on RocketLoader, simply add data-cfasync="false" to the problematic script tags, like <script data-cfasync="false" src="/javascript.js"></script>
If your hosting provider is a CloudFlare partner you also get the additional Railgun feature that can speed up your site even further. All you have to do is turn it on!
#2. Setup page rules to cache all front-facing pages
By default CloudFlare caches static content, including css, js, and image files. Html files are not cached, and unless you’re constantly revising your posts, it’s probably a good idea to cache them once they’ve been published.
In your CloudFlare control panel on the Page Rules section, add a new page rule and configure it as follows, replacing www.yourdomain.com with your domain name. Make sure you select “cache everything” and set the order to “last”. This is critical.
Next we want to setup a new page rule so that your admin section is excluded from any caching or performance features, as those can sometimes break the backend function of your site.
As you can see, I’ve not only disabled caching and performance features for my backend pages, I’ve also upped the security level to high for these pages!
#3. Purge your cache smartly
When your pages and files are cached, changes you make to your blog may not be immediately visible to your readers. That’s because they’re loading a cached version of your blog rather than fetching a fresh copy from your server each time. But what happens when you update one of your files? Under Caching >> Purge Cache, you can opt to purge everything, or if you’re smart, only purge individual files.
In this example, I’m purging my css and js cache so that everyone will be forced to load the latest stylesheet and javascript file from my server. CloudFlare also stores a list of recently purged files so that you can quickly re-purge it again if necessary.
Occasionally you’ll want to purge everything – WordPress upgrades, theme switches – but 99% of the time you should purge single files only.
#4. Enable the Scrape Shield app
CloudFlare allows you to seamless integrate a variety of apps with your site all in their control panel. One app that’s crucial to us bloggers is ScrapeShield, which can protect our content from getting stolen
As you can see, in addition to preventing other sites from “scraping” our content, it can protect any emails displayed on your blog from getting harvested by bots, prevent hotlinking, or even block users from pinning your images.
#5. Whitelist ip addresses of plugin services
Some plugins, like Jetpack, require access to your website and may be blocked by CloudFlare’s firewall. If you notice any issues with your plugins or any payment services after activating CloudFlare, get in touch with the plugin/service provider and let them know you’re using CloudFlare. They should provide you an ip address/range or ASN that you can whitelist by going to Firewall >> Access Rules. For Jetpack users, add “AS2635” and select “Whitelist” from the dropdown.
Look at the resources saved!
When I was still on a shared hosting plan with a 10gb/bandwidth limit, I was frequently hitting/exceeding that limit. But as soon as I connected my blog to CloudFlare, I was able to reduce my bandwidth by ~70%!
Not only does CloudFlare help save bandwidth, but it also can save your server resources by handling some of the requests via their servers rather than your own. More free server resources = better performance.
I highly recommend all bloggers take advantage of the free features offered by CloudFlare to optimize their sites. It’s simple to configure and they have tons of documentation on their various features.