Everything You Need to Know About Using Cloudflare’s Free Service For Speed Increases

If you are not using Cloudflare’s free service then you are missing out one of the easiest ways to speed up and protect your website. Cloudflare offers a Global CDN network of over 115 data centers worldwide. This means the fastest speed you can get without paying anything. Each free account comes with limited DDoS protection, the ridiculously fast global CDN, shared SSL certificate, and three page rules used to define how you want to leverage Cloudflare for your site.

 

Signing up for Cloudflare is simple and intuitive so I am not going to add any filler to this article and show you how to walk through their setup wizard. If you can’t do that, then you probably are not ready to do much of anything else. But once you are inside Cloudflare and your domain’s nameservers are pointing to Cloudflare, then you are ready to get going on configuration.

The Cloudflare Plugin

The great developers at cloudflare have built an awesome plugin that will help pre-set some default settings automatically to your account. I recommend installing the plugin and activating “Apply Default Settings” to start out with. We will make some slight changes to these settings to bring even more speed to your website.

Firewall Tab


There is only one setting to worry about for this article’s purpose in the firewall tab and that is the Security Level. If you had installed cloudflare plugin and activated the default setting this will be set to”Medium”. I recommend you keep it there; when you increase the security level, Cloudflare will challenge by presenting a special page to the visitor when Cloudflare thinks they might be a threat. I have seen this setting cause many problems with some of my larger traffic sites when visitors are in regions of the world or on an ISP which has a high level of hackers on it. The medium setting seems to be just fine and you can quickly change it if you start to see a high level of spam on your website.

Speed Tab


The speed tab hosts three settings that I recommend you use. If you are using the Cloudflare plugin as described above, this is one area where we step out of the default settings.

Auto Minify

To start out, I recommend turning on by checking the Javascript, CSS, and HTML checkboxes for the Auto Minify setting. This will already be checked by Cloudflare Plugin.

Enable Accelerated Mobil Links

This setting allows your visitors to open outgoing links on your website in AMP (Accelerated Mobile Pages). AMP changes the way your web pages output to a mobile device in order to give the mobile user a faster experience. This feature benefits your visitor’s speed on outgoing AMP links but not particularly for when they are on your website. Turn this on depending on how you are linking out your website.

Rocket Loader

This could be the second most speed improving Cloudflare settings you can enable. Since more than likely your website has javascript running on it, Rocket Loader can improve the load times by decreasing network requests by bundling your Javascript files, Asynchronously loading scripts so that they don’t block the content of your site and caching scripts locally using LocalStrage so they aren’t re-fetched necessary. After turning on and adjusting a large ecommerce website with this setting, I saw a great improvement on page load time.

Set this to Automatic and start testing your site. You may find that depending on the javascript, your site gets wonky. This is because some javascript doesn’t play well with this setting on. But it can be an easy fix. If you find that a javascript file is now buggy after turning on this setting, just apply the following data-cfasync=”false” to the script tag to keep it from being affected by Rocket Loader. Alternatively, you can set RocketLoader to manual and select all the javascript tags you want to be enabled by RocketLoader by adding data-cfasync=”true” to them.


<script data-cfasync="false" src="/javascript.js"></script>

You can also use a page rule to turn off RocketLoader across certain pages that you don’t want to risk the Javascript becoming buggy like login, checkout, and cart pages.

Caching Tab

Caching Level

The caching level setting handles how Cloudflare’s CDN triggers static files to deliver from the cache. For most WordPress installs, the Standard setting is fine and is recommended default from Cloudflare’s plugin is set to Standard. You have three options to select from; No Query String, Ignore Query String, and Standard.

  • The No Query String only delivers static content files from the CDN cache where there isn’t a query string attached to the file’s URL. For example, speedupwp.ninja/dashboard.png would deliver from the CDN cache, but speedupwp.ninja/dashboard.png?version=2.3.1 would not be delivered from the cache. With most Javascript enqueued by WordPress, having this setting on would keep the Javascript from being delivered from cache since WordPress likes to append a version query string to the Javascript file URL.
  • Ignore Query String delivers the same resource, cached or not, to each visitor regardless if a query string is present. In this case, speedupwp.ninja/dashboard.png?version=2.3.1 could be delivered from the CDN cache.
  • The Standard setting will reset the cache of the static file every time the query string changes. So it will deliver from cache every time speedupwp.ninja/dashboard.png?version=2.3.1 is called, but then recache and deliver the “updated” file if the query string changes (speedupwp.ninja/dashboard.png?version=3.0.0 ).

The following files are what Cloudflare considers static content and will deliver from the CDN cache:

css, js, jpg, jpeg, gif, ico, png, bmp, pict, csv, doc, pdf, pls, ppt, tif, tiff, 
eps, ejs, swf, midi, mid, ttf, eot, woff, woff2, otf, svg, svgz, webp, docx, xlsx, xls, pptx, 
ps, class, & jar

NOTE: If you notice, HTML is not included in the static list. Caching your HTML is performed via Page Rules and not this setting.

Browser Cache Expiration

