How to Speed Up Page delivery with Cloudflare ?

If you are using any of the shared webhosting plan then I am sure you must have tried optimising your blog/website so it can deliver the content the fastest way possible. However there is not a single way or method which will ensure the same results on every other website but definitely some ways are same for every website that will make your page loads faster.

One such way is using a CDN(Content Delivery Network) which ensures your website visitors are quickly served by caching the static resources on cloud based network and serving the resources from nearest server instead of the main or origin server(your hosting account). People generally think that CDNs cost a lot however there is one service as mentioned in title – Cloudflare which also have a free plan. This free plan is enough to speed up your blog or website if configured properly. I have seen some bloggers believing that Cloudflare is only good as DNS usage nothing more than that however this is just a misconception as I have been using this service delivering thousands of pageviews without any fuss.

Before starting this tutorial I hope you already have a working webhosting account and domain name attached to it. Also I am writing this article taking wordpress CMS as an example however feel free to implement this on any other platform be it static website or dynamic one.

The very first step to ensure quick page delivery without creating much stress of web server resources is having a good coded theme. I have seen people ignoring this simply because they already have nice working theme from free options available on wordpress theme repository. The truth is most of these themes are coded inefficiently and makes too much calls for every single page load. This makes your website unusable with very slow loading during high concurrent users. So for this case I would advise you to first have a clean theme with super efficient code so that once your website grows you don’t have to change web design due to the fact that your theme wasn’t coded good.

With Cloudflare you have so many different options to configure the way that works for your website. I mean there is Page rules, Rocket Loader, minify options and lot other options that you can play with. However most of the times bloggers configures it all wrong and later complain that Cloudflare isn’t a good option seeing no result in Page load times. This is the reason why I thought to pen down the exact steps that worked for me after when I configured the cloudflare in best possible way without hitting much on your actual webhosting limits.

Here are exact steps which I used:

  1. Use minifying and caching plugins  to ensure that this part is completed at the server level instead of relying on Cloudflare option.
  2. While minifying ensure that you do not use inline all css option instead use compress option to minify on separate url.
  3. Once you have completed above steps, this is time to setup Cloudflare the best way.
  4. Though Cloudflare by default caches static content however you won’t be seeing much change so highly recommend you to have a separate URL for serving that will ensure parallel downloads.
  5. You can use subdomain like static.yoursite.com or cdn.yourwebsite.com or completely different domain to do this part. To achieve this simply create subdomain pointing to same IP address as that of main domain to your webhosting servers in cloudflare panel.
  6. After you have configured the cloudflare for subdomains, next you should do the same on cpanel. creating subdomains and pointing to main directories as that of main website.
  7. Once configured correctly you are ready to serve static content from sub domain. Simply use plugins like autoptimize or CDN enabler to configure CDN url. Once enabled your webpages would be serving your content from sub domain thus increasing speeds of webpage download as browser downloads all the assets parallel way.
  8. Cloudflare will cache and serve the page assets saving your web hosting plan’s bandwidth and also helping you achieve quick page loads.

The Advance Part:

Now consider if your content goes viral and some specific page is receiving damn high visitors, most of us would consider shifting our website to VPS hosting. But with Cloudflare you can control these occasional traffic hike by caching full html page. You can achieve this by enabling caching all feature under Page Rules which will serve full page from cloudflare servers without touching your webhost even once. That means all your visitors would be served from nearest location and even if you receive millions of pageviews, cloudflare would handle that for free.

cloudflare page rules

You can use cache all feature to cache single article or even caching all articles on your website. To do this use patterns like *yourwebsite.com/specific-page or *yourwebsite.com/*.html

If you are using html extension at end of page url structure then you can turn cache all articles as well. But do note some dynamic functions may not function correctly like blog commenting.

I hope this post have helped you in some way to control your increasing traffic and delivering same experience to all users without slowing down the speeds. If you find this useful do not forget to share this post with your other fellow webmasters or your friends.