Easy Cloudflare Tutorial (including Page Cache rules)

Covered In This Cloudflare Tutorial

1. Crypto (SSL) settings (fix  “err_too_many_redirects” error.
2. Firewall settings – whitelist your server.
3. Speed settings – Auto-Minify, Railgun, AMP, Broti and Rocket Loader.
4. Caching – correct Browser Cache Expiration settings.
5. Page Rules – for security and Page Cache (and all the caveats).
6. Scrape Shield – fix email-decode.min.js issues on Pingdom and GTMetrix.

Why Do I Need Cloudflare?

Cloudflare is a global Content Delivery Network (CDN for short). Essentially, a CDN will bring your website’s content closer to your website’s visitors. This decreases network latency and speeds up your page’s load times. When you activate your website on the Cloudflare’s network your website’s assets are uploaded to its 152 data center locations. These assets are images, CSS files, JS scripts and raw HTML. Cloudflare’s settings can be fine-tuned to optimize the delivery of assets to your site’s visitors. This Cloudflare tutorial will show you how to do exactly that.

But first let’s examine a case of a website located on a server located in Dallas, TX and a website visitor surfing the web from Melbourne, Australia. Ordinarily their browser will be downloading your files from the server in Texas. That server is 14,475 km away and data has to travel that distance along internet pipes. If that same website was on Cloudflare’s network its files would located in the Cloudflare data center in Melbourne, Australia. Now your visitor is downloading your files from a location a few miles away. It’s only going to take a few milliseconds to download those files. Compare that to downloading them from a location 14,475 km away which could take more than a full second.

Your website’s visitors don’t need to be coming from 14 thousand kilometers away to see the benefit from Cloudflare.

For a full list of all Cloudflare’s data center locations please refer to their Network Map.

Cloudflare also offers a level of network security. It can help mitigate DDoS Attacks and block malicious bot abuse.

Cloudflare Railgun™

As a Cloudflare Optimized Partner we are able to offer our clients Cloudflare’s Railgun for free. This service is normally only available on their $200/mo Business plan. This Cloudflare tutorial will show you have to activate it (takes one click).

Railgun is an optimization service that compresses normally uncacheable content up to 99.6%. It leverages techniques similar to those used in the compression of high-quality video. This results in an average 200% additional performance increase.  Cloudflare’s network serves approximately 65% of requests to sites from its cache. These caches are the servers that are geographically closest to your website’s visitors. The other 35% of requests made to Cloudflare are not cacheable. These requests have to be sent to the hosting server for processing. Uncacheable content can be the result of a misconfiguration or because the web page is highly dynamic. Personalized content is also hard to cache. This can be sites with memberships area where different people see different content on the the same URL (think Facebook).

Railgun uses a new caching mechanism that compares page versions to determine what needs to be transmitted to the cache server. A 1mb web page might only contain a few hundred bytes of changed data within its framework. The framework, like boilerplate HTML, is served from the cache. The changed data, like a headline and excerpt, is sent via Railgun.

Activating CloudFlare In Plesk

At HostNexus our clients can easily activate CloudFlare from within our Plesk control panel. The link is on the right-side panel in Websites & Domains:

Clicking into ServerShield by Cloudflare will take you to a Cloudflare signup/login page. If you don’t have a Cloudflare account you can quickly signup here. If you have an existing account you can login and set up your new domain.

Once logged in or signed up you then need to activate Cloudflare. Once activated it will modify some DNS records and you will be able to manage some basic functions by clicking Manage Cloudflare.

These are the Cloudflare functions available within Plesk:

IMPORTANT! If you use Plesk’s Cloudflare integration the CDN will only work with the www prefix of your domain. If you use domain.com rather than www.domain.com and wish to use Cloudflare you should signup with them directly. You will need to switch your nameservers to Cloudflare nameservers. The details contained in this Cloudflare tutorial apply to both scenarios.

Optimizing Settings In The CloudFlare Dashboard

To get the most out of Cloudflare you now need to configure settings in the Cloudflare Dashboard. Login to https://dash.cloudflare.com/ with the user/pass you specified when activating Cloudflare in Plesk. You’ll see a menu of options along the top:

Don’t worry, you don’t need to configure every section. There are 5 or 6 sections you should configure and this should take you 5-10 minutes.

Cloudflare Tutorial #1: Crypto

When you first activate Cloudflare you might load your website and find it is returning a “err_too_many_redirects” error. This redirect loop is due to how SSL works with Cloudflare. In the Dashboard go to Crypto. By default Cloudflare sets this to ‘Flexible’. Flexible means that SSL requests for your website will hit Cloudflare, and their servers then attempt to fetch your website over normal HTTP. If you have pre-configured your domain with an SSL certificate like Let’s Encrypt this can send it into a loop.

To resolve this you need to change your SSL setting to ‘Full Strict’. This instructs Cloudflare to fetch your site over HTTPS.

Cloudflare Tutorial #2: Firewall

You should whitelist your server IP  to prevent possible access issues for other applications to your site. If you have other applications that also access your site then it is strongly recommended that you whitelist their IPs as well in the Firewall section. Enter your server’s IP, select “whitelist” and click Add.

Cloudflare Tutorial #3: Speed

Cloudflare’s performance rules under Speed may require some testing. When you activate Auto Minify check your site for issues. Same applies for Rocket Loader. These two options have the biggest potential to cause display issues so disable them if you see your site missing content.

Enable JaveScript, CSS and HTML in Auto Minify:

Activate Railgun. You should see that it automatically detects if your server has Railgun enabled.

Enabled Accelerated Mobile Mobile Links.

Brotli is a form of compression, much like gzip. Enable it.

Enable Rocket Loader. But be sure to check your site functions correctly.

Rocket Loader defers the loading of JavaScript until after page rendering. Pages that have to wait for JavaScript to load before rendering may load significantly slower.

Cloudflare Tutorial #4: Caching

If you ever need to purge the Cloudflare cache this is where it’s done. But in this section the only setting you need to configure is Browser Cache Expiration. Set this to Respect Existing Headers.

Cloudflare Tutorial #5: Page Rules

You can set up many different types of Page Rules at Cloudflare. There are a few you can comfortably ignore as they are handled by our server. You also only get 3 rules on the free tier so you don’t want to be wasting them with things you don’t need. As long as you have SSL activated in Plesk’s Hosting Setting page and have a valid SSL certificate set you don’t need to use “Always Use HTTPS”. Also in Plesk’s Hosting Settings you can set whether you use domain.com or www.domain.com and set a 301 redirect from http to https. So you don’t need any extra “Forwarding URL” rules.

Here are some default rules you should add under Page Rules. There is one extra rule if you want to use Cloudflare’s Page Cache which we cover below.

Cloudflare is already set to cache everything and we already set it to Respect Existing Headers. The only thing we need to do is add a couple of rules to exclude WordPress Admin and the preview URLs.

RULE #1: Exclude WordPress Admin

• Browser Integrity Check: ON
• Browser Cache TTL: 30 minutes
• Security Level: High
• Cache Level: Bypass
• Disable Apps
• Disable Performance

Here’s a brief explainer on what all those things mean:

Browser Integrity Check: ON – Looks for common HTTP headers abused most commonly by bots and denies access.  It will also challenge visitors that do not have a user agent or a non standard user agent (effective against abuse bots and crawlers).

Browser Cache TTL: 30 minutes – Controls how long resources are cached by client browsers remain valid. If a browser requests a resource again and the TTL has not expired, it will receive an HTTP 304 (Not Modified) response.

Security Level: High – Traffic that triggers a Cloudflare security rule will be shown a challenge page in the form of a Captcha. When set to High it challenges all visitors exhibiting threatening behavior within the last 14 days.

Cache Level: Bypass – Content on that URL will not be cached when set to Bypass.

Disable Apps – Disables all Cloudflare’s apps.

Disable Performance – Disables Minification and Rocket. Also disables Polish and Mirage but these aren’t available on Cloudflare’s free tier.

RULE #2: Exclude Preview URLs

• Browser Integrity Check: ON
• Browser Cache TTL: 30 minutes
• Cache Level: Standard
• Disable Apps
• Disable Performance

Cache Level: Standard – Standard caching behavior. Caches all static resources (images, CSS and JS).

Cloudflare Tutorial #6: Cloudflare Page Cache

You can set up Cloudflare to be used as a full Page Cache. The Page Cache will cache everything including the page’s HTML. This is not suitable for moderately dynamic websites. It should also be used together with Cloudflare’s WordPress plugin so the cache can be purged on content edit or publish. If you use the Page Cache rule in RULE #3 please make sure you under the potential issues as laid out below.

Page Rules are applied in the order they appear in the dashboard, from top to bottom. The order is important especially when using aggressive caching. When you set up the Page Cache you will want to exclude your WordPress admin area and preview URLs first. Place these above the aggressive Page Cache rule. You can reorder the list by dragging it so these don’t have to be created in order. Your 3 rules will be first to exclude /wp-admin, secondly to exclude your preview URLs and thirdly to cache everything. So if you add a Page Cache rule the whole ruleset looks like this:

RULE #3: The Page Cache

• Browser Cache TTL: 30 minutes
• Cache Level: Cache Everything
• Edge Cache TTL: 1 month

Cache Level: Cache Everything – Does what it says. Caches the static resources AND the page HTML.

Edge Cache TTL: 1 month – Controls how long resources are cached on Cloudflare’s Edge servers.

Potential Issues – #1 – Unable to login via /wp-login.php

You might notice that there is no exclusion for /wp-login.php. If you find you are having issues logging into your WordPress dashboard there are a few solutions:

1. Use your auto-login function from the Plesk WordPress Toolkit. This bypasses the login page.
2. Rename your login page to include “wp-admin”. For example wp-admin-login.php. This can be done with a simple plugin.

Potential Issues – #2 – Admin toolbar shows for non-logged in users

• If you edit and view a page while logged your page has the admin toolbar along the top. And now Cloudflare’s Edge servers have cached the HTML output of your page, including the admin toolbar, and will serve it to all your visitors. The only way around this is to hide the admin toolbar completely by entering this code in your theme’s functions.php:

// disable the admin bar
show_admin_bar(false);

• You can also hide the admin toolbar completely using a filter. This would also go in functions.php:

// disable the admin bar
add_filter('show_admin_bar', '__return_false');

• Another way to hide the admin toolbar completely is to use CSS. Your theme should have a place to add custom CSS and this should work:

/* hide the admin bar */
#wpadminbar { display:none; }

Please note that all code you may find that disables the admin toolbar for all except the admin user will NOT work. You are the admin, you viewed your page with the toolbar and that HTML is still sent to Cloudflare’s cache. If you don’t want to disable the admin toolbar you’ll have to view your site in your browser’s private (incognito) mode – all the time.

Potential Issues – #3 – New comments will not show

• New comments will not appear until the cache is purged. You can use a third-party commenting system like Disqus to get around that.

As you can see, Cloudflare’s Page Cache feature will only work for certain sites.If people are logging in and require the admin toolbar you just can’t use the Page Cache. It’s for static sites that update content relatively infrequently (i.e. once a day).

If you use the Cloudflare Page Cache you can also verify it is working by inspecting your site’s response headers. In your browser’s Developer Tools go to Network and reload your page. Cloudflare adds a CF-Cache-Status header:

Cloudflare Tutorial #7: Scrape Shield

Scrape Shield is the last menu item. You can disable Email Address Obfuscation if you are worried about your GTMetrix or Pingdom page scores. This will add a script to your site to stop bots from harvesting any published email addresses and will show up as email-decode.min.js on GTMetrix and Pingdom under Leverage Browser Caching.

Server-side Excludes is a feature that helps protect sensitive content on your website. By wrapping content in SSE tage <!–sse–>  <!–/sse–> you can display it to real visitors but hide it from suspicious visitors.  However, finding out what Cloudflare deems suspicious in this scenario is impossible. Also very hard to incorporate into WordPress as the tags need to be nested in HTML.

Hotlink Protection should be familiar to most people. Simple stops people directly linking to your images and stealing your bandwidth.

In conclusion, Cloudflare is really simple to set up and many sites can benefit from it, even on the free tier. The Page Cache feature is the only moderately complex issue and should be used with care and a lot of testing.