Cloudflare APO Real Life Review

Estimated reading time: 10 minutes

We seem never to stop tinkering at SaneChoice Towers. It does surprise us that we get any actual work done! However, as learning is a big part of our ethos, it was time to try something new.

We have been avid users and supporters of WP Rocket, which has not changed. But Cloudflare also has a product called Automatic Platform Optimisation (APO) for WordPress. APO purports to boost your global speed and reduce your Time To First Byte (TTFB). All of which is good for the user experience and Google Page Speed scores.

But is APO a real contender for WP Rocket, an industry leader in website performance? Read on to find out how it performed.

Terminology

To help understand the rest of the article, you must understand a few pieces of technical jargon. For those technically astute, please feel welcome to skip this section.

Edge Cache – the Cloudflare servers store a copy of your website assets and pages. Once stored, Cloudflare copies the files to worldwide caches, effectively getting them closer to the visitor.
Origin Server – the source web server which is hosting your WordPress website.
Content Delivery Network (CDN) – A server network that caches and serves your website files close to the visitor.
Time-To-First-Byte (TTFB) – the time it takes for the requester of a web page to start receiving the first byte of data. This is a critical metric for Google Page Speed.
Static Content – files like JavaScript, Images, CSS and Fonts. These files are classed as static as they are less likely to change frequently.
Dynamic Content – HTML pages are defined as dynamic. Dynamic Content is more likely to change frequently. For example, a blog home page or website with news updates.

How APO Works

To help understand how caching works and improves user experience, let’s first look at how a non-APO website works. You will notice a lot of requests going back and forth between the visitor and the origin server. Each request creates latency, and the further away the visitor is, the slower the website’s loading performance.

Now the magic. With APO enabled, all website files are cached in global locations. There is no need for visitors in faraway lands to contact your web server. They simply pull the data from a server located nearest to them.

Hopefully, the above images clearly show why caching everything locally to the visitor significantly reduces latency. And, in turn, improves the user experience for page loading performance.

Prerequisites

We have played around with APO for quite a while. As a result, we can outline some prerequisites if you decide to give this a go on your website:

You need a WordPress website. Like WP Rocket, APO only works with WordPress websites. So if you don’t have one, there is no point in looking into APO as a performance booster.
You need to be committed to Cloudflare. APO is a Cloudflare product; it only works if the Cloudflare network manages your website – which is not bad as it provides many security features.
You need to disable other caching plugins (initially) – APO is compliant with many WordPress caching plugins. However, we highly recommend that you disable and remove these. Once APO is running correctly, you can then reintroduce them.
There is a cost involved. Although you can set up a free Cloudflare account, you need to pay $5 per month to use APO. Or you can upgrade to Cloudflare Pro ($20), which includes APO. (For reference, we use a Pro account and find it very good and has extra features included). This means that APO is a minimum of $60 per year, with WP Rocket coming in at $49 – but do remember that Cloudflare supplies many other features within that price.

Installation

The installation is easy if you already have a Cloudflare account and it is already serving your website.

Firstly, search the WordPress Plugins for ‘Cloudflare’ and install and activate the plugin.
Secondly, go to the Cloudflare plugin settings and log into your account using your email address and API token. Once that is complete, the plugin has access to your account, and you can start to configure APO.

If you want the complete installation guide, please view Cloudflare’s APO Installation page.

Configuration

Like the installation, this is mercifully easy as well.

Go to Settings –> Cloudflare, and you will be taken to the Home Page. You will see a section for Automation Platform Optimisation where you move the slider to On.
On the same page, you will see a section called Apply Recommended Cloudflare Settings for WordPress. Click the button and wait until all the best settings are confirmed and applied. These settings are crucial for performance, so don’t forget this step.

There are other pages and settings within the plugin, but this is all you need to configure at this stage.

It is worth noting that our Cloudflare configuration already had some settings applied before testing APO. This included Image Optimisation, Minification and Brotli.

So what does this do?

At this point, you have installed the plugin and enabled APO. But what is going on in the background?

When using Cloudflare to cache your website, all static assets (JavaScript, Images, CSS) are cached and served by servers closest to the visitor. However, as HTML pages are dynamic, Cloudflare does not cache them by default. So, for example, if your visitor is in Australia and the web server is in Ireland, the visitor must wait for that HTML page to download. This is slow (due to the networking in between and the page build process) and creates a slow loading experience.

APO uses a Cloudflare feature called Workers to cache and manage updates to HTML pages, which are then copied to global Edge Caches. In addition, the Edge Caches are located in different countries, meaning they are closer to the visitor. In short, there is no more waiting to download pages from your origin server, which could be thousands of miles away.

