Optimize a website with Cloudflare 0 (0)

Introduction

In this article, we will see how to optimize a website with Cloudflare to get the best from this service. This is the second part of the article How to configure Cloudflare for a site on Aruba with a Shared Server.

Cloudflare Page Rules

Page Rules, or simply Rules, allow you to control which Cloudflare settings are enabled on a given URL. One important thing is that Page Rules are read in cascade, so you need to sort the Page Rules by priority and make the URL criteria the more specific as possible.

To activate them, all we need to do is log into Cloudflare, click on the relevant site (also called a zone in Cloudflare), and click on the Rules icon. Once on the page, since we still need to configure the first rule, we will be presented with the blue button Create Page Rules, as in the image below:

We are working with a free Cloudflare account, so we will only have 3 Page Rules available.

Cloudflare and WordPress

Let’s assume we are working with a site built in WordPress, so we can basically configure two sets of URLs:

• frontend pages, for example https://domain/*
• backend pages, for example https://domain/wp-admin/*

Possibly, you can add a third set of URLs for the preview URL of pages and articles.

The asterisk (*) character is a wildcard that is used to match certain patterns. For example, writing https://domain/wp-admin/* means that we’re including all pages under wp-admin, for instance, https://domain/wp-admin/edit.php?post_type=post or https://domain/wp-admin/themes.php

Cloudflare and speed

Cloudflare helps to lighten the traffic generated on the origin server: many resources will be provided by Cloudflare servers instead of the origin server and compression will be applied for some types of content hosted on the origin server.

The work of optimizing a website, however, goes beyond the configuration of Cloudflare: you have to calibrate the right hosting, you have to provide images in the new WEBP format, you have to make sure that the text remains visible when loading web fonts, you have to make sure that the images have the height and width properties, and more. This is just from Google PageSpeed Insights perspective.

Optimizing a website, or web app, from the perspective of a backend developer instead, means writing optimized, fast-to-execute queries. All to make the site or app faster.

Create a new Page Rule

Let’s proceed with the creation of a new Page Rule, then click on Create Page Rule:

Create a new Page Rule for the WordPress frontend

These are the settings for the frontend (/*), i.e. all the public parts, visible to users without authentication. Once you have Rule configured, click Save and Deploy:

Let’s look at them in detail:

• Rocket Loader: useful to improving page load time, Rocket Loader prioritizes your website content (text, images, fonts, etc.) by delaying the loading of all your JavaScript until after rendering;
• Browser Cache TTL: this is a setting about the expiration of resources stored in a visitor’s browser cache. You can specify a time for the TTL of a visitor’s browser cache in the Cloudflare Caching app;
• Security level: Cloudflare uses the reputation of a visitor’s IP to decide whether to present a captcha; a Medium level presents the captcha to both moderate-threat and more threatening visitors;
• Cache Level: using a default Standard level we will provide a different resource every time the query string changes. Example of URL: domain.com/product?parameter=value
• Edge Cache TTL: this setting controls how long CloudFlare’s servers will cache a resource before requesting a fresh copy from the source server.

These are relatively basic settings, nothing too aggressive because this guide wants to cover only the basics. Each site has its own specific needs: on a blog, I can adopt a more aggressive caching technique and cache everything, but for e-commerce, it will be a different situation because of the cart and many other variables that must necessarily be dynamic.

Create a new Page Rule for the WordPress backend

These are the settings for the WordPress backend (/wp-admin/*), which is the authentication-protected area accessible only to the authenticated users. Once you have Rule configured, click Save and Deploy:

We use the backend to manage the website – installing plugins, themes, and more – then we don’t need a high cache level: we can opt then for a Standard cache level or even decide to bypass the cache altogether.

As already mentioned, a Page Rule can also be configured for the preview page.

Check if Cloudflare’s cache is active

To check if actually, our settings are active and properly working, we can load the homepage of the website and inspect it by pressing the right mouse button, then click Inspect, or press F12 on the keyboard.

Then move to the Network tab and check for CSS styles, Javascript files, and images. Checking their Response Headers we see that the value of cf-cache-status is HIT, not DYNAMIC anymore. This means that these resources are now provided by Cloudflare and not anymore by the source server (in this case shared server on Aruba hosting).

We did it!

Alternatively, you can use this online service: https://cf-cache-status.net/

Clean the cache

When there are changes to a CSS for example or a Javascript file, it will be necessary to clear the cache. You can clear the cache of a single file, a group of files, or clear everything in the cache up to that point. In the top menu, the icon menu, click on Caching, then from the tabs click on Configuration:

Optional: the official Cloudflare WordPress plugin

We mentioned that the site we’re working on is a WordPress site, and as you can imagine, Cloudflare has released a plugin for the world’s most famous CMS. You can find it here at this address or just go into the WordPress backend and search for it via the plugins page.

Using the plugin, every time you make changes to your site, you will no longer need to login to the Cloudflare site, but you will simply open the Cloudflare plugin page inside your WordPress website. Of course, when installing and activating the plugin, users will be asked to enter their email address (used to register for an account on cloudflare.com) and an API token – to be created. This is necessary to support all the features offered by the plugin.

Conclusion

This small guide is just a basic guide to quickly show how you can take advantage of a free CDN and how to optimize a website with Cloudflare. Each site has its own needs due to traffic and size, but Cloudflare is a great ally for all those businesses – or content creators – who need protection and speed.