{"id":159153,"date":"2016-09-16T13:00:02","date_gmt":"2016-09-16T13:00:02","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=159153"},"modified":"2018-08-20T23:48:41","modified_gmt":"2018-08-20T23:48:41","slug":"multisite-hummingbird-cloudflare-speed","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/multisite-hummingbird-cloudflare-speed\/","title":{"rendered":"Multisite, Hummingbird and Cloudflare: Make Your WordPress Network Blisteringly Fast"},"content":{"rendered":"<p>You may have caught the recent announcement that our Hummingbird performance plugin has been <a href=\"https:\/\/wpmudev.com\/blog\/hummingbird-cloudflare-integration\/\" target=\"_blank\">integrated with CloudFlare<\/a>. But given that CloudFlare works on a domain\u00a0level, what does this mean if you&#8217;re running a Multisite network?<\/p>\n<blockquote><p><em>Updated: <a href=\"https:\/\/wpmudev.com\/blog\/hummingbird-performance-upgrades-get-you-closer-to-that-perfect-100\/\" target=\"_blank\">08\/16\/2018 Hummingbird<\/a> includes page, browser, RSS and Gravatar caching, full Multisite support, all new developer tools and a new streamlined interface.<\/em><\/p><\/blockquote>\n<p>The good news is that with one CloudFlare account you can cover multiple domains. Unlike many services, you don&#8217;t need a separate account for each domino, and you don&#8217;t need to pay extra if you&#8217;re using Multisite with subdomains or\u00a0mapped domains.<\/p>\n<p>In this post, I&#8217;ll show you how to\u00a0integrate\u00a0Hummingbird with CloudFlare for the sites on your network, and identify the different approaches you need to take depending on whether you&#8217;re using subdirectories, subdomains or mapped domains.<\/p>\n<p><em>Note: If you&#8217;re using Hummingbird and CloudFlare together on a single site installation\u00a0of WordPress, this guide will also help you get set up.<\/em><\/p>\n<p>But let&#8217;s start with an intro to CloudFlare.<\/p>\n<h3>CloudFlare: What it is and How it Works<\/h3>\n<p><a href=\"https:\/\/www.cloudflare.com\" target=\"_blank\">CloudFlare<\/a> is a service that incorporates a few key features designed to make your site perform better. These are:<\/p>\n<ul>\n<li>A Content Delivery Network (CDN).\u00a0This 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&#8217;t stored halfway across the world.<\/li>\n<li>Optimization features designed to speed up your site (just like Hummingbird!)<\/li>\n<li>Security delivered via a firewall as well as protection from DDoS attacks.<\/li>\n<\/ul>\n<p>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&#8217;s happening to sites across its user base and apply that to the rest of the sites signed up with it.<\/p>\n<p>If you want to find out more about what it does, check out this video:<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><span class=\"embed-youtube-lazy-id dev-hidden\">0XZOecsbnKo<\/span><\/span><\/p>\n<h3>Integrating Hummingbird and CloudFlare on Your Network<\/h3>\n<p>Let&#8217;s start by looking at how you set up Hummingbird with CloudFlare on your Multisite network. Once we&#8217;ve done that I&#8217;ll move on to looking at how it interacts with different domain setups.<\/p>\n<h4>Installing Hummingbird<\/h4>\n<p>Start by installing <a href=\"https:\/\/wpmudev.com\/project\/wp-hummingbird\/\" target=\"_blank\">Hummingbird<\/a> on your Multisite network, if you don&#8217;t already have it installed. The easiest way to\u00a0this is by using the WPMU DEV Dashboard.<\/p>\n<p>Once you&#8217;ve got Hummingbird installed, take some time to run a scan and make any tweaks you need to. I&#8217;ve done that and got a score of 83%:<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/hummingbird-test.png\" alt=\"Hummingbird performance test\" width=\"600\" height=\"470\" \/><figcaption class=\"wp-caption-text\">When you first use Hummingbird, you&#8217;ll be prompted to run a performance scan.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<p>Let&#8217;s see if it improves once I&#8217;ve activated CloudFlare.<\/p>\n<h4>Creating a CloudFlare Account and Adding Your Domain<\/h4>\n<p>Now you&#8217;ve got Hummingbird up and running, it&#8217;s time to set yourself up with CloudFlare. If you haven&#8217;t already, <a href=\"https:\/\/www.cloudflare.com\/a\/sign-up\" target=\"_blank\">create an account<\/a> and log in. You can create a free account or there&#8217;s a choice of premium options depending on your need.<\/p>\n<p>Now CloudFlare will promote you to add your domain name. Type (or copy) the domain for your network in the field provided:<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-159160\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/cloudflare-get-started.png\" alt=\"Cloudflare's screen for adding a domain \" width=\"670\" height=\"522\" \/><\/div>\n<\/div>\n<p>Click the <strong>Scan DNS Records<\/strong> button and CloudFlare will check your site&#8217;s DNS.<\/p>\n<p>CloudFlare will start scanning your DNS records and play a video while it does so:<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-159161\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/cloudflare-domain-adding-video.png\" alt=\"Cloudflare plays a video while it scans your DNS\" width=\"670\" height=\"540\" \/><\/div>\n<\/div>\n<p>When it&#8217;s done, click the <strong>Continue<\/strong> button.<\/p>\n<p>You&#8217;ll then see details of your DNS records for your \u00a0domain. Check these and confirm they&#8217;re correct by\u00a0clicking the <strong>Continue<\/strong> button.<\/p>\n<p>Next you&#8217;ll be asked to select a website plan for this domain. Pick the one that works for you: I&#8217;m going with a free one for now.<\/p>\n<p>The next step is to edit the nameservers for your domain. CloudFlare will give you details of what you should change them to:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/cloudflare-nameservers.png\" alt=\"Cloudflare page with nameserver info\" width=\"670\" height=\"426\" \/> <\/div>\n<p>Do that and wait up to 24 hours while the DNS changes take effect. Click the <strong>Continue<\/strong> button to see a summary of your CloudFlare settings:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/cloudflare-summary.png\" alt=\"Cloudflare - account summary screen\" width=\"670\" height=\"535\" \/> <\/div>\n<h4>Adding CloudFlare to Hummingbird<\/h4>\n<p>Adding CloudFlare to Hummingbird couldn&#8217;t be easier. Go to the Hummingbird dashboard in your network admin screens, and scroll down to the CloudFlare metabox:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/08\/hummingbird-cloudflare-integration.png\" alt=\"Hummingbird CloudFlare integration.\" width=\"600\" height=\"348\" \/><figcaption class=\"wp-caption-text\">Enabling Hummingbird CloudFlare integration is super easy.<\/figcaption><\/figure>\n<\/div>\n<p>In the first field, enter the email address you used to register with CloudFlare.<\/p>\n<p>Now back in\u00a0your Cloudflare account,\u00a0click on your name at the top right of the screen and then on <strong>My Settings<\/strong>. Scroll down to the <strong>API Key<\/strong> box:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/cloudflare-api-key.png\" alt=\"The Cloudflare API key in your account information\" width=\"670\" height=\"265\" \/> <\/div>\n<p>Next to <strong>Global API Key<\/strong>, click on the <strong>View API Key<\/strong> button. Your API key will appear in a pop box. Copy that and paste it into the second field in the\u00a0CloudFlare metabox in Hummingbird. Then click the <strong>Connect<\/strong> button.<\/p>\n<p>Hummingbird will connect with your CloudFlare account and replace those fields with a <strong>Select domain<\/strong> drop-down box. Use this to select the domain of your network and click the <strong>Enable CloudFlare<\/strong>\u00a0button.<\/p>\n<p>Hummingbird and CloudFlare will link up and you&#8217;ll see a confirmation message:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/hummingbird-cloudflare-confirmation.png\" alt=\"Hummingbird's confirmation box - Cloudflare is working\" width=\"670\" height=\"172\" \/> <\/div>\n<p>You&#8217;re all set!<\/p>\n<h4>Run a New Hummingbird Test<\/h4>\n<p>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.<\/p>\n<p>My score has increased by 2%:<\/p>\n<p>That&#8217;s not much but bear in mind I haven&#8217;t done anything yet to optimize my site. If I follow the tips given by Hummingbird I can improve things even more.<\/p>\n<h3>Adding Sites in Your Network<\/h3>\n<p>Depending on your Multisite setup, you may need to configure CloudFlare to work with the sites on your network. Let&#8217;s take a look at each scenario.<\/p>\n<h4>Subdirectories<\/h4>\n<p>Subdirectory based networks are the easiest to manage here. The good news is that you don&#8217;t need to do anything else once you&#8217;ve followed the steps above. This is because all of the sites in your network share the same root domain, so they&#8217;ll all benefit from the CloudFlare setup for that domain.<\/p>\n<p>But\u00a0even if you&#8217;re using subdirectories, if you&#8217;ve mapped some domains to your network you&#8217;ll still need to do some extra configuration. More of which shortly.<\/p>\n<h4>Subdomains<\/h4>\n<p>Subdomains are a little more complicated. You can add them manually to your CloudFlare account, or alternatively you can use wildcard subdomains.<\/p>\n<h5>Adding Subdomains Manually<\/h5>\n<p>So let&#8217;s say I have my network on subdomains and I&#8217;ve added a site at <em>http:\/\/mysite.rachelmccollin.co.uk<\/em>. To add this to CloudFlare I&#8217;d need to follow these steps:<\/p>\n<ol>\n<li>Open your CloudFlare account, select the domain name of your network and click on the <strong>DNS<\/strong> icon at the top of the screen.<\/li>\n<li>Add a CNAME or A record with the subdomain&#8217;s slug as its name:<\/li>\n<\/ol>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-159175\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/add-subdomain.png\" alt=\"Adding a subdomain in Cloudflare\" width=\"670\" height=\"454\" \/><\/div>\n<\/div>\n<ol start=\"3\">\n<li>Click the <strong>Add Record<\/strong> button and the subdomain will be added to your CloudFlare account. You don&#8217;t need to do anything in Hummingbird or in the\u00a0site&#8217;s admin\u00a0screens.<\/li>\n<\/ol>\n<h5>Adding Wild Card Subdomains<\/h5>\n<p>Adding wildcard subdomains is also pretty straightforward. Go to the same <strong>DNS<\/strong> 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:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/wildcard-subdomain.png\" alt=\"Adding a wildcard subdomain in Cloudflare\" width=\"670\" height=\"450\" \/> <\/div>\n<p>Then click the <strong>Add Record<\/strong> button to add wildcards to your account.<\/p>\n<h4>Mapped Domains<\/h4>\n<p>If you&#8217;re mapping domains to your network then you&#8217;ll need to add those to CloudFlare as if they were a separate website.<\/p>\n<p>In CloudFlare, click on\u00a0<strong>Add Site<\/strong> at the top of the screen and follow the steps outlined in the first part of this post.<\/p>\n<h3>Linking CloudFlare, Hummingbird and Multisite is Simpler than You Think<\/h3>\n<p>So that&#8217;s how you set up your WordPress Multisite network with Hummingbird and CloudFlare. Once you&#8217;ve done this and made some tweaks to your Hummingbird settings you&#8217;ll find that your site is faster and more secure. And all with just a few minutes&#8217; work \u2013 well worth it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00a0level, what does this mean if you&#8217;re running a Multisite network? Updated: 08\/16\/2018 Hummingbird includes page, browser, RSS and Gravatar caching, full Multisite support, all new developer tools and a new [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":159211,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260],"tags":[1277,10422,9958],"tutorials_categories":[],"class_list":["post-159153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","tag-cdn","tag-hummingbird","tag-multisite-2"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/159153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=159153"}],"version-history":[{"count":24,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/159153\/revisions"}],"predecessor-version":[{"id":188617,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/159153\/revisions\/188617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/159211"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=159153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=159153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=159153"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=159153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}