How to Set up Cloudflare APO for WordPress

As part of its annual “Birthday Week” celebration, Cloudflare recently announced the release of “Automatic Platform Optimization” (APO) for WordPress sites.

For performance enthusiasts, Cloudflare’s APO represents a huge step forward for maximizing WordPress performance.

In our benchmarks tests, we found that enabling APO on our test site reduced page load times by 70-300% depending on testing location.

In this article, we’ll dive deep into how Cloudflare APO works and how you can use it to boost the performance of your WordPress site!

What Is Automatic Platform Optimization (APO)?

Automatic Platform Optimization is a new suite of one-click platform-tailored optimization services by Cloudflare.

The first platform to receive the “APO treatment” is WordPress, the world’s most popular CMS with over 60% market share. In the future, we expect to see similar APO services for other CMS and platforms.

On a high level, Cloudflare’s WordPress APO improves site performance in two major ways.

1. Static HTML copies of your WordPress site’s pages are cached in Cloudflare edge servers around the world.
2. Third-party fonts are cached and served by Cloudflare.

Let’s take a look under the hood to see how and why APO works on a technical level.

Static HTML at the Edge

The key differentiating factor between Cloudflare’s APO and other traditional page caching and CDN solutions is its ability to directly cache static HTML at Cloudflare’s edge. To paint a clearer picture, let’s go through four different WordPress setups from “no optimization” to APO.

WordPress Setup #1 – No Page Caching or CDN

By default, WordPress does not come with page caching or CDN support. With this configuration, all requests need to be dynamically generated by PHP even if no page content has been changed between requests.

Furthermore, no content delivery network (CDN) integration means that all static assets like CSS, JS, images, and fonts are served by the origin server.

This configuration can make for a very slow WordPress site, especially for visitors who are far away from the origin server.

WordPress Setup #2 – Page Caching with no CDN

Implementing page caching is one of the best tactics to improve WordPress performance. At Kinsta, our hosting stack includes a highly-tuned page caching layer powered by Nginx’s FastCGI cache module.

Page caching reduces CPU load on the origin server dramatically because requests can be served from cache without the need for dynamic HTML generation.

This frees up your CPU to focus on other important dynamic tasks and makes your WordPress site more stable. While this configuration may allow your site to serve more requests per second, it doesn’t solve the “distance problem”.

Without a proper CDN, serving static assets to faraway visitors is still a problem.

WordPress Setup #3 – Page Caching with CDN

Up until now, page caching with the addition of a CDN for serving static assets was the most performant way of hosting WordPress sites.

In this model, the origin server is still in charge of serving the actual HTML for a page. However, static assets like CSS files, images, and fonts are offloaded to various CDN Points of Presence (PoPs) around the world.The idea behind this model is that static assets, especially large images, make up the majority of a request’s page size. Therefore, by offloading assets to a server closer to the visitor, it’s possible to reduce load time and improve performance.

While this configuration offers a significant improvement over the previous two, it does make you wonder what would happen if WordPress performance was no longer bottlenecked by having to serve HTML from the origin server.

Surprisingly enough, such a setup wasn’t feasible until the introduction of Cloudflare’s APO for WordPress – at least not for non-technical users.

WordPress Setup #4 – Cloudflare APO for WordPress

Cloudflare APO is the latest in the world of WordPress performance. Unlike the previous WordPress setups which were bottlenecked by origin server performance, sites with APO enabled essentially become “originless” from the perspective of visitors.

To accomplish this, Cloudflare utilizes its globally-distributed CDN along with Workers/Workers KV to create a static HTML representation of your WordPress site. We’ll get more into how Cloudflare APO works later on in the article.

For now, just know that a compatible WordPress site with APO enabled is no longer subject to origin-induced latency. In other words, requests from visitors in the USA, Germany, and Japan will be served from nearby data centers instead of your origin server.

Want to learn more about how to speed up your WordPress site with Cloudflare APO? Watch a recording of our webinar with Garrett Galow of Cloudflare!

