Recently, I’ve been diving into the somewhat complicated subject of page speed, simply to provide a good user experience and improve SEO for my clients. I came across a widely known and recommended plugin, W3 Total Cache.
Upon WordPress download, unpacking, and activation, the general settings screen was extremely terrifying.
The general settings page contains toggles for main functions of the caching plugin. It also holds the demo function where one can easily deploy a test version of their site to test settings within the plugin, before it is reflected live on the site. This is a good way to compare page speed before and after configuration of the plugin. I use the Chrome browser extension of Google Page Speed to check the speed configuration of my website. It also gives recommendations as to how to improve speed.
W3 Total Cache Configuration in 30 Seconds
There are a few things to know before diving deep into the configuration of W3 Total Cache, as it can greatly affect user experience, good or bad.
- Caching serves the user a “pre-loaded” version of a webpage – This basically means a web server utilizing caching can serve users an out-dated version of a web page, if not configured properly.
- Browser caching is available on a “per-browser” basis – Not to be confused with page caching, browser caching is a function of certain web browsers (Chrome, Firefox, IE, etc) that improve page speed and user experience.
This 30 second configuration will most likely work for most web servers, depending on the host operating system and general configuration. This gave us at least a 20% performance boost in page load time. If possible, set the following:
Minify HTML, CSS, and Javascript
Minify these files to remove unnecessary line break, comments, and other aspects of code to reduce page load time. Simple configuration of the plugin is shown in the image below in “General Settings”.
Enable Page Cache
Enabling page cache will serve users a web page with the most consistent and up-to-date data every time. The server creates the files in the background and serves to users when they visit the page. This is also found in “General Settings”.
Leverage Browser Caching
One of the most important settings of the WordPress plugin is the browser caching feature. Make sure to enable this feature, as well as expires header, entity tag (Etag), W3 Total Cache Header, and gzip compression:
Also, these next steps are critical. Make sure to tweak the default settings, otherwise, design changes on your site may be out of date unless the cache is cleared. On the “Browser Cache” section, navigate to the “CSS & JS” section, as well as the “Media and Other Files” section, and change the “Set Expires Header” to 604800 seconds. This will keep your styling files at most 1 week out of date (Google’s minimum recommendation). If you make design changes to your site, these files are typically edited. If they are cahced longer than 1 week, users may see inconsistent design on your site, resulting in poor user experience.
Always Test Your Caching Config
Always remember to deploy the demo mode of W3 Total Cache before implementing on the live version of your site. Doing will allow you test page performance without sacrificing user experience during the configuration time.
All in about 30 seconds, we were able to increase page speed by about 20%. This will surely increase as we dive deeper into the plugin. If we find other ways to improve caching and page speed, we’ll certainly share them in anothe rblog post.
If you have any tips for improving performance of a web page, please share them in the comments below.
This is the first solution that seems working and well described. cheers for such a awesome post. 🙂
I am in the process of removing my previous cache plugin from all my sites, which I have to uninstall manually, and installing w3 Total Cache. The options of W3 Total Cache can be overwhelming, so thanks for simplifying it, Ian. Your post sets a good starting point.