Cloudflare APO: How to Make Your WordPress Site Faster

The big news from Cloudflare in 2020 was the launch of the Cloudflare APO service that goes beyond the traditional static cache that is part of the standard free Cloudflare plan. It is currently available for use with WordPress, which powers most of the websites in the world today.

By using APO, WordPress websites can see a significant improvement in Time to First Byte or TTFB, First Contentful Paint, and an overall improvement to the speed index. This helps visitors or users see your site content earlier and faster.

1. What is Cloudflare APO?

Let us take a look at what Cloudflare’s APO service delivers in contrast with the regular Cloudflare plan.

The regular Cloudflare plan only caches static assets on the Cloudflare edge network. These assets include images, CSS, and JS files. Dynamic content like HTML files and any third-party assets like fonts are retrieved from the origin or an external link at run time. While Cloudflare delivers a performance improvement by caching static assets, the extra hops to get the HTML and Third-Party resources will delay page load times.

On the other hand, Cloudflare APO goes a step further and caches HTML and font/third-party assets on Cloudflare’s Edge network. Cloudflare can deliver the complete web page directly to visitors from the closest edge server without returning to the origin server. This means fewer hops, latency, and faster load times for your website visitors.

So how does Cloudflare APO achieve this?

• Cloudflare APO uses Cloudflare Workers (Javascript Service) and Workers KV to cache dynamic content on the edge network.
• If you update content in WordPress, Cloudflare’s cache is automatically purged and refreshed with the latest content across the entire edge network without any manual intervention. It operates like a push service that keeps the CDN edge cache updated with the latest content from WordPress.
• For eCommerce/Woocommerce or websites with logged-in users, APO bypasses the cache and gets customized content specific to these users.

In a standard CDN setup, when content on the edge cache expires or is stale, if a user from a specific region requests hits a web page, Cloudflare gets the latest version of that page, updates the edge cache, and serves it back to the user. The first visitor does not benefit from the CDN since the content has to be fetched from the origin server. Every subsequent visitor will only hit Cloudflare’s edge cache and retrieve content. This is essentially a pull service where content is pulled from the origin server only when needed.

The implication of this is that the CDN will work well primarily for users in your main target region. It is quite likely that users from other locations with little to no traffic will hit the origin server and not Cloudflare’s edge cache.

The Automatic Platform Optimization service resolves this by automatically replicating the latest content across the entire edge cache network, not just a specific region’s edge cache.

If you want to know more about the working of Cloudflare’s APO service, you can read Brian Li’s take on APO.

2. How to Enable Cloudflare APO for WordPress

3. Verify Performance Improvement

To test the APO service, we will take a two-pronged approach.

• On the one hand, we will test for the overall performance gains for a WordPress website using APO.
• And second, we will test the performance of Cloudflare CDN /APO across the edge network

For the test, we will use a test WordPress setup that runs the Astra theme on Cloudways Hosting with a server located in Bangalore. The test website also has WP Rocket with Cloudflare free plan configured. This test website is already optimized and delivers a good performance to use as a benchmark.

Website Performance Test

The test website was put through a performance test using GTmetrix, simulating a desktop visitor from Canada using a fast broadband connection.

Website Performance Test Results without APO enabled

Website Performance Test Results with APO enabled

Website Performance Comparison Table with and without APO

The test results and the comparison show that Automatic Platform Optimization has significantly improved the performance of the WordPress website. The Time To First Byte, or TTFB, has improved by 56%, and the overall page load time has decreased by 69%. This is a big difference from a user’s perspective.

CDN Performance Test

For this test, we used the CDN performance test tool from KeyCDN. The test simulates visitors from multiple locations worldwide and displays performance data for each location. This test will focus on the TTFB time, a critical metric that APO should improve significantly.

CDN Performance Test Results without APO enabled

CDN Performance Test Results with APO enabled

CDN Performance Comparison Test Results

A quick glance at the before and after APO test results snapshot above shows that the TTFB time has improved significantly. A summary of the results across continents shows:

• TFFB time for Amsterdam has come down from 793 ms to 49 ms, a decrease of 94%
• TTFB time for New York has come down from 1.07 s to 32 ms, a decrease of 97%
• TTFB time for Sydney has come down from 608 ms to 121 ms, a decrease of 80%
• The average TTFB time across the 6 locations has decreased from 725 ms to 54 ms, a decrease of 93% overall.

The test data proves that APO can make a difference in how a WordPress website performs for a worldwide audience.

4. APO and Performance Optimization

You can skip this section if you are familiar with performance optimization, caching, and CDNs and their benefits. If you have just started looking at ways to speed up your WordPress website and came across APO, read on for more context and information to help you decide whether you need APO.

All of the setup options discussed below impact two key variables in a website’s performance:
(1) the time required to process a visitor request and deliver a completed web page and
(2) the distance from the visitor’s location that the request and response data packet has to travel (latency).

Let us go through the setup options one by one:

1. Standard WordPress website
   • Every visitor to the website is directed to your hosting server for a response.
   • The server processes the request, builds the entire web page, and sends back HTML, JS, CSS, and Images to the visitor’s browser. External fonts like Google fonts are retrieved from the Google server.
   • This process is repeated for every visitor request. If you have 500 visitors a day, the server has to process 500 requests and send a response.
2. WordPress Website with Caching
   • The website has a caching plugin like WP Rocket, WP-Optimize, or FlyingPress configured.
   • The caching plugin builds the web page and stores it in a cache on the server.
   • The visitor is directed to your hosting server for a response.
   • The server serves the web page from the cache and any static assets like CSS, JS, Images, etc.
   • The page loads faster for the visitor since the server does not need any processing and can serve the web page from the cache.
3. WordPress Website with Caching and Cloudflare’s Free CDN
   • The caching plugin stores web pages in the server cache, and all static assets like CSS, JS, and Images are stored in Cloudflare’s edge network worldwide.
   • When a visitor requests a page from your website, the hosting server will respond with the HTML from its cache, while all static assets are served from Cloudflare’s edge cache closest to the visitor’s location. Fonts come directly from the third-party server.
   • The page loads faster for the visitor due to reduced processing time (page caching) + reduced latency for static assets served from the closest edge cache (CDN).
4. WordPress website with Caching, Free CDN, and APO
   • The website has page caching, and the entire web page (static and dynamic content) – HTML, CSS, JS, Images, and fonts, are stored in the CDN edge cache courtesy of APO.
   • A visitor to the website is directly served from the edge cache, with no need to go back to the origin server unless custom content is involved – an eCommerce cart/checkout scenario or a logged-in user where personalized content needs to be served.
   • The advantages of this approach are no processing time and minimal latency with static and dynamic content served from Cloudflare’s closest edge location.

A performance test of the above setup options using our test bed yielded the below data. It gives a good picture of the difference in performance.

Page Caching, CDN Edge Cache, and APO add increasing levels of speed and efficiency to a WordPress website and its ability to handle and deliver user requests quickly. The internet is extremely competitive so every little factor will make a difference – Speed is one of those key factors not only from a user experience perspective but in terms of your SEO efforts as well.

5. Conclusion

Undoubtedly, the Cloudflare Automatic Platform Optimization or APO service delivers a good performance bump to a WordPress website at a very affordable cost. The cheapest Cloudflare plan is the Pro plan at $20 per month, which may not be an option for most WordPress website owners.

If you are running a small or medium WordPress website or eCommerce store, and you can afford the monthly $5 cost, then the APO service is probably what you need to deliver a better and faster experience for your users or customers.