The State of Web Performance In 2023

Over the last few years, there’s been a big move in the professional web development industry. More and more developers are moving from the monolith that is WordPress to more nimble and performant static site generators like Hugo and JavaScript frameworks like Gatsby.

We use the term “performance” judiciously because web performance can often be interpreted as a subjective metric.

For example, a page’s load time can fluctuate depending on the testing location and time of day.

Thus, blindly saying a Gatsby static site is faster than a WordPress site doesn’t hold any weight until some context for the argument is established.

In today’s highly-connected world, one of the most important contexts for web performance testing is load time across different regions of the world.

This is where static sites have the edge over WordPress when it comes to performance. By default, static sites can be uploaded to globally-distributed CDNs directly – this makes them fast around the world without any additional work.

Since WordPress sites require an origin server of some sort to generate HTML, it isn’t able to directly take advantage of platforms like Netlify, Vercel, and Cloudflare’s very own Workers Sites for frictionless global delivery. From a business perspective, this means you may be losing out on potential visitors and customers who are far away from your origin server because Google takes page speed into account when generating search results.

This is where Cloudflare’s APO for WordPress comes into play.

Cloudflare’s Automatic Platform Optimization for WordPress is a complete rethinking of what WordPress performance means in 2023. As we mentioned earlier, enabling APO on our test site reduced load times from 70-300% depending on the testing location. This is possible because APO effectively removes the origin server as a performance bottleneck.

How Cloudflare’s Automatic Platform Optimization Works

With Cloudflare APO, your WordPress site’s HTML is cached in Cloudflare’s edge servers around the world. This is made possible by Workers KV, a distributed key-value database service with super fast global propagation (less than 60 seconds).

When data is written to Workers KV via the Cloudflare API, it’s automatically replicated to over 150 Cloudflare data centers around the world within seconds.

This makes Workers KV a prime candidate for speeding up WordPress sites because posts and pages can be easily represented by a key-value mechanism – the URL is the “key” and the HTML page content is the “value”.

Once APO is enabled for your WordPress site, the majority of requests to your site will no longer hit your origin server.

Instead, the request will either be served from a local Cloudflare CDN cache (if the cached page exists) or Workers KV (if the cached page doesn’t exist on Cloudflare’s CDN).

If a page doesn’t exist in the CDN cache or Workers KV database, then Cloudflare will make a single request to your origin server and cache the new page’s HTML.

The magic here lies in the fact that Cloudflare Workers KV acts as a distributed mirror of sorts for your origin server. Recall that the data stored in Workers KV is automatically replicated across Cloudflare’s entire network of servers.

This means that even if your origin server running WordPress is located somewhere in the USA, a request from a visitor in Japan won’t need to hit your origin server in order to prime the local CDN cache zone.

Instead, the visitor from Japan will be served cached HTML from a nearby Cloudflare data center’s Workers KV database or CDN cache.

This new delivery model is wildly different from previous attempts at HTML page caching for WordPress. 

Previously, the most popular “full page caching” method involved creating a Cloudflare page rule to “cache everything”. While this method could result in significant performance gains, it wasn’t a very efficient method of caching because it relied on a “pull” model instead of Workers KV’s “push” model which automatically pushes HTML globally.

With the previous page rule-based setup, visitors hitting a Cloudflare cache zone in the USA wouldn’t cache assets for visitors in other locations – this means sites weren’t able to take advantage of Cloudflare’s network efficiently from a global content delivery perspective.

Automatic Platform Optimization takes things one step further by caching third-party fonts as well. In many cases, fonts can end up taking a significant portion of a page’s request size.

Unlike CSS, JS, and images, which are typically served from the root domain, fonts are often served from third-party services like Google Fonts. This means that proxy-based caching services like Cloudflare are unable to cache fonts and serve fonts.

Since APO is powered by a Cloudflare Worker – a programmable JavaScript service worker that sits between your origin server and visitors – it’s possible to inject additional logic to accomplish tasks beyond basic caching.

