Speed up the Customizr WordPress theme : how to setup W3 Total Cache Plugin ?

This documentation describes the process of speeding up your website designed with the Customizr WordPress theme, using the free W3 Total Cache plugin.

After applying some simple settings with this plugin, here's the kind of performance results you can achieve with the Customizr theme, below measured with the PingDom tool Speed Test :

Other results available at the  end of this documentation.

Why using the W3 Total Cache plugin ?

The first reason is that it's free and very effective. The W3 Total Cache plugin has been around for years and is successfuly used by millions of websites. However, it can be a little tricky to setup when you start using it, that's why we propose this simple guide for the Customizr theme.

Using W3 Total Cache plugin enables the process of storing data from existing requests to be re-used for subsequent requests.  Caching prevents repeating database request and serving of same information, by storing data that has already been asked for and serves it up instantly.

W3 Total cache will also help you reduce the sizes of your page by  compressing it (HTML, CSS, Javascript) before it's actually renders by your browser.

This results in faster page load times, and an improved user experience. In the following guide, you'll learn how to get excellent speed performance scores as measured by several online tools like, GT Metrix, PingDom, Google Speed Insight, and WebPageTest.

Pre-plugin Page Speed Test

Before we proceed with installing the plugin, we shall do a GTmetrix page speed test. This will able us to compare the improvements after using W3 Total Cache Plugin. The following is a screenshot of the test result.

The PageSpeed Score is at 97%, the YSlow Score is at 86% and Total Page Size is 394KB, there are also 23 http we will attempt to further improve these results, after setting up and using W3 Total Cache Plugin.

Optimize your images

You should have already read the documentation on How to improve the page load performances with the Customizr Theme ? and carried out it's recommendations before proceeding with this advanced documentation.

Looking at the latest PageSpeed recommendations, you may need to resize your image or compress them in order to increase page load speed.
For more details, you can refer to the optimize your images section in the article How to improve the page load performances with the Customizr Theme.

Installing W3 Total Cache Plugin

  1. Login to your WordPress Dashboard.
  2. Go to Plugins -> Add New.
  3. Type W3 Total Cache in the search box and enter.
  4. Click Install Now button and follow by activate plugin link.

Setting up the plugin

In your WordPress admin, go to Performance -> General Settings

General

  1. Toggle all caching types on or off (at once):
    • Don't use this check-box, we will be going though settings and enable only those that we need.
  2. Preview mode:
    • Lets you test configuration changes before they impact on your users. 
    • Switch to Enabled to safely test changes prior to deploying in a live environment. 
    • Remember to deploy after you are done setting.

Page Cache

This option will create and store a static version of visited pages on your server, so that it can be served immediately to browser.
Saves time needed to retrieve content from database, and therefore speeds up loading.

  1. Page cache:
    • Check on the check-box to enable this option.
  2. Page cache method:
    • Select Disk: Enhanced from the drop-down, this is the preferred setting that will work properly on Shared Hosting.
      We will be using this setting for this documentation.
    • Other settings will require installing of PHP extensions, such as Alternative PHP Cache (APC). You will only be able to add PHP extension on Dedicated Server or Virtual Host, either with the help of your Web Hosting company or if you are familiar with server software.
  3. Click on Save all settings button.

Minify

This option will minify (compress) HTML, CSS and Javascript files. It is the process of removing all unnecessary characters from source code without changing its functionality.

  1. Minify: 
    • Check on the check box to enable this option.
  2. Minify Mode:
    • Select Manual (radio button)
    • Later on, we will have to continue setting up Minify options on Performance -> Minify.
  3. Minify cache method:
    • Select Disk from the drop-down, this is the preferred setting that will work properly on Shared Hosting.
    • Same as Page Cache option mentioned above, other settings will require installing of PHP extensions.
  4. HTML minifier:
    • Select Default from the drop-down.
  5. JS minifier:
    • Select Default from the drop-down.
  6. CSS minifier:
    • Select Default from the drop-down.
  7. Click on Save all settings button.

Database Cache

This option saves data retrieved from database.

  1. Database cache:
    • Check on the check-box to enable this option.
  2. Database cache method:
    • Select Disk, from the drop-down, this is the preferred setting that will work properly on Shared Hosting.
    • Other settings will require installing of PHP extensions.
  3. Click on Save all settings button.

