Speed up the Customizr WordPress theme
This documentation describes the process of speeding up your website designed with the Customizr WordPress theme, using the built-in options and a free cache plugin.
After implementing a few simple settings, 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.
Before your start : enable the performance options
We've published another guide on How to improve page load performances with Customizr theme.
In Customizing ▸ Advanced options ▸ Website Performances
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.
Page Speed Test before optimization
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.
Installing W3 Total Cache Plugin
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.
- Login to your WordPress Dashboard.
- Go to Plugins -> Add New.
- Type W3 Total Cache in the search box and enter.
- Click Install Now button and follow by activate plugin link.
Setting up the plugin
In your WordPress admin, go to Performance -> General Settings
General
- 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.
- 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.
- Page cache:
- Check on the check-box to enable this option.
- 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.
- Select Disk: Enhanced from the drop-down, this is the preferred setting that will work properly on Shared Hosting.
- 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.
- Minify:
- Check on the check box to enable this option.
- Minify Mode:
- Select Auto (radio button)
- 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.
- HTML minifier:
- Select Default from the drop-down.
- Select Default from the drop-down.
- JS minifier:
- Select Default from the drop-down.
- CSS minifier:
- Select Default from the drop-down.
- Click on Save all settings button.
Database Cache
This option saves data retrieved from database.
- Database cache:
- Check on the check-box to enable this option.
- 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.
-
Click on Save all settings button.
Object Cache
This option saves common operations.
- Object cache:
- Check on the check-box to enable this option.
- 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.
-
Click on Save all settings button.
Browser Cache
This option uses the cache in the visitors browser.
- Browser cache:
- Check on the check-box to enable this option.
-
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
- Rewrite URL structure:
- Check on this check-box to enable
- Leave other settings intact.
- Click on Save all settings button.
HTML & XML
This setting will minify Javascript and CSS that is written within HTML body.
- HTML minify settings:
- Check on the check-boxes of Enable, Inline CSS minification, and Inline JS minification.
Click on Save all settings button.
Page Speed Tests After
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.