In this case, APO utilizes a Cloudflare Worker to cache third-party fonts and modify your page’s HTML with inline CSS to point to the cached font on Cloudflare’s CDN. This removes the need for additional external requests to fetch fonts, and reduces the number of connections and load time required to serve a page.

Lastly, since APO integrates with your site via a WordPress plugin, the Cloudflare cache is automatically purged whenever you update a page on your site. This ensures that visitors will always be able to see the latest version of your site without any manual intervention.

Maximize WordPress Performance with High-Performance Hosting and Cloudflare APO

Cloudflare APO is not a silver bullet, however. Choosing a performance-focused managed WordPress host like Kinsta is still very important for two major reasons.

1. Cloudflare APO only caches frontend pages for users who are not logged in. Similar to Kinsta’s server-level page caching configuration, APO does not cache pages with specific cookies and for logged-in users. This means that origin server performance is still a key part of the equation.
2. A great WordPress experience is made up of much more than just fast frontend performance. Since WordPress is a dynamic CMS at heart, there are many factors to think about when operating a WordPress site. Managed hosts like Kinsta offer WordPress-tailored 24/7 support, site backups, a security guarantee, and more.

Here are four use cases showcasing why you should still choose a high-performance WordPress host even if you’re using Cloudflare APO.

1. WooCommerce, Easy Digital Downloads, and Ecommerce

Cloudflare APO selectively bypasses caching when certain ecommerce-related cookies are detected. For example, when a visitor adds an item to the cart on a WooCommerce site, WordPress sets a woocommerce_items_in_cart cookie automatically. When this cookie is detected, APO bypasses cache to avoid caching and serving customer-specific data. Thus, WooCommerce and other WordPress-powered ecommerce platforms will still rely heavily on origin server performance even with Automatic Platform Optimization enabled.

2. WordPress Dashboard Performance

Since Cloudflare APO doesn’t cache HTML for logged-in users, navigating around the WordPress dashboard will always rely solely on your origin server performance. If you’re not using a performance-optimized host, tasks like writing and publishing content, managing images and other media assets, and running maintenance routines on your WordPress site can turn into a very slow experience. This has a direct, negative impact on your business outcomes.

3. WordPress Membership Sites and Discussion Forums

If you’re using a plugin like Ultimate Membership Pro to manage your WordPress membership site, or bbPress to power a WordPress forum, Cloudflare APO won’t be able to optimize the majority of your traffic. Since membership sites and forums typically require users to log in, Cloudflare APO will automatically bypass HTML caching for those users. Therefore, using a high performance host is still the best way to maintain a fast user experience for WordPress membership sites and discussion forums.

4. WordPress Cron Jobs

WordPress cron (WP-Cron) helps you schedule and automate backend tasks on a WordPress site. Your site may use a cron job to publish a post at a specific time. A simple task like this one doesn’t require much in terms of CPU resources, but other tasks may be a lot more resource-intensive. For example, a task like using a plugin to automatically backup your WordPress site to a ZIP archive every 12 hours is much more CPU-intensive.

Since Cloudflare APO only helps with optimizing frontend content, you’ll still need to host your site on a high-performance host like Kinsta to maximize the performance of backend tasks and the logged-in user experience. You can further these experiences by using the code minification feature that is built right into the MyKinsta dashboard. This allows customers to enable automatic CSS and JavaScript minification with a simple click.

How to Use Cloudflare Automatic Platform Optimization for WordPress

Now that we’ve discussed why Cloudflare Automatic Platform Optimization for WordPress is a game-changer, let’s go over how to add the service to your WordPress site.

APO is available for both Cloudflare free and paid plans. For free Cloudflare users, there is an additional $5/month fee for APO. If you’re on a Pro, Business, or Enterprise plan on Cloudflare, APO can be enabled with no additional charges.

Here’s what you need to do to get started with Cloudflare APO:

1. Create an API token in the Cloudflare dashboard.
2. Install the official Cloudflare WordPress plugin.
3. Enable Automatic Platform Optimization.