This setting controls how long Cloudflare cached resources (the cached static content) will remain on your visitor’s computer. So if you use the default setting of 4 hours, then each static resource cached by the CDN will remain in your visitor’s browser for 4 hours before grabbing a new copy. If you have a lot of repeat visitors then this setting will benefit you more as each time they hit a page within the set time expiration period, the content will load from their browser locally instead of from the CDN. This also means if you have many updates to your static content, then the changes won’t show to that visitor when you update your content. I personally set this pretty high, especially on new sites with fewer visitors. For a website that has higher traffic and constant content changes, then a lower setting makes sense.

Remember this is for static content and not your HTML. Because of this, I just set this to a month and when I change some static content like an image or update a javascript file, I clear my Cloudflare Cache to reset it.

Development Mode

Turn this on when you are working on the website so that Cloudflare doesn’t cache your content. If you forget to turn it back off, then Cloudflare will reset this setting to OFF after 3 hours. This setting is also found Quick Actions dropdown on the Overview page.

Page Rules

Each Free Cloudflare account comes with three Page Rules that you can use to configure how you want Cloudflare to behave for your website. These rules let you control which settings will trigger per URL. You can add more Page Rules in groups of 5 by purchasing them for $5 a month. The few page rules covered below are what I recommend to get the fasted speed increase to your site. These settings are relevant to how your site content is updated so please take them with a grain of salt.

If you want a speed increase on your site, then I think the most important rule is Cache Level. This setting is the same as Cache Level in the Caching tab with two addition, the Cache Everything setting and the Bypass setting. The Cache Everything setting will cache any content, even if it is not a static file. The Bypass setting will force the CDN to bypass caching the URL in the match rule.

As you can see below, I use the Cache Everything level for this site. This means that new content on a page like a category listing page may not show as quickly because the cached version will be delivered. To overcome that, I purge the cache when I publish.

On a larger site or one that has more frequent content changes, this rule is adjusted quite a bit to bypass things like API URLs and high content changing pages and resources.

Understanding Edge Cache TTL

You can add an Edge Cache TTL rule to the Cache Level rule when Cache Everything is set. This tells Cloudflare how long to retain files in their cache before getting a fresh copy from your server. When you choose to set the Cache Everything, then Cloudflare will respect the existing headers set by WordPress. But if no headers are present, Cloudflare will still cache that resource as long as it is frequently requested. I use this setting to have cloudflare overrule the headings set by WordPress. A lower time is better here and for Free accounts, 2 hours is the lowest you can go.

While I use this setting to cache my HTML, I also use a similar setting to cache uploads folder on certain high traffic sites where the static content is updated more frequently. For sites like that I might do the following rule:

Always Use HTTPS

This setting helps your speed in a more indirect way, but only if your server supports HTTP/2. When you have HTTP/2 available, you need to deliver your content via https and so setting this forces the site to always use https, thus indirectly receiving a speed boost.

Bypassing The Admin

I use the following settings to bypass Cloudflare from caching things in the admin. I also increase the security level for that little extra protection that it brings. By bypassing Cache Level, and Disabling Performance, I turn off things like RocketLoader and deliver content live.

Note: If you are using Jetpack login, you should add a rule to bypass caching for /wp-login.php.

Forcing Cache When Cloudflare Doesn’t

Since WordPress often wants to set your Expires, Pragma, and Cache-Control headers for you, Cloudflare will respect those headers and not cache those resources regardless of your above settings. To overcome this, we can remove those headers with the following methods to allow Cloudflare to cache the resources the way you intended.

If you are as nitpicky about performance as I am, then the preferred method to remove these, will be via your .htaccess file or your nginx virtual host file.

If you host on an Apache server, put this code in your .htaccess file.

# Start Cloudflare headers for page cache

<IfModule mod_rewrite.c>
#exclude wp-admin & wp-login areas
RewriteCond %{REQUEST_URI} !/wp-admin [NC]
RewriteCond %{HTTP_COOKIE} !"wordpress_logged_in"
RewriteRule ^.*$ - [ENV=LONGCACHE:true]
# Ninja Magic!
<IfModule mod_headers.c>
Header unset Pragma env=LONGCACHE
Header unset Expires env=LONGCACHE
Header set Cache-Control "max-age=600" env=LONGCACHE
</IfModule>
</IfModule>
# End Cloudflare headers for page cache

 

If you host on nginx, then add this code to your virtual host file. NOTE: You will need to have the more_headers module which is included with the nginx-extras package on Debian and Ubuntu.

# Start removal of headers that prevent Cloudflare page cache
location ~* "(!?.*wp-(admin|login)\.php.*)" { #exclude wp-admin & wp-login areas
    more_clear_headers 'Pragma';
    more_clear_headers 'Expires';
    more_clear_headers 'Cache-control';
    add_header Cache-Control "max-age=3600";
}
# End removal of headers that prevent Cloudflare page cache

 

If the above code is giving you problems you can add the following PHP code to your theme’s functions.php file to do the same actions.

add_action( 'send_headers', 'ninja_remove_headers_for_cloudflare', 10000 );
function ninja_remove_headers_for_cloudflare() {
    if ( is_admin() ) { 
        return;
    }
    header_remove('Pragma');
    header_remove('Expires');
    header_remove('Cache-Control');
    header('Cache-Control: max-age=3600'); // 1 hour
}

 

Hopefully, these settings have helped you drop down your page load time. With these settings and a few other tricks, I was able to achieve sub 367 ms load time!

Leave a Reply

Your email address will not be published. Required fields are marked *