Object Cache

This option saves common operations.

  1. Object cache:
    • Check on the check-box to enable this option.
  2. Object cache method:
    • Select Disk, from the drop-down, this is the preferred setting that will work properly on Shared Hosting.
    • Other settings will require installing of PHP extensions.
  3. Click on Save all settings button.

Browser Cache

This option uses the cache in the visitors browser.

  1. Browser cache:
    • Check on the check-box to enable this option.
  2. Click on Save all settings button.

CDN

This option is for setting a Content Delivery Network (CDN).

CDN is a large distributed system of proxy servers deployed in multiple data centers via the Internet. You can host your static files, such as Javascript and Stylesheet files on a CDN. The CDN wlll deliver the content of these files from a server that's nearest to your visitor's location, this will speed up page load. 

You will have to sign up for a CDN service, such as MaxCDN (recommended by W3 Total Cache plugin).

That's all for the general settings, skip the remaining options and proceed to setup the remaining of the minify settings.

Minify (Continue)

In your WordPress admin, go to Performance -> Minify

General

  1. Rewrite URL structure:
    • Check on this check-box to enable
  2. Leave other settings intact.
  3. Click on Save all settings button.

HTML & XML

This setting will minify Javascript and CSS that is written within HTML body.

  1. HTML minify settings:
    • Check on the check-boxes of Enable, Inline CSS minification, and Inline JS minification.

    Click on Save all settings button.

JS

(N.B. For the classic style, please refer to this documentation)

  1. JS minify settings:
    • Check on this check-box to enable
    • Before </head>:
      • Select Minify and Default (blocking)
      • This will instruct browser to stop rendering and load the Javascript files that are located before HTML </head> tag and run the code.
    • After <body>:
      • Select Minify and Non-blocking using "defer"
      • This will instruct browser to load inline Javascript in parallel without stopping page processing.
    • Before </body>:
      • Select Minify and Default (blocking)
      • This will instruct browser to stop rendering and load the Javascript files that are located before HTML </body> tag and run the code.

  2. JS file management:
    • Theme:
      • Select Customizr or Customizr Pro from the drop-down
    • Click on Add a script button, and you will see a set of inputs.

    • Enter the following contents into the inputs, repeat for all the Javascript files listed below.
    • Take note of the customizr folder name, if using Customizr Pro Theme, the folder name will be customizr-pro.
    • Take note of the file sequence, jquery.js will always be the first to load, or you will get script errors.
    File URI: Template: Embed Location:
    wp-includes/js/jquery/jquery.js All Templates Embed in <head>
    wp-includes/js/jquery/jquery-migrate.min.js All Templates Embed in <head>
    wp-content/themes/customizr/assets/front/js/libs/modernizr.min.js All Templates Embed in <head>
    wp-includes/js/jquery/ui/core.min.js All Templates Embed before </body>
    wp-content/themes/customizr/assets/front/js/tc-scripts.min.js All Templates Embed before </body>
    wp-content/themes/customizr/assets/front/js/libs/jquery-magnific-popup.min.js All Templates Embed before </body>
    wp-includes/js/wp-embed.min.js All Templates Embed before </body>

N.B. If you're a Customizr-Pro user there are some other JS resources you might want to append to the above list

For the correct functioning of the Font Customizer and the Featured Pages Unlimited:

File URI: Template: Embed Location:
wp-content/themes/customizr-pro/addons/wfc/front/assets/js/font-customizer-front.min.js All Templates Embed before </body>

wp-content/themes/customizr-pro/addons/fpu/front/assets/js/fpu-front-modern.min.js All Templates Embed before </body>


Depending on whether you display your list of posts in a masonry grid you need to append also the following:

File URI: Template: Embed Location:
wp-includes/js/imagesloaded.min.js All Templates Embed before </body> 
wp-includes/js/masonry.min.js All Templates Embed before </body>
wp-content/themes/customizr-pro/addons/bundle/grid-customizer/assets/front/js/pc-masonry.min.js All Templates Embed before </body>


Enabling the infinite scroll requires the following resources URIs to be appended:

