How to install Cloudflare APO for WordPress with performance improvement
Cloudflare declared the release of "Automatic Platform Optimization" (APO) for the WordPress website.
For performance enthusiasts, Cloudflare APO represents an important step in improving the performance of WordPress.
In our benchmark tests, we found that activating APO on our test site can reduce page load time by 70-300%, depending on the test site.
In this article, we will dive into how Cloudflare APO works and how to use it to improve the performance of your WordPress website!
contents
1. What is Automatic Platform Optimization (APO)?
2. Static HTML in Edge
3. Network performance status in 2021
4. How Cloudflare Automation Platform Optimization Works
5. Use high-performance hosting and Cloudflare APO to improve WordPress performance
6. How to use Cloudflare automation platform for WordPress optimization
7. Approve how Cloudflare APO works for WordPress
8. Do not add Cloudflare's platform automation optimization
What is Automatic Platform Optimization (APO)?
Platform automation optimization is a new set of one-click platform optimization utilities developed by Cloudflare.
The first platform to accept "APO processing" is WordPress, the world's most popular CMS, with a market share of over 60%. In the future, we hope to see similar APO services on CMS and other platforms.
At a high level, Cloudflare WordPress APO improves website performance in two main ways.
1. Static HTML copies of WordPress web pages are cached on Cloudflare servers around the world.
2. Third-party fonts are stored and maintained by Cloudflare.
Let's take a look at how APO works and why on a technical level.
Static HTML in Edge
The main difference between Cloudflare APO and traditional page caching solutions and CDNs is that it can cache static HTML directly next to Cloudflare. To get a clearer picture, let's take a look at four different WordPress settings from "simple" to APO.
WordPress setting #1-no page recognition or CDN
By default, WordPress does not support page caching or CDN support. With this configuration, even if the page content does not change between requests, all requests need to be dynamically created by PHP.
In addition, the non-integration of the content delivery network (CDN) means that all static assets (such as CSS, JS, images, and fonts) are served by the main server.
This configuration can make a WordPress site very slow, especially for visitors away from the origin server.
WordPress installation #2-page extraction without CDN
Implementing page caching is one of the best strategies to improve WordPress performance. At Atakdomain, our hosting column is a highly customized page caching layer supported by the Nginx FastCGI caching module.
Hiding the page significantly reduces the CPU load on the basic server because the request can be processed from the cache without generating dynamic HTML.
This frees up your CPU to focus on other important dynamic tasks and makes your WordPress site more stable. Although this configuration may allow your site to get more requests per second, it does not solve the "remote problem".
Without the correct CDN, providing static assets to remote visitors is still a problem.
WordPress installation #3-extract pages using CDN
So far, adding a CDN to provide page caching of static assets has been the most effective way to host a WordPress website.
In this model, the origin server is still responsible for serving the actual HTML pages. However, static objects such as CSS files, images, and fonts are loaded into various CDN locations (PoP) around the world. The idea behind this model is that static objects, especially large images, account for most of the requested page size. Therefore, by uploading the material to a server closer to the host, you can reduce loading time and improve performance.
Use CDN to manage global travel.
Although this configuration is a significant improvement over the previous two configurations, it makes you wonder what will happen if WordPress performance is no longer limited because HTML serves the origin server.
Surprisingly, before Cloudflare introduced APO for WordPress, this kind of installation was impossible—at least for non-technical users.
WordPress installation #4-Cloudflare APO for WordPress
Cloudflare APO is the latest product in the field of WordPress performance. Unlike the previous WordPress installation that was hindered by the performance of the original server, from the visitor's point of view, APO-enabled sites are basically "unresponsive".
Use Cloudflare APO to manage global travel.
To this end, Cloudflare uses its globally distributed CDN and Worker / Worker KV to create a static HTML representation of the WordPress site. We will learn more about how Cloudflare APO works in a later article.
For now, just know that enabling WordPress-compatible APO sites is no longer a latency issue originally created. In other words, access requests from the United States, Germany, and Japan will be served by nearby data centers instead of your origin server.
Want to learn more about how to use Cloudflare APO to accelerate your WordPress website? Watch our webinar with Cloudflare's Garrett Galow!
State of network performance in 2021
In the past few years, the professional website development industry has undergone tremendous changes. More and more developers are shifting from monoliths owned by WordPress to more reasonable and useful static website developers (such as Hugo) and JavaScript frameworks (such as Gatsby).
We use the term "performance" fairly, because website performance can often be explained as subjective metrics.
For example, the load time of a page may vary depending on the location of the test and the time of day.
So, blindly say that a static Gatsby site is faster than a WordPress site unless some framework is created to make this argument unimportant.
In today's highly connected world, one of the most important ways to test site performance is to upload to different parts of the world.
In terms of WordPress performance, this is where static websites first appear. Naturally, static websites can be uploaded directly to CDNs distributed around the world-this can effortlessly speed up their speed around the world.
Since a WordPress site requires a native server to create HTML, it cannot directly benefit from the most popular sites such as Netlify, Vercel, and Cloudflare for seamless global delivery. From a business perspective, this means that you may lose potential visitors and customers away from the origin server because Google relies on page speed when generating search results.
This is Cloudflare APO for WordPress.
Enabling Cloudflare APO increased the performance of WordPress by 300%.
The automatic optimization of WordPress by the Cloudflare platform uniquely reflects the meaning of WordPress performance in 2021. As we mentioned before, activating APO on our test site reduced loading time by 70-300%, depending on the test site. This is possible because APO effectively deletes its original server as a performance buffer.
How Cloudflare Automation Platform Optimization Works
With Cloudflare APO, the HTML of your WordPress site is stored on Cloudflare edge servers around the world. This was created by Workers KV, a distributed value-added database utility with ultra-fast global distribution (less than 60 seconds).
When data is written to KV Workers through the Cloudflare API, it is automatically copied to more than 150 Cloudflare data centers around the world within a few seconds.
This makes Workers KV a key candidate for accelerating WordPress sites, because posts and pages can be easily represented by a value key mechanism-URL is the "key" and the content of the HTML page is the "value".
Web pages stored as value-added items in Cloudflare Workers KV.
After enabling APO for your WordPress site, your main server will no longer be able to access most of your site requests.
Instead, the request will be served from the local Cloudflare CDN cache (if the page is cached) or Workers KV (if the cached page is not on the Cloudflare CDN).
If there are no pages in the CDN cache or Workers KV database, Cloudflare will make a single request to your main server and hide the HTML of the new page.
The magic here is that Cloudflare Workers KV acts as a shared mirror of the origin server. Please note that the data stored in Workers KV is automatically copied between all Cloudflare servers.
This means that because your original server running WordPress is somewhere in the United States, a request for access to Japan does not require you to enter your local server to activate the local CDN cache field.
Instead, guests from Japan will get cached HTML from the Workers KV database cached by the nearest Cloudflare data center or CDN.
This new submission model is very different from previous attempts to cache HTML pages for WordPress.
Previously, the most popular method of "full page caching" involved creating Cloudflare page rules to "hide all content." Although this method can achieve a significant performance improvement, it is not a very useful caching method because it relies on the "pull" model instead of the "push" model that Workers KV automatically generates global HTML.
Using the previous page layout, visitors who clicked on Cloudflare's cache in the United States will not store property for the visitor elsewhere-which means that the site will not be able to effectively deliver content from the web globally. Make the most of Cloudflare.
Platform automation optimization also goes a step further by caching third-party types. In most cases, fonts can occupy a large portion of the requested size of the page.
Unlike CSS, JS, and images that are usually provided from the root domain, fonts are usually provided from third-party applications such as Google Fonts. This means that proxy caching-based utilities such as Cloudflare cannot cache fonts and serve fonts.
Since APO is supported by Cloudflare Worker (a programmed JavaScript user between the origin server and the host), more logic can be added to perform tasks in the basic cache.
In this case, APO uses Cloudflare Worker to cache third-party fonts and convert the HTML of the page to internal CSS to allow the cache type to be displayed on the Cloudflare CDN. This eliminates the need for other external requests to save the page and reduces the number of links and loading time required to serve the page.
Finally, because APO uses a WordPress plugin to integrate with your site, the Cloudflare cache is automatically cleared when you refresh the page on the site. This ensures that visitors will always be able to view the latest version of your site without manual intervention.
Improve WordPress performance with high-performance hosting and Cloudflare APO
Cloudflare APO is not a panacea. Choosing a performance-based managed WordPress host like Atakdomain is still very important for two main reasons.
1. Cloudflare APO only hides the homepage for users without access rights. Like Atakdomain's server-level page retrieval settings, APO does not cache pages with specific cookies and logged-in users. This means that core server performance is still an important part of the interface.
2. The excellent WordPress experience includes much faster performance than the first fast. Since WordPress is the core of a dynamic CMS, there are many factors to consider when running a WordPress site. Hosting hosts like Atakdomain provide 24/7 WordPress support, website regressions, security guarantees, etc.
The following four use cases explain why you still choose high-performance WordPress hosting, even if you use Cloudflare APO.
1. WooCommerce, easy digital download and e-commerce
When certain cookies related to e-commerce are found, Cloudflare APO may choose to cache them. For example, when a visitor adds an item to a shopping cart on the WooCommerce website, WordPress will automatically install the woocommerce_items_in_cart cookie. Once this cookie is detected, APO will pass the cache to avoid storing and serving specific customer data. Therefore, even with automatic platform optimization enabled, WooCommerce and other WordPress e-commerce platforms will still rely heavily on the performance of their origin servers.
2. Dashboard Performance
Since Cloudflare APO does not cache HTML for logged in users, browsing the WordPress dashboard always depends entirely on the performance of the underlying server. If you don’t use performance-optimized hosting, tasks such as writing and publishing content, managing images and other media materials, and running maintenance routines on your WordPress site can be very slow. This will have a direct negative impact on your business results.
3. WordPress Member Sites and Forums
If you use plugins like Ultimate Membership Pro to manage your WordPress membership site, or use bbPress to enhance your WordPress forum, Cloudflare APO will not be able to optimize most of your traffic. Since member sites and forums usually require users to log in, Cloudflare APO will automatically pass the HTML cache to these users. Therefore, using high-performance hosting is still the best way to maintain a fast user experience for WordPress membership sites and forums.
4. WordPress Cron Project
WordPress cron (WP-Cron) can help you set up and automate backlink tasks on your WordPress site. Your website may use the Krona function to publish posts at specific times. Simple tasks like this do not require much CPU resources, but other tasks may require a lot of resources. For example, tasks such as using a plugin to automatically back up your WordPress site to a ZIP archive every 12 hours will consume more CPU.
Since Cloudflare APO only helps optimize front-end content, you still need to host your site on high-performance hosts such as Atakdomain to improve back-end performance and log-in user experience.
How to use Cloudflare automation platform for WordPress optimization
Now that we have discussed why Cloudflare automatic platform optimization is a multifunctional game for WordPress, let us continue to discuss how to add features to your WordPress website.
APO applies to free and paid Cloudflare plans. For free Cloudflare users, APO pays an additional $5 per month. If you use a Pro, Business, or Enterprise plan on Cloudflare, you can activate APO for free.
To start using Cloudflare APO, you need to do the following:
1. Create an API icon in the Cloudflare dashboard.
2. Install the official Cloudflare WordPress plugin.
3. Optimization of automation platform.
1. Create Cloudflare API token
Before activating APO, you need to create an API token and first install the Cloudflare WordPress plugin. To create an API icon, click the profile icon in the upper right corner of the Cloudflare tab, click "My Profile", select the "API Token" tab, and click "Create Token".
Create the Cloudflare API icon.
Under "Token API Templates," use the template option next to the Purchase WordPress option.
Select the WordPress API token template.
The "WordPress" template will create an API token with the necessary permissions to allow the custom platform optimizer to work properly. Custom settings are all you need to start using APO, but if you need to lock your API token to a specific user or region, please feel free to go to "Account Resources" and "Settings" to set "Regional Resources".
After completing the token parameter setting, scroll down and click Continue to shorten.
Configure Cloudflare API display parameters.
Finally, click Create Token to complete the process.
Confirm that the Cloudflare API icon is created.
Be sure to copy the API icon to a safe location. After installing the Cloudflare WordPress plugin, you will need it later. After registering the API icon in a secure location such as a password manager, please close the page at any time.
Store your Cloudflare API token in a safe place.
2. Install 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, not the "WP Cloudflare Super Page Cache" in the first search result.
Need a hosting solution that provides you with a competitive advantage? Your atakdomain achieves incredible speed, state-of-the-art security and automatic measurement. View our plan
Install the official Cloudflare WordPress plugin.
Next, go to Settings> Cloudflare next to the WordPress dashboard and click "Enter here".
Log in to your Cloudflare account.
Enter the email address associated with your Cloudflare account using the API token you have created. Click Save Credentials API to complete the login process.
Enter your email address and Cloudflare API icon.
Now that the Cloudflare WordPress plugin is fully installed, let's go to the Cloudflare dashboard to enable custom platform optimization.
3. Enable custom platform optimization in Cloudflare
Automatic platform optimization for WordPress is provided with Cloudflare Pro, Business and Business plans at no additional cost. If you use the free Cloudflare map, the APO surcharge is $5/month. To activate APO, go to Speed> Optimization in the Cloudflare dashboard.
To activate APO, go to Speed> Optimization.
Click on the "Optimize Delivery" section and enable "WordPress Automated Platform Optimization". If you are on a free map, Cloudflare will send you billing details at this time. After activating APO, you should see a message stating that "The WordPress plugin has been successfully detected on [your domain]." If you don’t see this message, we recommend that you reinstall the Cloudflare app or visit Cloudflare support for further assistance.
Enable automatic platform optimization for WordPress in your Cloudflare dashboard.
In your WordPress dashboard, go to Settings> Cloudflare next to it. Click the application button next to "Apply Cloudflare recommended settings to WordPress"-this will make Cloudflare settings for your WordPress more convenient. Finally, make sure that "Automatic Platform Optimization" is also enabled in the plugin settings.
Cloudflare WordPress plugin settings.
Approval of how Cloudflare APO applies to WordPress
At this point, Cloudflare automation platform optimization should be active on your website! Here you can make sure that APO is working properly. First, make sure that the orange cloud in the Cloudflare DNS table is enabled for your WordPress site domain. If the orange cloud is disabled, Cloudflare will no longer proxy your domain-which means APO will also not work.
Make sure the Cloudflare orange cloud is enabled.
How to check Cloudflare APO cache status using browser inspector
Next, you can check the HTTP headers of requests from your website by monitoring your web browser. We will use Google Chrome in the example below. First, launch a new browser window in unknown mode.
Start a new unrecognized window in Google Chrome.
Next, go to your WordPress website, click on the page on the right, and select "Check" to turn on browser monitoring. You can also access the monitor by going to View> Developer> Developer Tools in the Chrome menu bar. Purchase your domain on demand (brianwp.com in the example below). In the submenu, click "Headers" to display HTTP response headers.
Check the Cloudflare cache status via browser monitoring.
When APO is active, you should see some headlines related to APO.
• cf-apo-via specifies where to submit the request. This header has several possible values-"raw, non-cached", "raw, dual-pass" and "cached". If you see the "Original, No Cache" value for this header, it means that the base server is sending the "Cache Control: No Cache" header to Cloudflare. The "valid and passable" value means that the Cloudflare HTML cache has passed and the request has been retrieved from the original request. Finally, the "cache" value specifies that the request was retrieved from the Cloudflare cache.
• cf-cache status specifies whether the page is served by Cloudflare CDN. After refreshing the page a few times, you should see a "HIT" status. If your cf-cache status header shows "dynamic" after several updates, you may have skipped the APO due to a configuration error or cookie incompatibility.
• cf-edge-cache sets page cache compatibility according to the cache instructions of the main server. This header has two values-"no cache" and "cache, platform=wordpress". When APO is properly configured using the Cloudflare WordPress plugin, this header will return "no-cache" for pages that should not be cached, and return "cache, platform = wordpress" for cached pages.
• age represents the number of seconds the page is cached in Cloudflare CDN.
If you see the above title when browsing the WordPress site, it means that APO has been installed. Now, go ahead and do a quick test to see how fast your website is!
How to use curl to check Cloudflare APO cache status
You can also verify that Cloudflare APO is working properly by using the following curl command in the terminal. Please note that the command is located under the heading "Accept: text / html". This is necessary when checking the APO cache status.
curl-GET -I -H request "accept: text/html" https://www.website.com
After running the command, you should see a list of response headers as shown below. As you can see, cf-cache-status, cf-apo-via, cf-edge-cache, and age titles indicate that the request is served by Cloudflare Cache.
Use curl to check Cloudflare APO cache status.
No need for automation platform optimization added by Cloudflare
Cloudflare recommends using the automatic platform optimizer with the official Cloudflare WordPress plugin. This is also the method we recommend, because it can ensure that you get the maximum performance advantage from APO. If your site is compatible with the Cloudflare WordPress plugin, we recommend that you work with developers to make your site compatible.
If you really cannot install the Cloudflare plug-in, you can use APO without the plug-in. If you choose this path, you can still take advantage of some performance optimizations, but there are some important limitations to be aware of.
Cloudflare APO with WordPress plugin
Installed together with the Cloudflare WordPress plugin, the custom platform optimizes to provide the following HTML caching functions.
• Remove the 30-day TTL HTML margin.
• Cancel caching within 30 seconds after posting or updating a post.
• Pass HTML hiding for logged in users.
• Pass HTML cache for certain cookies (such as WooCommerce).
• If the page is served from Cloudflare CDN, pass the request to the origin server. This reduces the load on the main server.
Cloudflare APO without WordPress plugin
If the Cloudflare WordPress plugin is not installed, you may see the following APO HTML caching features.
• Remove the 30-day TTL HTML margin.
• Clear the cache in 30 minutes instead of 30 seconds.
• Pass HTML cache for certain cookies (such as WooCommerce).
• A request from the main server is still needed to find the correct cache clearing logic.
As you can see, there are many benefits to using automatic platform optimization in conjunction with the official Cloudflare WordPress plugin.
Good news-@Cloudflare WordPress APO is here, and it represents a big step forward in improving WordPress performance.
Cloudflare WordPress automation platform optimization is undoubtedly the most important tool in recent history to improve WordPress performance. It goes beyond general web server optimization, server-side page caching, and CSS/JS reduction strategies, and provides some brand new things.
Since its inception, WordPress has been limited by the fact that there is no conventional and easy way to hide HTML pages on the CDN. Cloudflare uses its network of more than 150 data centers, Workers and Workers KV to simplify the performance playground between WordPress websites and static websites designed with advanced frameworks.
This is no small feat, and we look forward to seeing how Cloudflare will extend its automation platform optimization capabilities to other CMS platforms in the future.
Are you using Cloudflare APO to accelerate your WordPress website? Let us know in the comments below!
_______________________________________
Save time, money, and improve website performance by:
• Instant help from WordPress hosting experts, 24/7.
• Cloudflare Enterprise integration.
• A global audience reaches data centers around the world.
• Use our built-in application performance monitor for optimization.
