Configure WordPress with W3 Total Cache and CloudFlare CDN in LAMP

This guide will show you how to increase Wordpress website load speed with W3 Total Cache Plugin and a CloudFlare CDN free account. In this tutorial, Wordpress CMS system is installed on top of a LAMP stack (Linux + Apache HTTP server + MariaDB RDBMS and PHP) on a Debian 9 self-hosted virtual machine, but the same procedure can be successfully applied, with some minor changes, on any Wordpress website, whether is deployed on a dedicated server, a VPS or on a shared hosting environment.

REQUIREMENTS

Initial Note:

In case your Wordpress website is installed on a dedicated server on top of a LAMP stack, the first thing you need to check-out is if you can install new plugins from Wordpress dashboard without an FTP server installed locally. If you’re being asked to enter an FTP account in order to install new plugins, then you need to enable Wordpress direct file system write method. To enable this Wordpress feature, open the wp-config.php file located in your website web root directory and add the following line of code anywhere in the content of the file.

define('FS_METHOD', 'direct');

You can also run the following command in order to achieve the same thing, without manually updating wp-config.php file, as illustrated in the below screenshot.

echo "define('FS_METHOD', 'direct');" | tee -a /path/to/website/wp-config.php

 wp-config.php

Before setting-up W3 Total Cache plugin with CloudFlare CDN, visit GTmetrix website at the following link https://gtmetrix.com  and make a performance test for your domain in order to compare the results after the CDN integration.

Part 1 - Install W3 Total Cache

  • In order to install W3 Total Cache plugin, log in to WordPress dashboard and hit on Plugins - > Add New link. In the search field, write W3 Total Cache and hit on Install Now button to start the installation process as illustrated in the following image.

W3 Total Cache plugin

  • After W3 Total Cache plugin has finished installing, hit on Activate W3 Total Cache plugin button to activate the plugin.

Activate W3 Total Cache plugin

Part 2 – Setup W3 Total Cache Plugin

 1. To configure W3 Total Cache plugin, navigate to Wordpress dashboard and go to Plugins -> Installed Plugins from left menu and hit on Settings link from W3 Total Cache in order to start the configuration process.

 configure W3 Total Cache plugin

2. Then, move to General Settings and enable Page Cache option. Use Disk:Enhaced page cache method and scroll down to move to the next option.

enable Page Cache option

3. Next, scroll down and disable Minify, Database Cache and Object Cache, because CloudFlare CDN will take care of minifying your website javascript, CSS and HTML files and will also provide it own caching mechanism.

You should disable Database Cache in case Wordpress website is installed on a shared hosting environment.

 4. Next, scroll down and enable Browser Cache as illustrated in the below image.

enable Browser Cache

5. Scroll down and disable CDN and Reverse Proxy option, then move to Miscellaneous tab and enable the following option: Verify rewrite rules. Make sure you disable all other options as presented in the below image.

Verify rewrite rules

6. Next, scroll down and disable all Debug options. Finally, click on Save all settings button to apply the configuration. Also, here you have the option to export W3 Total Cache plugin configuration or to reset the plugin to default settings in case something is going wrong.

 disable all Debug options

7. The next setups will cover Page Cache option from the left menu. Go to General tab and enable the following options as illustrated in the below screenshot.

  • Cache front page
  • Cache feeds: site, categories, tags, comments
  • Cache SSL (https) requests
  • Don’t cache pages for logged in users
  • Don’t cache pages for following user roles: Administrator, Editor, Author, Contributor and Subscriber.

Page Cache option

8. Next, scroll down and enable Cache alias hostnames option. Write all your website aliases (with or without www) in Additional home URLs and scroll down to the next option.

 enable Cache alias hostnames

9. On the Cache Preload tab enable Automatically prime the page cache. Don’t change the values for Update interval and Pages per interval. Also, you should add an XML URL sitemap for the website. Also, make sure you enable Preload the post cache upon publish events option.

 Automatically prime the page cache

10. Next, scroll down and enable Front page, Post page, Blog feed, Post comments pages and rss2 options from Purge Policy: Page cache screen as described in the below image.

 enable Front page, Post page, Blog feed, Post comments pages and rss2

11. Finally, scroll down to the Advanced tab and enable only Compatibility mode option. Leave all other options as default and hit on Save all settings button to apply the changes made so far.

 enable only Compatibility mode

12. Next, navigate to Browser Cache menu and on General tab make sure you enable the following options as presented in the below screenshot.

  • Set last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag
  • Set W3 Total cache header
  • Enable HTTP gzip compression

