Best Ways to Minify HTML, CSS and JavaScript in WordPress

In today’s lighting fast Internet connectivity era where most of the countries are already using 4th-generation high-speed Internet connection and some countries are under 5th-generation upgradation, the website speed really matters are lots. On mobile devices Google has already started the initiative to adopt and prefer AMP (Accelerated Mobile Pages) where on the desktop websites there is no as such changes to the date.

When it comes to blogging, vlogging and articles based websites the speed of the website really matters are lots. In a study it was found that 90% users will close your website if it doesn’t load within 12 seconds, now the million dollar question, “Is it really possible to load your website within 12 seconds? ” and “how you can optimize the speed and the content of your website?”

In this article, we will learn to optimize the speed of a WordPress powered website while Minifying the CSS (Cascading Style Sheets), JavaScript (JS) and HTML and that’s without breaking-up the website.

Highlights of this article 

• Best Plugins to Minify JS, CSS and HTML
• Resolving common errors that may occur after Minifying 
• Testing speed and Troubleshooting 

There are many reasons to Minify which include combining multiple JavaScript and CSS files into minimum possible CSS and JS files, making smooth loading of the website and sending the minimum HTTP request to the main server which could be utilized with other contents of the site such as images and other contents.

Google Speed Insight and other Speed and Website Optimization Test tools recommend to use minified JS, CSS and HTML files. The reason is clear, websites with minimum external files will load faster, which also uses less resources while in the transit and in the client’s browser. This also saves the bandwidth and the data utilization for the both the user and the website owner.

Now, what are the best possible ways to optimize and Minify the WordPress?

In WordPress, Plugins are used to extend the functionality and add new features, styles and a variety of things on the website, but the more plugins you’ll use the more server resources will be used which will only slow down your website, but there are some plugins specially designed and developed for the WordPress powered website to increase the performance while decreasing the resource usability.

In WordPress, most of the server’s resources are used with MySQL which is the default database system and PHP which is the core programming language used to code and develop the WordPress where by minifying and caching the files and database we can save the server’s resource. To do so, there are several known Minifying and Cache Plugins available for free that you can download from the Plugins management option.

Here are the plugins that you can use to Optimize and Minify the CSS, JS and HTML:

1. Better WordPress Minify

Better WordPress Minify or BWP Minify is developed to optimize, combine and minify the CSS and JavaScript. The BWP Minify offers advanced and detailed functionality to control the minification and multiple file combination.

This plugin is ideal for those who want to minify the CSS and JavaScript i.e. — .JS  and .CSS files while this plugin doesn’t offer HTML minification. You can ignore, combine and move CSS and JS files from header-section to the footer-section while it also supports CDN (Content Network Delivery).

Pros of Better WordPress Minify: 

1. Easy to install and configure
2. Supported by almost all the WordPress themes
3. Easy to implement and configure CDN
4. Files can be ignored from minification
5. Files can be moved from header to footer and vice-versa

Cons of Better WordPress Minify:

1. HTML minification is not available
2. May break some websites (which can be fixed by ignoring the files in the minification)
3. Some users may find advance feature a bit complex

2. W3 Total Cache

W3 Total Cache Plugin is one of the known plugin with more than 1 million active installs which indicates that most of WordPress website are using this plugin.

The best thing about W3 Total Cache plugin is you can minify HTML, CSS, JavaScript while you can create the cache of your WordPress website and the database. This plugin is designed and developed to use the CDN as well and supports almost all CDN providers.

Now, about the support! Well, this plugin supports almost all types of available themes for the WordPress, but again, it may break-some sites which you can fix by enabling the debugging options.

To enable HTML, CSS and JavaScript minification:

• Download and activate the W3 Total Cache Plugin
• Go to the “Performance” option located in left-side bar of the admin dashboard
• Under “Performance” option click on the “Minify” option
• Under the section “HTML & XML” enable the Minification options that you wish to enable
• Click on the “Save all Settings” button to save the current settings.

Pros of W3 Total Cache Plugin :

1. Supports HTML, CSS and JavaScript minification
2. Offers Database and website cache
3. One of the best plugin to optimize the performance of the WordPress website
4. Supports CDN
5. Easy to install

Cons of W3 Total Cache Plugin:

1. You may find it a bit complex when it comes to configuration
2. May break-some websites

3. Cloudflare (CDN-based)

Those who are using Cloudflare can also optimize the website and enable the CSS and JavaScript for free of cost. And if you are a premium member you could also enable the HTML minification.

To enable minification using Cloudflare plugin+CDN:

1. Create an account on cloudflare.com
2. Change the Name Servers of your domain to the name servers of Cloudflare
3. Install the official Cloudflare plugin on your WordPress website
4. Connect the Cloudflare account with your WordPress Cloudflare plugin
5. Enable the “Apply Default Settings” by clicking on “Apply” button

The Cloudflare setting is located in the Settings > Cloudflare of your WordPress website

Tools to Optimize and Test website performance 

You can use following tools to check and optimize your website :

1. Google Pagespeed Insights
2. GTmetrix
3. Pingdom

Troubleshooting 

Follow these steps if in case your broke-up your website after installing any plugin:

• Find out the problem using the Google Chrome or Firefox console
• Filter the common and vital CSS and JS which maybe breaking your site
• Take the help of stackoverflow.com