Improving your site with CloudFlare and W3 Total Cache

Improving your site with CloudFlare and W3 Total Cache

  CloudFlare and W3Total Cache plugin is a fantastic way to speed up your site. 

In this tutorial, I will show you how to configure CloudFlare + W3Toltal Cache, If you want to get more information for CloudFlare and W3Total Cache, please refer to those links

I. Installing W3 Total Cache

  1. Of course, You need to log into your WordPress account
  2. Click on Plugins -> Add new -> Enter W3 Total Cache in Search form then press enter.
  3. You should get look like: screenshot-127-0-0-1-8888-2016-11-23-12-04-33
  4. Now, click on Install Now button and wait for one minute. Once the plugin has been installed, click Activate button.
  5. Look at the admin sidebar, click on Performance menu item. Switch to General Settings sub menu, Here is list of caching functions that you need to checked: Page Cache, Opcode Cache (if you get “Not Available”, please go to cPanel to enable it or contact your hosting provider to get a help), Database Cache. Once you have checked all theme, click Save all settings button.

II. Installing CloudFlare

  1. Firstly, Go to this link and click Sig up link at the top of the page
  2. Create a CloudFlare account by typing your email address and password. Click Create account now to proceed.
  3. Enter the domain for your website and then click Begin Scan. It’s not necessary to add “www” to the domain. For example, if your website is, type 
  4. CloudFlare will scan your domain’s DNS records. This will take approximately 60 seconds to complete. Once the DNS scan has finished, click Continue.
  5. A list of all the DNS records found is displayed, including your subdomains. In this step, you can decide which subdomains you want to enable CloudFlare () or bypass CloudFlare (). Some records, like MX, never go through CloudFlare (no cloud).If there are any additional records you’d like to add, you can add them here. After you’ve reviewed your DNS records, click Process and continue. 
  6. Select a plan that fits your needs and then click Process and continue.
  7. On the final step, you are given the CloudFlare nameservers for your domain. The CloudFlare nameservers are assigned to your domain and listed on this page. Please write down the CloudFlare nameservers. You can also find your CloudFlare nameservers in your CloudFlare dashboard under Overview.Optionally, choose the appropriate Performance and Security settings. By default, your Performance settings are set to CDN Only and your Security profile is set to Medium for your domain. You can change your settings at a later time.Click Process and continue. 
  8. Congratulations! You’ve successfully created your new CloudFlare account! But you’re not done yet! The final step is to update the nameservers for your domain with the CloudFlare nameservers provided in the previous step.

Note: Please allow up to 72 hours for the nameserver information to propagate. You will receive a confirmation email from CloudFlare when the nameservers update is complete. Your site will not experience any downtime during this period.

III. Combining CloudFlare and W3 Total Cache

  1. Now log into your WordPress account again.
  2. Hover on Performance and then click on Extensions link
  3. Activate CloudFlare extension and  click on Settings link
  4. You are inside of CloudFlare area, hit Authorize button screenshot-127-0-0-1-8888-2016-11-23-12-23-00
  5. A popup will be shown, it requires your email address and API key. Email address: The email that was used for CloudFlare. API key: Login to your CloudFlare account -> Go to “My Settings” -> Scroll down to “API Key” -> Click on the “View API Key” button to see your API identifier.
  6. After you have entered Email and API key, press next button.
  7.  Click Save All Settings.
  8. Scroll down to CloudFlare – Content Processing box and do like this screenshot-127-0-0-1-8888-2016-11-23-12-29-31
  9. Finally, Click Save CloudFlare settings button.

Rocket Loader is an awesome functionality of CloudFlare. This is reason why Rocket Loader is good: Javascript loading by default is blocking, which means, that the files are loaded and executed one by one. This takes time. There is a way to define asynchronous javascript loading with the HTML 5 async and defer attribute, but that is entirely different from what rocket loader does. The async attribute ignores the order of the javascript files, and the defer doesn’t, but there are still incompatibilities from browser to OS. Rocket Loader however provides a platform, which works for each browser and OS the same way.

Rocket loader is beta version, it means your website doesn’t work fine sometime, For example: If Preloader functionality is enabling, It will stay with loading  status forever. So, You still should use it? Yep, don’t worry about it. All Wiloke’s themes are compatible with Rocket Loader.

P/S: If you face any issue while configuration, feel free contact us at



Subscribe to our email list and stay up-to-date with all our awesome releases and latest updates.
MailChimp Icon