The Complete Guide to Using CloudFlare with Joomla

For a number of years now, CloudFlare® has been one of the most popular content delivery networks (CDN) on the web. Here's the complete guide to getting your Joomla site humming along with CloudFlare.

Why use a CDN?

Question. What is the one thing nearly ALL of the busiest websites in the world have in common?
Answer. They use a Content Delivery Network (CDN).

There's a few reasons for this.

  1. A faster website.
    If your web server is in Australia, your website will be slow to load for visitors from Europe or USA. And vice versa. It's a fact nobody can escape. You can GZip, cache and compress everything as much as you like but the lag will be noticeable. CloudFlare keeps a cache of all your website assets on it's servers all over the world and serves them to your visitor from the server closest to their location.
  2. Increased security
    When you set up CloudFlare for your website, all your traffic is routed through CloudFlare servers. This gives CloudFlare the opportunity to stop malicious traffic before it touches your server. CloudFlare also offer FREE SSL on all accounts - even free accounts.
  3. Reduced server load
    Imagine up to 80% of your images, video, javascript and stylesheets are served from other servers and not your own. Your server's ability to handle lots of traffic just increased dramatically. It reduces your bandwidth and speeds up your Joomla website.

Getting your website ready

CloudFlare provide a handy little plugin for installation on your Joomla website. It ensures Joomla receives the correct IP information for your visitor. Without it, Joomla thinks all traffic is coming from CloudFlare IP addresses. This plugin is required if you are using extensions like Akeeba Admin Tools or Brute Force Stop which identify and possibly block IP addresses. You don't want to inadvertently block all traffic to your website.

Get the plugin from here, install it via the Joomla Extensions Manager in the normal way and ensure it is published.

Whitelist CloudFlare IP addresses on your server

Most web servers will include some type of firewall to block malicious traffic. On WHM/CPanel this is usually called ConfigServer Firewall. It's important that CloudFlare IP addresses are whitelisted so traffic is never blocked. In most cases this will already be done but the ranges do change from time to time so you need to check it.

CloudFlare maintain an up to date list of IP ranges. This is the list of CloudFlare IPs as at 12 October 2015.

103.21.244.0/22
103.22.200.0/22
103.31.4.0/22
104.16.0.0/12
108.162.192.0/18
141.101.64.0/18
162.158.0.0/15
172.64.0.0/13
173.245.48.0/20
188.114.96.0/20
190.93.240.0/20
197.234.240.0/22
198.41.128.0/17
199.27.128.0/21

If you are using a shared hosting service

You usually don't have access to edit ConfigServer Firewall on a shared host. In this case, it would be best to contact your hosting support. Explain you are setting up CloudFlare and need to whitelist the relevant IP ranges.

If you have dedicated hosting or a VPS account using WHM

  1. Login to WHM.
  2. Navigate to ConfigServer Security & Firewall.
  3. Enter an IP range in the Quick Allow box.
  4. You can enter a comment but it's not necessary. In the screenshot below I've entered "CloudFlare IP range".
  5. Press "Quick Allow" to add the IP range to your IP tables.
  6. Repeat steps 3 to 5 for each IP range.
  7. Restart your Firewall.

quick allow CloudFlare IP CSF

Set up CloudFlare

Now your website and server are ready, it's time to create an account at cloudflare.com. It's free and only takes a minute.

When you have an account and are logged in, Click the Add Site link and enter the url for your Joomla website and hit the Begin Scan button. CloudFlare will scan your DNS records and create entries in its DNS manager. You should see something like this:

cloudflare dns

What this indicates is the A record and the CNAME of WWW will be routed through the CloudFlare network. That covers all your website traffic.

FTP, email and even access to CPanel will bypass CloudFlare and go directly to your server.  

If you need to insert any other records, you can do so now or come back to this later. Click Continue to go to the next step.

At this point you will be offered a plan. For now, select the Free option. The pro plans offer higher levels of caching and security but you will get excellent benefits from the free plan. 

Change your Primary DNS

The most crucial step in this process is changing your Primary DNS Record to point to CloudFlare. Take a note of the new NS records. You will need to go to your account management page at your Domain Registrar to make the change. This process will be different for each registrar. If you need help with this contact your registrar for support. 

NOTE: DNS records are cached by most web servers and ISPs so changes may take up to 24 hours to take effect. Also, there's no room for error when changing DNS. Make sure you enter the record exactly as provided. Double check it before you save it.

That's it. Your website traffic is now being routed through CloudFlare.

Using CloudFlare Free SSL on your Joomla website

First, you need to turn on Flexible SSL in your CloudFlare settings. You'll find it on the Crypto page. Here's a screenshot.

cloudflare crypto

It may take up to 30 minutes for Flexible SSL to become active. When it is active, point your browser to https://yoursitename.whatever you will notice your website will now load over SSL. But, it might look a bit broken. Most of your assets like stylesheet and javascript will be getting blocked because they are still being served over http, the non-ssl protocol.

Turning on Force SSL in Joomla's Global Configuration just causes an infinite redirect error. It seems the internet gods are getting confused when there's no actual SSL installed on the server.

To fix this issue, Simbunch created a free plugin that explicitly forces Joomla to load assets over SSL when https is used. Download the plugin from their website, install via the extension manager and publish it.

Setting up Page Rules

CloudFlare has a feature called RocketLoader. It compresses and bundles Javascript together to reduce HTML requests and increase the speed of your website. But, RocketLoader occasionally causes a small glitch in the Joomla Administrator where the Batch Processing box opens up every time you open the Article Manager which can be a little annoying.

You can define a page rule to tell CloudFlare to turn off RocketLoader for the Admin area. In fact, I prefer not to cache the admin at all. 

Here's how to do it.

  1. Click the Page Rules button in the toolbar.
  2. Click Add New Rule. This will open an accordion.
  3. Enter *yoursitename.whatever/administrator/* including the asterisks. They are wildcard characters.
  4. Scroll down the page. Change Caching to "Bypass Cache"
  5. Turn RocketLoader Off. Leave everything else at its default setting.

cloudflare pagerulles

Making changes to a live website

One of the issues you will face when making changes to a live website is that your changes will not be visible until you purge the file or allow enough time for CloudFlare to re-cache the files.

For text changes you won't have any issues but if you modify any Javascript files, CSS files or images you will need to purge the file from CloudFlare before the changes are visible.

CloudFlare will refresh it's copy of the file as soon as the page is browsed.

To purge a file is very easy. cloudflare caching iconClick the Caching icon on the toolbar.

The Caching screen presents various options. One of the options is Development Mode which allows you to temporarily bypass the CloudFlare cache. This can come in handy from time to time. There's also two buttons to purge files. One to purge everything and another to purge an individual file.

cloudflare-purge.png

Usually, you will only need to purge an individual file. Select Purge Individual Files. Enter the URL to the file and CloudFlare will delete it. Wait a few seconds, reload your page and you should see your changes.

In Conclusion

Everyone loves a fast loading website and it's common knowledge that page speed affects SEO. For that reason alone, it's important you use a CDN. Given that it's free to get started and can be set up in about 10 minutes, CloudFlare is a must-have inclusion for every Joomla website.

John PitchersSince 2005, I've supported my family working from home building Joomla sites for paying clients.

If you're a first-time Joomla user, or building a freelance career of your own, I'm sharing everything I've learned one post at a time.

“My mission is to help you become the best Joomler you can be. Are you ready?

 

Search

My Awesome Joomla Website