1. Create a Cloudflare API Token

Before enabling APO, you’ll need to generate an API token and install the Cloudflare WordPress plugin first. To generate an API token, click on your profile icon in the top right of the Cloudflare dashboard, click “My Profile”, select the “API Tokens” tab, and click Create Token.

Under “API Token Templates”, click Use Template next to the WordPress option.

The “WordPress” template will generate an API token with the necessary permissions that allow Automatic Platform Optimization to function correctly. The default settings are all you need to get started with APO, but feel free to make adjustments to the “Account Resources” and “Zone Resources” settings if you need to lock down the API token to specific users or zones.

When you’ve finished configuring the token parameters, scroll down and click Continue to Summary.

Finally, click Create Token to finalize the process.

Be sure to copy the API token to a safe location. You’ll need it later on when installing the Cloudflare WordPress plugin. After you’ve recorded the API token in a safe place like a password manager, feel free to close the page.

2. Install the Cloudflare WordPress Plugin

The Cloudflare WordPress plugin can be installed directly from the WordPress plugin repository. To find it, search for “Cloudflare” in your WordPress dashboard. Be sure to install the official Cloudflare plugin and not “WP Cloudflare Super Page Cache”, which is the first search result.

 

Next, go to Settings > Cloudflare in your WordPress dashboard sidebar, and click “Sign in Here”.

Enter the email address associated with your Cloudflare account along with the API token you generated earlier. Click Save API Credentials to finalize the login process.

Now that the Cloudflare WordPress plugin is all set up, let’s head over to the Cloudflare dashboard to enable Automatic Platform Optimization.

3. Enable Automatic Platform Optimization in Cloudflare

Automatic Platform Optimization for WordPress is included with Cloudflare Pro, Business, and Enterprise plans at no additional cost. If you are using a free Cloudflare plan, the APO add-on is $5/month. To enable APO, go to Speed > Optimization in your Cloudflare dashboard.

Scroll down to the “Optimized Delivery” section, and enable “Automatic Platform Optimization for WordPress”. If you are on a free plan, Cloudflare will prompt you with billing details during this time. After APO is enabled, you should see a message that says “WordPress plugin successfully detected on [your domain]”. If you don’t see this message, we recommend reinstalling the Cloudflare plugin or reaching out to Cloudflare support for further assistance.

In your WordPress dashboard, go to Settings > Cloudflare in the sidebar. Click on the Apply button next to “Apply Recommended Cloudflare Settings for WordPress” – this will optimize your Cloudflare settings for WordPress. Finally, ensure that “Automatic Platform Optimization” is enabled in the plugin settings as well.

How to Confirm Cloudflare APO for WordPress is Working

At this point, Cloudflare Automatic Platform Optimization should be active on your site! Here’s how you can confirm that APO is working properly. First, make sure that the orange cloud in Cloudflare’s DNS tab is enabled for your WordPress site’s domain. If the orange cloud is not enabled, Cloudflare will not proxy traffic for your domain – this means APO won’t work as well.

How to Check Cloudflare APO Cache Status with a Browser Inspector

Next, you can inspect the HTTP headers for a request to your website with your web browser’s built-in inspector. We’ll be using Google Chrome in the example below. To get started, launch a new browser window in Incognito Mode.

Next, go to your WordPress site, right click on the page, and select Inspect to open the browser inspector. You can also access the inspector by going to View > Developer > Developer Tools in the Chrome menu bar. Click on the request to your domain (brianwp.com in the example below). In the submenu, click on “Headers” to display the HTTP response headers.

When APO is enabled, you should see a few APO-related headers.

