HomeWordPressCloudflare APO: How to Make Your WordPress Site Faster

Cloudflare APO: How to Make Your WordPress Site Faster

Disclosure

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.

Cloudflare APO Standard Plan without APO 1
WordPress Website without Cloudflare’s APO service

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.

Cloudflare APO Standard Plan with APO
WordPress Website using Cloudflare’s APO service

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

This section will detail step-by-step instructions to install and enable Cloudflare APO on a WordPress installation.

Prerequisites for using Cloudflare’s Automatic Platform Optimization feature:
1. Cloudflare Account
2. Your domain added to Cloudflare
3. Your domain setup with Cloudflare’s DNS and Proxy (Orange Cloud)
4. Official Cloudflare WordPress plugin

Total Time: 10 minutes

  1. Install the Official Cloudflare plugin on your WordPress site

    Cloudflare APO Install Plugin 1

    To install the Cloudflare official plugin, go to the Plugin section in your WordPress admin dashboard. Click on Add New, and search for the Cloudflare Plugin. Click Install Now to add the plugin to your WordPress server, and then Activate the plugin.

  2. Get Cloudflare’s Global API Key

    Free Cloudflare Account for Website Cloudflare plugin API token

    Go to your Cloudflare account and select the profile menu in the top right of the dashboard. Select the API token tab. Click on “View” for the Global API key, and enter your account password to view the Global API key. Copy the key.

  3. Start Cloudflare setup

    Cloudflare APO Plugin Sign In

    Go to the Cloudflare plugin by navigating to Settings > Cloudflare. In the setup screen, click on the Sign In Here option, as shown in the image above. The assumption is that you have already set up a Cloudflare account, as mentioned in the prerequisites.

  4. Enter Cloudflare Account Credentials

    Free Cloudflare Account for Website Cloudflare plugin Sign In

    Enter the Global API key copied earlier and your Cloudflare account email ID in the fields provided on the Credentials page. Click on Save API credentials to move to the next step.

  5. Configure Settings

    Cloudflare APO Plugin Options

    You will be presented with Cloudflare’s Plugin Home page. Apply the recommended Cloudflare settings for WordPress as the first step.

    Next, you will need to subscribe to Cloudflare’s APO plan. APO is a paid plan costing $5 per month. Click on Purchase to start the subscription process.

  6. Purchase APO Subscription

    Cloudflare APO - Purchase

    Complete the payment process to activate the APO subscription on your account.

    Note: APO subscription is per domain. You must purchase APO separately for each domain if you have multiple domains on your Cloudflare account (assuming you want to enable APO on more than one domain).

    Remember, the cost is $5 monthly per domain

  7. Activate APO Subscription and Clear Cache Files

    Cloudflare APO APO Activate 1

    After completing the purchase of the APO subscription,
    Step 1: go to Speed> Optimization > Content Optimization tab in your Cloudflare account.
    Step 2: Scroll down to the Automatic Platform Optimization for WordPress section and toggle the switch to turn it on.
    Step 3: If the Cloudflare plugin has been installed on your site and authenticated correctly, your domains will be listed as shown in the image above.

    You can also turn on/off APO in Cloudflare’s plugin settings in your WordPress dashboard.

    If you want to maintain a cache for each device type (Desktop, Mobile, etc.), select the checkbox against the Cache by Device Type option.

    Purge cache in Cloudflare and in any caching plugin on your WordPress installation.

  8. Automatic Platform Optimization Setup Complete

    Cloudflare APO Status

    If you go back to the WordPress Dashboard and look up Cloudflare plugin settings, you can see the APO feature is now in the ON position.

    The setup of Cloudflare APO is now complete. The next step is to test if the Automatic Platform Optimization feature is enabled and verify the performance improvement of your WordPress website.

    You can check if the WordPress APO integration is working on your website by using KeyCDN’s HTTP Header Checker tool. Enter your website URL and click the check button. In the response headers displayed, you will see the following:
    cf-cache-status : HIT
    cf-apo-via: tcache
    cd-edge-cache: cache,platform=wordpress

    If you don’t see HIT and tcache in the response, refresh the web page, wait for some time, and retest.

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

Performance test without APO activated
Performance Test without APO activated

Website Performance Test Results with APO enabled

Cloudflare APO Website Speed Test after APO
Performance Test Result with APO activated

Website Performance Comparison Table with and without APO

MetricWithout APO (in ms)With APO (in ms)% Improvement
FCP629348-45%
LCP629348-45%
TTFB485215-56%
Speed Index653367-44%
Fully Loaded Time1600504-69%
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

Cloudflare APO CDN Performance Test 1
CDN Performance Test Results without APO

CDN Performance Test Results with APO enabled

Cloudflare APO CDN Performance Test after APO
CDN Performance Test Results with APO

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.

Metric
(in seconds)
Standard WP SiteWP + CachingWP+ Caching +CDNWP + Caching + CDN + APO
FCP2.01.20.620.35
LCP2.01.20.620.35
TTFB1.11.10.480.22
Speed Index2.01.20.650.37
Fully Loaded Time2.41.71.60.50
Performance Comparison with Different Optimization Setups

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.

6. Frequently Asked Questions (FAQ)

Do I need to have a Separate Cache for Mobile Devices?

That depends on how your site is set up. If there are mobile-specific pages or your theme uses a dedicated mobile plugin, you should have separate cache files for Mobile devices.

In the APO settings, select the Cache by Device type option. You must also activate the cache by device type option in your Caching plugin.

Should I save money by using a Cheaper Host along with APO?

On paper, this sounds like a great idea. APO might look like a wrapper delivering excellent performance to the end user and minimizing or hiding origin server issues.

I would not recommend it. APO has to connect to your host server to sync the content, and your site still has vital tasks to ensure a reliable WordPress site. Using a good hosting solution like Kinsta or Cloudways is essential. APO can only enhance it and make it better for your users.

Do I need to buy a Cloudflare Pro plan to use APO?

No, you don’t need to buy Cloudflare Pro to use APO. The APO feature is a stand-alone service at $5 monthly that you can use with the Cloudflare free plan.

Can I use a Caching Plugin with Cloudflare’s APO feature?

APO is compatible with most WordPress page caching plugins like WP Rocket, Flying Press, Object Cache Pro, etc.

The role of the caching plugin is different from APO. The caching plugin operates at the origin server level, while APO works at the CDN level. There is no inherent conflict in their role in powering a website.

You can check the complete list of plugins compatible with APO.

The APO feature from Cloudflare does not seem to work for my site. What could be going wrong?

You can refer to Cloudflare’s troubleshooting and FAQ section for known issues and solutions.

If you have page rules set up, there may be some conflicts with resources served by APO. Check for the same.

If you use Cloudflare’s free plan, you cannot contact Cloudflare support directly. Your only recourse is the Cloudflare community boards- You can search for your issue there or start a discussion thread. The community is pretty active, and people are helpful.

You may also like:

How to Install WordPress Plugins in Three Ways

How to Enable Object Caching in WordPress

The Art of Minimalist Website Design

 

Disclosure: Coolfundas is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you. Read more about the disclosure.

↑ Back to Top

Shashi Venkatesh
Shashi Venkatesh
Shashi Venkatesh is a 22-year veteran of the technology industry, with experience developing and managing large-scale web applications for clients. He is a WordPress expert and has consulted extensively in the development of WordPress websites, blogs and ecommerce platforms.

LEAVE A REPLY

Please enter your comment!
Please enter your name here