File URI: Template: Embed Location:
wp-content/themes/customizr-pro/addons/bundle/infinite/infinite-scroll/front/assets/js/endlessly.min.js All Templates Embed before </body> 
wp-content/themes/customizr-pro/addons/bundle/infinite/infinite-scroll/front/assets/js/spin.min.js All Templates Embed before </body>
wp-content/themes/customizr-pro/addons/bundle/infinite/infinite-scroll/front/assets/js/jqueryspin.min.js All Templates Embed before </body>

IMPORTANT: The infinite scroll requires the tc-scripts.min.js to be loaded in <head>:


  1. Click on Save all Settings button, after you have done adding the above file links.
    You will see something similar to the following screenshot.

CSS

(N.B. For the classic style, please refer to this documentation)

  1. CSS minify settings:
    • Click on Enable check-box.
    • Leave other settings unchecked.

  2. @import handing:
    • Select None in the drop-down.
  3. CSS file management:
    • Theme:
      • Select Customizr or Customizr Pro from the drop-down
    • Click on Add a style sheet button, and you will see a set of inputs.
    • Enter the following contents into the inputs, repeat for all the Stylesheet files listed below.
    • Take note of the customizr folder name, if using Customizr Pro Theme, the folder name will be customizr-pro.
    • Take note of the file sequence.
    • The following are an example of the font and color scheme that was set on our test site. You need to view your HTML source for your actual list of stylesheet URIs.

    File URI:
    Embed Location:    
    wp-content/themes/customizr/assets/shared/fonts/fa/css/font-awesome.min.css All Templates
    //fonts.googleapis.com/css?family=Source+Sans+Pro All Templates
    wp-content/themes/customizr/assets/front/css/flickity.min.css All Templates
    wp-content/themes/customizr/assets/front/css/magnific-popup.min.css All Templates
    wp-content/themes/customizr/assets/front/css/jquery.mCustomScrollbar.min.css All Templates
    wp-content/themes/customizr/assets/front/css/style.min.css All Templates

N.B. If you're a Customizr-Pro user there are some other CSS resources you might want to prepend to the above list:

File URI:  Embed Location:     
wp-content/themes/customizr-pro/addons/bundle/grid-customizer/assets/front/css/gc-front.min.css All Templates
wp-content/themes/customizr-pro/addons/wfc/front/assets/css/font_customizer.min.css All Templates 
wp-content/themes/customizr-pro/addons/bundle/infinite/infinite-scroll/front/assets/css/endlessly.min.css All Templates
wp-content/themes/customizr-pro/addons/fpu/front/assets/css/fpu-front-modern.min.css All Templates
wp-content/themes/customizr-pro/addons/bundle/menu-customizer/assets/front/css/mc-front.min.css All Templates

Of course not all the resources above need to be managed here... :

  • you need to add the gc-front-min.css only if you use the Grid Customizer effects
  • you need to add the endlessly.min.css only if you chose to have the infinite scroll for your list of posts (blog, archive, search ...)
  • you need the mc-front.min.css only if your main menu is vertically displayed

  1. Click on Save all Settings button, after you have done adding the above file links.
    You will see something similar to the following screenshot.

That's all for the setup. Remember to switch off preview mode if you have set it in WordPress admin -> Performance -> General Settings -> General -> Preview mode.


Final Page Speed Tests

Results on GT Metrix

Now we shall do a new  GTmetrix page speed test. The following is a screenshot of the test result.

You can see that there is a 2% increase in PageSpeed Score and 7% increase in YSlow Score! Furthermore the number of http Requests has been reduced nearly 60% of its initial value. That's a great improvement! 

Now you have a website that's loading in a flash! Your visitors will be happy.

Results With Google PageSpeed Insights

The  Google PageSpeed Insight tool is the official Google tool to test both the speed and the user experience for mobile viewports.

Results with PingDom

With the  PingDom Speed Test tool, we see that the website loads faster than 88% of all tested websites. Pretty good !

Results with WebPageTest.org

WebPagetest is another excellent web performance tool. It provides extremely detailed results. It's an open source project that is primarily being developed and supported by Google as part of their efforts to make the web faster.

Recommended external resources