• cf-apo-via indicates where a request is being served from. There are a few possible values for this header – “origin, no-cache”, “origin, bypass”, and “cache”. If you see a “origin, no-cache” value for this header, it means the origin server is sent a “Cache-Control: no-cache” header to Cloudflare. A “origin, bypass” value indicates Cloudflare’s HTML cache was bypassed and the request was served from the origin. Finally, a “cache” value indicates the request was served from Cloudflare’s cache.
• cf-cache-status indicates whether or not the page is being served from Cloudflare’s CDN. After refreshing the page a few times, you should see a “HIT” status. If your cf-cache-status header is displaying “DYNAMIC” after a few refreshes, it’s possible that APO is being bypassed due to a configuration error or cookie-related incompatibility.
• cf-edge-cache indicates the page’s cache compatibility as per caching instructions from your origin server. There are two possible values for this header – ”no-cache” and “cache, platform=wordpress”. When APO is properly configured with the Cloudflare WordPress plugin, this header will return “no-cache” for pages that should not be cached and “cache, platform=wordpress” for cacheable pages.
• age indicates the number of seconds that a page has been cached in Cloudflare’s CDN.

If you see the headers above when inspecting your WordPress site, that means APO is all set up. Now, go ahead and run a speed test to see how much faster your site is!

How to Check Cloudflare APO Cache Status with curl

You can also confirm Cloudflare APO is working by using the curl command below in Terminal. Notice that the command passes an “Accept: text/html” header. This is required when checking APO cache status.

curl --request GET -I -H "Accept: text/html" https://www.website.com

After running the command, you should see a list of response headers like the one below. As you can see, the cf-cache-status, cf-apo-via, cf-edge-cache, and age headers show the request was served by Cloudflare’s cache.

Automatic Platform Optimization Without the Cloudflare Plugin

Cloudflare recommends using Automatic Platform Optimization with the official Cloudflare WordPress plugin. This is the method we suggest as well because it ensures you’ll get the most performance benefits out of APO. If your site is incompatible with the Cloudflare WordPress plugin, we recommend working with a developer to make your site compatible.

On the off chance that you really can’t install the Cloudflare plugin, it’s possible to use APO without the plugin. If you choose this route, you’ll still be able to take advantage of some performance optimizations, but there are several important limitations to be aware of.

Cloudflare APO With WordPress Plugin

With the Cloudflare WordPress plugin installed, Automatic Platform Optimization provides the following HTML edge cache features.

• HTML edge caching with a 30-day TTL.
• Cache invalidation within 30 seconds after a post is published or updated.
• Bypass HTML caching for logged-in users.
• Bypass HTML caching for certain cookies like WooCommerce.
• Skip request to the origin server if a page can be served from Cloudflare’s CDN. This reduces load on your origin server.

Cloudflare APO Without WordPress Plugin

If the Cloudflare WordPress plugin is not installed, you can expect to see the following features for APO HTML edge caching.

• HTML edge caching with a 30-day TTL.
• Cache invalidation within 30 minutes (instead of 30 seconds).
• Bypass HTML caching for certain cookies like WooCommerce.
• A request to the origin server is still required in order to provide the correct cache invalidation logic.

As you can see, there are several advantages to using Automatic Platform Optimization with the official Cloudflare WordPress plugin.

Summary

Cloudflare Automatic Platform Optimization for WordPress is unquestionably the most significant service for boosting WordPress performance in recent history. It moves beyond the usual web server optimization, server-side page caching, and CSS/JS minification strategies, and presents something completely new.

If you’re a Kinsta customer, as part of our Cloudflare integration, Edge Caching saves your Kinsta site/page cache to any of Cloudflare’s global network of 275+ data centers.

Edge Caching is included free with all Kinsta plans, doesn’t require a separate plugin, and cuts the time needed to serve cached WordPress HTML by an average of more than 50%!

Since its inception, WordPress has been limited by the fact that there wasn’t a streamlined and easy way of caching HTML pages on CDNs. By leveraging its network of over 150 data centers, Workers, and Workers KV, Cloudflare has leveled the performance playing field between WordPress sites and static sites designed with cutting-edge frameworks.

This is no small feat, and we look forward to seeing how Cloudflare expands its Automatic Platform Optimization feature to additional CMS platforms in the future.

Are you using Cloudflare APO to speed up your WordPress site? Let us know in the comments below!