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 Flama de nube.

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.

Esta 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.

Global traffic routing with a CDN.

Global traffic routing with a CDN.

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.

Global traffic routing with Cloudflare APO.

Global traffic routing with Cloudflare APO.

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 receive 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 2020

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.

Enabling Cloudflare APO boosted WordPress performance up to 300%.

Enabling Cloudflare APO boosted WordPress performance up to 300%.

Cloudflare’s Automatic Platform Optimization for WordPress is a complete rethinking of what WordPress performance means in 2020. 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.

The @Kinsta team got to test @Cloudflare’s new APO service… and it reduced page load times by 70-300%. 🤯 For all the details, click below ⬇️Click to Tweet

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”.

A web page stored as a key-value object in Cloudflare Workers KV.

A web page stored as a key-value object in Cloudflare Workers KV.

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 Sitio de WooCommerce, 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 sitios de membresía y 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.

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.

Cloudflare APO is available for both free and paid plans. For free 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 receive 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.

Create a Cloudflare API token.

Create a Cloudflare API token.

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

Select the WordPress API token template.

Select the WordPress API token template.

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 receive 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.

Configure Cloudflare API token parameters.

Configure Cloudflare API token parameters.

Finally, click Create Token to finalize the process.

Confirm the creation of the Cloudflare API token.

Confirm the creation of the Cloudflare API token.

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.

Record your Cloudflare API token in a safe place.

Record your Cloudflare API token in a safe place.

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.

 

Install the official Cloudflare WordPress plugin.

Install the official Cloudflare WordPress plugin.

A continuación, ve a Settings > Cloudflare in your WordPress dashboard sidebar, and click “Sign in Here”.

Sign in to your Cloudflare account.

Sign in to your Cloudflare account.

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.

Enter your email address and Cloudflare API token.

Enter your email address and Cloudflare API token.

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.

To enable APO, navigate to Speed > Optimization.” width=”1500″ height=”796″ srcset=”https://kinsta.com/wp-content/uploads/2020/10/cloudflare-speed-optimization-tab.jpg 1500w, https://kinsta.com/wp-content/uploads/2020/10/cloudflare-speed-optimization-tab-300×159.jpg 300w, https://kinsta.com/wp-content/uploads/2020/10/cloudflare-speed-optimization-tab-1024×543.jpg 1024w, https://kinsta.com/wp-content/uploads/2020/10/cloudflare-speed-optimization-tab-768×408.jpg 768w” sizes=”(max-width: 1500px) 100vw, 1500px”/></p><p class=To enable APO, navigate to Speed > Optimization.

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.

Enable Automatic Platform Optimization for WordPress in your Cloudflare dashboard.

Enable Automatic Platform Optimization for WordPress in your Cloudflare dashboard.

En su panel de WordPress, vaya a 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.

Cloudflare WordPress plugin settings.

Cloudflare WordPress plugin settings.

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.

Confirm the Cloudflare orange cloud is enabled.

Confirm the Cloudflare orange cloud is enabled.

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 receive started, launch a new browser window in Incognito Mode.

Launch a new incognito window in Google Chrome.

Launch a new incognito window in Google Chrome.

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.

Inspect HTTP headers with a browser inspector.

Inspect HTTP headers with a browser inspector.

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

  • 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 three 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!

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 receive 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.

Big news – @Cloudflare’s WordPress APO is here, and it represents a huge step forward for maximizing WordPress performance. 🚀 Learn how you can use it to give your own site a boost!Click to Tweet

Resumen

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.

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!


If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and receive 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Mira nuestros planes





Enlace fuente