Speed up the Hueman Theme : how to setup W3 Total Cache Plugin

This documentation describes the process of speeding up your website designed with the Hueman 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 Hueman 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 successfully 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 Hueman 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, 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 79% and Total Page Size is 410KB, we will attempt to further improve these results, after setting up and using W3 Total Cache Plugin.

Optimize your images

1) Scale your image : recommended maximum dimensions

For the Hueman theme, I would recommend a maximum width of 720 pixels for your image. Wider image will just be too large for most of the devices.

Use the right image format

  • JPEG/JPG :  for photos of things, people, places
  • PNG : for screenshots
  • GIF : for animations

Compress your image files : We can use online image compression tool or computer software, to reduce the file size but not the image quality :

  • tinyPNG. The best, I use it everyday, it works for png and jpeg format
  • Pixlr – A free online tool that works great for minor formatting.
  • Paint for Windows
  • Preview for Mac
Typically, large high quality images should be kept between 100K and 60K. source :  Image sizes and quality on WordPress.org.

2) Regenerate your images for your current theme's various image sizes

Each WordPress theme defines specific image sizes that will be used in various contexts. Each time you upload an image to your media library, WordPress generates in the background all the theme required sizes.

When you switch from one theme to another, all your previous images are not automatically re-generated. So you may have many images with wrong dimensions. The simple solution to avoid this problem is to use the excellent and free plugin called : Regenerate Thumbnails.

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

  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 Non-blocking using "defer"
      • This will instruct browser to load inline Javascript in parallel without stopping page processing, for scripts that are located before HTML </body> tag and run the code
  2. JS file management:
    • Theme: Select Hueman 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 file sequence, jquery.js will always be the first to load, or you will get script errors.
  3. 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/hueman/assets/front/js/jquery.flexslider.min.js All Templates Embed in <head>
    wp-content/themes/hueman/assets/front/js/scripts.min.js
    All Templates Embed after </body>
    wp-includes/js/wp-embed.min.js All Templates Embed after </body>

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

  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 Hueman 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 file sequence.
    File URL Embed Location
    wp-content/themes/hueman/assets/front/css/main.min.css
    All Templates
    wp-content/themes/hueman/style.css
    All Templates

  4. 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 19% increase in PageSpeed Score. Total Page Size has been reduced nearly 50% of it's original size. That's consider a great improvement! 

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

Results with PingDom

With the  PingDom Speed Test tool, we see that the website loads in 886ms, which is faster than 92% 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