In the previous sections, we installed W3 Total Cache Plugin and enabled its two cache modules – Page cache and Browser cache. In this section, we show how go about the W3 Total Cache Minify Settings.
Minifies all JS, CSS and HTML code by removing white spaces, comments, extra line breaks.
Cache the minified and combined JS and CSS files.
Benefits are twofold; Cleanup of files reduces the overall size and the bandwidth usage, while combining of files reduces the number of requests made by the browser to the server.
W3 Total cache Minify Settings is far more tedious than compared to the other two covered so far. So, have patience and go through slowly.
There are two modes in Minify – Auto and Manual.
Minify Auto Mode
In Auto mode, W3 takes care to identify all the files that it can minify and combine. Whether this mode works or not, ultimately depends on the scripts and stylesheets used by the theme and plugins that active in the WordPress Installation. While many scripts and stylesheets work perfectly well on minify, some cause trouble. For example, stylesheets of Customizr theme go for a toss when minified by W3.
To enable Minify Auto Mode, go to
→ → → and enable the Minify. Set Minify Mode to Auto and Minify Cache method to Disk. Leave all other things to the defaults and save settings.
In Auto mode, W3 automatically attempt to determine the optimal file name length for the combined minified files. In OpenShift, W3 fails to enable Auto Mode as filename length test fails. In the case of error, select Advanced and set Disable minify automatic file name length test to disable the test. Try to enable auto mode with various filename length values – 246 or less than 150.
→ → and scroll down to the last section
Once Minify is set to auto mode, view and navigate through the site and verify the appearance and behavior of the pages, menus, and links carefully.
Minify Manual Mode
When minify auto mode adversely impacts the look and feel of the site, then only option is to switch to Minify Manual Mode.
To switch to the manual mode, go back to
→ → → and set Minify Mode to Manual and save the settings.
Next we need to identify the scripts and stylesheets that are used by the page and add them to minify list one by one and leave out the problematic ones. Fortunately, W3 Total cache has a Help Wizard to add files to minify list.
To use the wizard, open Minify settings screen with
→ → and click on Help wizard.
In codetab.org which uses Customizr theme, we are unable to add jQuery related JS files, bootstrap.js and blue.min.css to minify list. Out of these some are already minified so we may not gain much by including them, though their inclusion would have reduced request counts.
Non Blocking JS
When Minify is in Manual Mode, we also need to set Embed Type.
To do that, open Non-blocking using JS.
→ → and scroll down to JS section and set Embed Type to
Next, we need to enable minify for HTML. Open Enable, Inline CSS minification and Inline JS minification checkboxes and save settings.
→ → and scroll down to HTML & XML section. Select
Having enabled the W3 Total Cache, we like to assess the benefits the WordPress gets out of the cache. In the next section, we show how to analyze the speed and performance.