W3 Total Cache (W3TC) is one of the top rated free WordPress caching and minify plugin. It has lots of features to improve the performances. Such as page cache, minify, browser, database and object cache. In addition to that, it can integrate Content Delivery Network (CDN) domains to your site for enhance parallel downloads. Therefore, you have to carefully configure it. Otherwise, your theme can be broken (especially CSS and JS) and can expect unnecessary issues. In this post, I’m going to cover W3TC manual minify tutorial. If you’re a beginner or an advanced user, you can follow this easy step by step tutorial.
Manually minify WordPress HTML, JS and CSS with W3 Total Cache.
- I guess you are already installed and activated the W3TC on your site. If not, go to “Plugins>Add New” and search “W3 Total Cache”. Then, enable the plugin by click on “Activate” link.
- Go to “General settings page” by clicking on the Performance menu in WordPress admin panel.
- Under the “General” enable “Preview mode” by click on “Enable” button. Once you have enabled preview mode, your settings will not apply to the actual site until you hit the “Deploy” button.
- Under the “Minify” option check its enabled box to activate the w3 total cache service.
- Then, under the “Minify mode”, choose “Disk” or whatever available options that you have. Default settings is enough.
- Next in each HTML, JS, CSS minifier, it’s better use default settings. If you’re on a VPS or Dedicated server, you can install different options which are listed in W3TC. If you are on a shared hosting service you can use default PHP minify method.
- Now save the modifications by click on “Save All Settings” button.
- Next we have to apply script files, URL’s based configurations using next steps.
Configure scripts files, URL’s.
Once you configure the settings and enable the service in General tab, you have to configure HTML, CSS and JS configuration. This is an important step.
- Go to W3 Total Cache Minify settings page. Activate minification by click on “Enable” check box in each HTML, JS and CSS settings tabs.
- Under the HTML and XML check “Inline JS, CSS minification” options.
- This plugin can automatically detect scripts. Though it’s not automatically added those URLs. Therefore, you have to manually add each of them. At the top of this page, you can see “Help” button. Click on that button to add available JS and CSS files for modifications and combine. If you don’t add any URL, it will not minify your site’s JS and CSS (only in manual mode).
- After clicking on that button you can see “Minify: Help Wizard”. Check each JS and CSS file that you want. In this step don’t select script URL’s which are contained “.min.css”, “.min.js” name at the end. Because they are already optimized.
- Once added all the files, URL’s click “Apply & Close” button.
- Follow the above URL query removal process for CSS files.
- Then click on “Save All Settings” button.
- Now you have enabled W3 Total cache plugin manual minify.
- Now your site should work as expected. If there’s any issue remove added each JS and CSS one by one and identify the issue.
- Then click on the “Deploy” button, next it will mentioned to wipe cache.
Now your sites’ Google page Speed insight and YSlow rank increase and you can experience speed page loading time.