W3 Total Cache Manual Minify WordPress HTML, JavaScripts, CSS Tutorial

Minify HTML, JavaScripts and CSS are one part of the WordPress performance optimization. In this process, eliminate unnecessary extra spaces, comments in your script files. With a better WordPress minify process, it improves the page loading time by reducing download speed. In addition to that, this process will improve parsing, and execution time.

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.

This free tool can minify your theme automatically as well as manually. Apart from that, it can combine each files for minimize HTTP requests and inline JS and CSS files. Most of the cases, automatic method aren’t working. Therefore, we have to manually specify which JavaScript and CSS files URL’s. It’s more reliable and work in many situations.

W3TC banner

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.

Install plugin

  • Go to “General settings page” by clicking on the Performance menu in WordPress admin panel.W3TC general settings
  • 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.

Settings deploy

  • Under the “Minify” option check its enabled box to activate the w3 total cache service.

Minify mode

  • Then, under the “Minify mode”, choose “Disk” or whatever available options that you have. Default settings is enough.Cache files to disk
  • 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.

Options

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

Enable JS minify

CSS enable

  • 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).Manual_Minify
  • 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.
  • Now scroll down the Minifier javascript section and remove each URL contain query parameters. For an instance in this URL “wp-includes/js/jquery/jquery.js?w3ak“, you have to remove ?w3ak tag. In another word, the user has to specify direct links to each script file.
  • 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.
  • If the site working as expected, we can apply these WordPress HTML, JavaScript, CSS minifications to the live site. To do that navigate to the W3TC General settings tab.
  • Then click on the “Deploy” button, next it will mentioned to wipe cache.

Deploy apply settings

Now your sites’ Google page Speed insight and YSlow rank increase and you can experience speed page loading time.

error: Content is protected !!