Browser Cache menu

 13. Continue to scroll down and enable the following options for CSS & JS, XTML & XML and Media & Other Files tabs as described below:

  • Set last-Modified header
  • Set expires header
  • Set cache control header
  • Cache Control policy set to cache with max-age and validation (“max-age=EXPIRES_SECONDS, public, must-revalidate, proxy-revalidate”)
  • Set entity tag (ETag)
  • Set W3 Total cache header
  • Enable HTTP gzip compression

CSS & JS, XTML & XML and Media & Other Files

Save cache settings

14. Finally, hit on Save all settings button to apply W3 Total Cache plugin configuration. However, you should tweak W3 Total Cache plugin settings and run tests in order to determine the best options for your website.

Part 3 – Setup CloudFlare CDN

15. In order to activate CloudFlare plugin in Wordpress, navigate to Performance - > Extensions - CloudFlare and hit on Activate link as illustrated in the following image.

Performance - > Extensions - CloudFlare

16. To configure the CloudFlare plugin, hit on Settings link from the Extensions menu as presented in the below screenshot.

CloudFlare Settings

17. CloudFlare is a content delivery network service (CDN) which acts as an reverse-proxy accelerator for websites. Among other features, some of which you will have to pay for, CloudFlare offers DNS and integrated security services for cached websites. To integrate a website to CloudFlare CDN, all you need to do is to sign-up for a free account at the following link https://www.cloudflare.com/a/login and add your domain to their networks as illustrated in the below screenshot.

get started with CloudFlare

18. Wait about a minute for CloudFlare to scan your domain DNS records and hit on the Continue button to move to the DNS records screen. On detected DNS records screen, check if all your domain records are discovered. If all your DNS records are present in the list, hit on Continue button to proceed further. Use the below screenshots as a guide.

Wait about a minute for CloudFlare to scan your domain DNS records

DNS Record list

19. Next, you need to choose a CloudFlare plan for your domain and hit the Continue button to move to the next screen. In this tutorial we’ll choose a Free Website plan.

 Select CloudFlare Plan

20. On the next screen, note down CloudFlare DNS name servers and update your domain nameservers accordingly. You need to login to your domain registrar panel in order to change your domain name servers and the new records must be updated as quickly as possible. The domain name servers should point exactly to CloudFlare nameservers and no other ns records.  When you’re done, hit on Continue button to finish the integration process. However, you can hit Continue button and update the DNS ns records at your registrar later.

 Change Name servers

21. After you’ve modified your domain name servers, hit on Recheck Nameservers button to force the activation process. Domain DNS propagation in internet cloud takes up to 24 hours to complete. However, during this time your website will not be affected in any way. No downtime!

Recheck Nameservers

22. Next, navigate to CloudFlare web panel and hit on Speed menu button. Here, enable Auto Minify option for JavaScript, HTML and CSS as illustrated in the below image. This setting will compress all javascript, CSS and HTML files in order to reduce their volume and deliver them faster to end client browsers.

 enable Auto Minify

23. Scroll down and enable Automatic mode for Rocket Loader as illustrated below.

 Automatic mode for Rocket Loader

24. Next, hit on Crypto button and set SSL encryption to Full. Then, go to the main screen in order to get the API key and activate the Wordpress CloudFlare extension. Hit on Get your API key link, select Global API Key and click on View API key button. A new pop-up window should open. Copy the API Key string from the clipboard and close the pop-up window.

set SSL encryption to Full

API key

25. Move back to Wordpress website and go to Performance -> Extensions -> CloudFlare and hit on the Settings link. In the CloudFlare screen, hit on the Authorize button and add the email address you signed-up to CloudFlare and the API key you’ve copied from Global API key.  When you finish, hit Next button to continue.

CloudFlare Settings

Enter API key

26. Select your domain zone and hit the Next button to finish the authorization process. Then, you can start managing CloudFlare CDN settings for your domain via CloudFlare plugin in Wordpress.

 Select Domain zone

Manage CloudFlare settings from within WordPress

27. If you’ve already updated the DNS ns records at your registrar, you can wait few hours and then log in to CloudFlare panel. The website should be successfully activated on CloudFlare.

The website should be successfully activated on CloudFlare.

Wait a few days for CloudFlare CDN service to completely cache your website content and analyze your website speed again at https://gtmetrix.com website. Compare the results against the initial report in order to determine the performance benefit provided by CloudFlare CDN.

Share this page:

Suggested articles

1 Comment(s)

Add comment

Comments

From: Dominique at: 2017-09-11 08:27:17

Thank you very much for the advice, it is very clear and very precise