The APO WordPress plugin also plays an integral part in website management. For example, the plugin clears the Cloudflare cache whenever you update or add a page, including the HTML page. This ensures that your visitors see the latest and cached version locally to the visitor.

At this point, almost every single part of your website is stored within the Cloudflare caches. So whether your customer is in the United States or deepest Africa, the loading speed should be consistently fast. When testing APO, we always got around a 98% cache hit rate which is extremely high.

A note about Google Fonts

One of the niftiest things that APO does is related to fonts. It is common for websites to use Google Fonts to create beautiful-looking pages. However, there is a slight downside: you rely on the google network to use the fonts. Although small, there is a latency penalty whilst the web page contacts Google and downloads the fonts. That latency can cause slower page loads and more extended font style changes.

Cloudflare APO helps with Google font latency by caching and serving them from your domain. The result is fewer HTTP requests and a faster render time for your website. We mention this because one of Cloudflare’s primary sales pages for APO does not note this feature. But we think it is a crucial feature that positively impacts page speed.

The screenshot below shows all the google fonts we use. As you can see, they are all delivered from our domain and not Google.

APO performance

When moving away from WP Rocket, there is always a sense of trepidation – WP Rocket is an industry leader. It does a great job, so any alternative will have their work cut out. It is also worth pointing out that APO does not have all the performance features of WP Rocket – it is pretty basic in comparison.

However, we were pleasantly surprised with the overall performance. APO consistently served our pages fast, no matter where we tested it. For example, we used lambda test to access our Europe-hosted website from Australia. The result was an overall Page Speed score of 97%, and every metric was green. Of course, thousands of miles separate Europe from Australia, but performance remained strong thanks to Cloudflare’s APO.

You can see the results within our video captures below.

Without APO

Testing from Australia to Europe:

With APO

Testing from Australia to Europe:

The Shift Left Principle

We have mentioned this before in our other article discussing website performance. You need to spend time optimising your website before applying further performance improvements. We call this Shift Left because the more work done on the left, the better things are on the right.

WP Rocket actively promotes the same theory. However, WP Rocket is much more forgiving at dealing with websites without the Shift Left treatment. In addition, features like Unused CSS Removal is a key feature of WP Rocket. It will strip unused CSS from your website, making it faster to load. Cloudflare and APO do not have such advanced features, so you are somewhat at the mercy of “rubbish in, rubbish out”.

However, pre-optimisation is an essential aspect of performance tuning. And no matter what plugin you use, it is highly recommended to follow this principle. The results are excellent natively and are only amplified further when your favourite optimisation plugin is applied. At SaneChoice, we could almost run our website without any optimisation, but not quite. Using APO (or WP Rocket) just puts the final icing on a positive user experience.

Niggles & Simplicity

It is worth noting that APO needs a bit of technical understanding – but only if things are not working out of the box. For example, one of the critical areas to watch out for is caching plugin conflicts. This is why we recommend that you disable all other caching plugins as a prerequisite.

We kept WP Rocket installed when we started testing and used only the basic settings. The theory was that the pages would be optimised locally, and APO could take it to the next level of performance. However, there was some interference between the two products. WP Rocket places headers which interfere with Cloudflare Dynamic Content caching. The headers resulted in Cloudflare not caching the pages, causing slow page loads from the Origin Server and not the Edge Caches.

This was quickly rectified by following a support article from WP Rocket. But this did get us thinking about simplicity and consolidating plugins. For example, did we really need to run WP Rocket and APO simultaneously? The outcome of this analysis was that any complexity should be removed, and it should be one plugin or the other. So we now use WP Rocket or APO, but we do not use both concurrently.

That is not to say that many have both these caching products (and others) running very nicely in their environments. But for us, simplicity rules, and we made good with just one.

Final Thoughts

We thought Cloudflare APO was a strong product and should feature on anyone’s shortlist. Furthermore, you cannot forget all the other features you get with Cloudflare. Their security protection is powerful, and their CDN network is among the best in the marketplace. If you combine APO and these other features, then it is a perfect overall solution.

However, we would not dismiss WP Rocket’s enhanced features, including Unused CSS Removal – including their own CDN offering for static content. However, if your website is not for a global market, then a CDN can sometimes cause more harm than good. In this case, why not use all the powerful features of WP Rocket to squeeze the best performance from your website?

Whatever way you go, you will be in safe hands with both these products. And it certainly is exciting to get up close and personal with them by trying all the settings and testing the output. That said, optimising as much as possible before implementing any caching product will always provide the best results.