Multisite, Hummingbird and Cloudflare: Make Your WordPress Network Blisteringly Fast

You may have caught the recent announcement that our Hummingbird performance plugin has been integrated with CloudFlare. But given that CloudFlare works on a domain level, what does this mean if you’re running a Multisite network?

The good news is that with one CloudFlare account you can cover multiple domains. Unlike many services, you don’t need a separate account for each domino, and you don’t need to pay extra if you’re using Multisite with subdomains or mapped domains.

In this post I’ll show you how to integrate Hummingbird with CloudFlare for the sites on your network, and identify the different approaches you need to take depending on whether you’re using subdirectories, subdomains or mapped domains.

Note: If you’re using Hummingbird and CloudFlare together on a single site installation of WordPress, this guide will also help you get set up.

But let’s start with an intro to CloudFlare.

CloudFlare: What it is and How it Works

CloudFlare is a service that incorporates a few key features designed to make your site perform better. These are:

A Content Delivery Network (CDN). This distributes the data from your site across multiple servers in different locations, meaning visitors to your site get faster response times as the data isn’t stored halfway across the world.
Optimization features designed to speed up your site (just like Hummingbird!)
Security delivered via a firewall as well as protection from DDoS attacks.

CloudFlare is designed to give people running small sites access to the kind of tools that only those managing huge enterprise level sites have had in the past, by leveraging its community of users and being able to learn from what’s happening to sites across its user base and apply that to the rest of the sites signed up with it.

If you want to find out more about what it does, check out this video:

Integrating Hummingbird and CloudFlare on Your Network

Let’s start by looking at how you set up Hummingbird with CloudFlare on your Multisite network. Once we’ve done that I’ll move on to looking at how it interacts with different domain setups.

Installing Hummingbird

Start by installing Hummingbird on your Multisite network, if you don’t already have it installed. The easiest way to this is by using the WPMU DEV Dashboard.

Once you’ve got Hummingbird installed, take some time to run a scan and make any tweaks you need to. I’ve done that and got a score of 83%:

Let’s see if it improves once I’ve activated CloudFlare.

Creating a CloudFlare Account and Adding Your Domain

Now you’ve got Hummingbird up and running, it’s time to set yourself up with CloudFlare. If you haven’t already, create an account and log in. You can create a free account or there’s a choice of premium options depending on your need.

Now CloudFlare will promote you to add your domain name. Type (or copy) the domain for your network in the field provided:

Click the Scan DNS Records button and CloudFlare will check your site’s DNS.

CloudFlare will start scanning your DNS records and play a video while it does so:

Cloudflare plays a video while it scans your DNS

When it’s done, click the Continue button.

You’ll then see details of your DNS records for your domain. Check these and confirm they’re correct by clicking the Continue button.

Next you’ll be asked to select a website plan for this domain. Pick the one that works for you: I’m going with a free one for now.

The next step is to edit the nameservers for your domain. CloudFlare will give you details of what you should change them to:

Do that and wait up to 24 hours while the DNS changes take effect. Click the Continue button to see a summary of your CloudFlare settings:

Adding CloudFlare to Hummingbird

Adding CloudFlare to Hummingbird couldn’t be easier. Go to the Hummingbird dashboard in your network admin screens, and scroll down to the CloudFlare metabox:

Hummingbird dashboard - box for Cloudflare settings

In the first field, enter the email address you used to register with CloudFlare.

Now back in your Cloudflare account, click on your name at the top right of the screen and then on My Settings. Scroll down to the API Key box:

The Cloudflare API key in your account information

Next to Global API Key, click on the View API Key button. Your API key will appear in a pop box. Copy that and paste it into the second field in the CloudFlare metabox in Hummingbird. Then click the Connect button.

Hummingbird will connect with your CloudFlare account and replace those fields with a Select domain drop-down box. Use this to select the domain of your network and click the Enable CloudFlare button.

Hummingbird and CloudFlare will link up and you’ll see a confirmation message:

Hummingbird's confirmation box - Cloudflare is working

You’re all set!

MULTISITE

We are the Multisite Experts. Period.

We’ve been developing plugins for WordPress Multisite for the past 10 years. With WPMU DEV you get our most popular plugins like Domain Mapping, Snapshot, Pro Sites, Support System, User Switching and bucket loads of others tailored specifically for Multisite! Woop!

LEARN MORE

Run a New Hummingbird Test

Once your DNS changes have taken place (mine took about an hour), you can run a new test to see what effect CloudFlare is having on your network.

My score has increased by 2%:

That’s not much but bear in mind I haven’t done anything yet to optimize my site. If I follow the tips given by Hummingbird I can improve things even more.

Adding Sites in Your Network

Depending on your Multisite setup, you may need to configure CloudFlare to work with the sites on your network. Let’s take a look at each scenario.

Subdirectories

Subdirectory based networks are the easiest to manage here. The good news is that you don’t need to do anything else once you’ve followed the steps above. This is because all of the sites in your network share the same root domain, so they’ll all benefit from the CloudFlare setup for that domain.

But even if you’re using subdirectories, if you’ve mapped some domains to your network you’ll still need to do some extra configuration. More of which shortly.

Subdomains

Subdomains are a little more complicated. You can add them manually to your CloudFlare account, or alternatively you can use wildcard subdomains.

Adding Subdomains Manually

So let’s say I have my network on subdomains and I’ve added a site at http://mysite.rachelmccollin.co.uk. To add this to CloudFlare I’d need to follow these steps:

Open your CloudFlare account, select the domain name of your network and click on the DNS icon at the top of the screen.
Add a CNAME or A record with the subdomain’s slug as its name:

Click the Add Record button and the subdomain will be added to your CloudFlare account. You don’t need to do anything in Hummingbird or in the site’s admin screens.

Adding Wild Card Subdomains

Adding wildcard subdomains is also pretty straightforward. Go to the same DNS screen in your CloudFlare account and then instead of adding the slug of an individual site as the name of the CNAME or A record, add an asterisk:

Adding a wildcard subdomain in Cloudflare

Then click the Add Record button to add wildcards to your account.

Mapped Domains

If you’re mapping domains to your network then you’ll need to add those to CloudFlare as if they were a separate website.

In CloudFlare, click on Add Site at the top of the screen and follow the steps outlined in the first part of this post.

However, there are a couple of differences in the way you need to set things up:

Once you’ve added the mapped domain, ignore the instructions to edit your domain’s nameservers. You want the domain to continue pointing to your network using A or CNAME records so you mustn’t change the DNS settings.
This leads to a mismatch in the Domain Mapping plugin: your network’s nameservers are pointing at CloudFlare while the mapped domain is pointing at the servers where you actually have the site hosted. This means that when the plugin checks the IP address it’ll return an error.

You can easily fix this by turning off the domain verification check in the domain mapping plugin.

In your network admin screens, go to Settings > Domain Mapping.

Scroll down to the Verify domain’s DNS settings option:

Make sure that No is selected, then save your changes.

Note: to access this option you’ll need to install our premium Domain Mapping plugin, not the free version.

Linking CloudFlare, Hummingbird and Multisite is Simpler than You Think

So that’s how you set up your WordPress Multisite network with Hummingbird and CloudFlare. Once you’ve done this and made some tweaks to your Hummingbird settings you’ll find that your site is faster and more secure. And all with just a few minutes work – well worth it.

View original post at WPMU