Minify JavaScript and CSS in WordPress to Increase PageSpeed

In this post I’ll walk you through, how you can Minify JavaScript and CSS in WordPress to increase PageSpeed. I’ll also discuss, What is Minifying? Why Minifying JavaScript and CSS is so important? How you can easily Minify CSS, JavaScript and HTML files of your WordPress website?

A while back, I did a lot of study and research, particularly for WordPress blogs or websites, to improve my blog page load speed. Internet is full with lots of tutorials, tips and tricks to increase webpage speed. And one can easily get confused which method should be used or which should not be used. Trust me, I have tried almost all the methods and finally I come up with an easy solution to improve page speed.

I have that found there are two easy methods to Minify JavaScript and CSS of your WordPress website, which will intensely increase your page speed. I have tried these on my blog and got Google PageSpeed Insights Score from 68 to 93 and YSlow Grade from 70 to 92. But only Minify CSS, JavaScript and HTML will not help me to achieve this score. I also Leveraged Browser Caching, Removed Query Strings from Static Resources and Enabled Gzip and DEFLET Compression to get their. These are the tried and tested PageSpeed methods which you must follow.

Before start discussing about Minifying or Minification of your web page, first of all we need to know its importance.

Why Minifying is so Important?

Simplest reason is – because Minification reduces size of your web page, which result to increase in PageSpeed. Google also recommend to Minify JavaScript and CSS files. Page load speed is a very important factor for good SEO of a website or blog. Faster page load speed is helpful to get higher ranking in Google Search which results increase in traffic on your page. As Google has already announced that page speed effect your search engine ranking. Faster page load speed also help you to deliver smooth and effective user experience to your visitors.

What is Minifying or Minification?

As its name implies, Minification is a process to reduce size of your website JavaScript, CSS and HTML content to its optimum size and reduces the number of request counts.

Minifying process particularly removes any unwanted code from your website like;

• Unused spaces that is written in your CSS,
• Unnecessary line-breaks in your HTML or
• Unnecessary code written in your JavaScript.

Therefore, Minification is very crucial and helpful to increase your page load speed.

Your website’s CSS, JavaScript and HTML markup size should be minimum and number of external requests should be as less as possible in order to increase your webpage load speed.

Where to Start Minifying JavaScript and CSS?

First you should mark a Baseline of your Website

First you need to know about the current status of your website. Get the baseline data of your website from Webpage analysis tools. There are many Webpage analysis tools available online for free. I would recommend you to get your PageSpeed Score from Google PageSpeed Insights, GTmetrix and Pingdom.

Following are the PageSpeed Scores of my website after Minifying CSS, JavaScript and HTML source code. Impressive? NO?

Google PageSpeed Insights

GTmetrix

Pingdom

Take a look on your PageSpeed Scores and note down the Page Size, Load time and Number of Requests, I prefer Pingdom for these results. All you need to do is reduce your Page Size and Number of Requests because this is directly related to your Page Load Time.

Low Page Size + Less Number of Requests = Less Page Load Time.

Minify JavaScript and CSS in WordPress

There are lots of methods and plugins available to Minify CSS, JavaScript and HTML. As I told you I have tested most of the methods and I found following plugins most effective to minify JavaScript and CSS in WordPress site.

Minify JavaScript and CSS in WordPress – With Plugin 

Here I’ll suggest few WordPress Plugins to Minify CSS, JavaScript and HTML files. And in addition to that you can combine different source code files into one file respectively i.e. 3 CSS files into 1 CSS file by using some of the plugins which would add the value in PageSpeed.

Why I am suggesting a plugin instead of using a code in functions.php? Well, it is really not that much easy to implement code for Minification. This is the case where use of plugin is highly recommended. It will let you update your theme on regular basis, any theme update will not hamper your file Minification process. So, let’s start…

#1 – W3 Total Cache

It might not be a coincidence if you are using W3 Total Cache plugin, many of the WordPress users use this plugin to increase web PageSpeed. You might be aware that this plugin offers a feature to Minify CSS, JavaScript and HTML files. I would recommend this, because it serve the purpose and you don’t need to use additional plugin for Minification.

• Install W3 Total Cache plugin and Activate it.
• Go the General Settings Tab and Find Minify settings.
• Check Minify Enable setting as show in figure below and leave other options as default.
• Click on Save all Settings button, Clear all cache. And you are done.
• You want to utilise more power from this plugin, read our detailed W3 Total Cache plugin setup guide for maximum performance.

#2 – Autoptimize

Second plugin on this list is one of my favourite plugin; Autoptimize, I would highly recommend you to use this plugin. This plugin works pretty well, it has very simple user interface, setting options for normal and advance users. Use given below optimized settings (See screenshot below) for Autoptimize plugin.

• Install this plugin and activate it.
• Go to plugin’s setting panel
• Check on Optimize HTML Code, Optimize JavaScript Code, Optimize CSS Code, Generate data: URIs for images as show in the figure below.
• Finally click on the Save Changes and Empty Cache button.

This plugin combines multiple CSS, multiple JavaScript files into one respective CSS and JS file and do the minification. This reduces HTTP requests (resources request count) and improves the PageSpeed.

#3 – WP Fastest Cache

Next plugin is WP Fastest Cache. I personally use this plugin and also recommend this to Leverage Browser Caching. You must be thinking, why i have included this into this list.? Any Guesses?

Let me tell you why? Because this plugin also offer to Minify JavaScript, CSS and HTML files along with Browser Caching. Setup your plugin as per the settings displayed in the following Image.

If you are obsessed with Google PageSpeed Insights and wanted to achieve 100 out of 100. I must recommend you to use this plugin. You will score 98 out of 100 easily. But what about rest 2 because of Leverage Browser Caching Warning for Google Analytics. Read my another guide on How to Leverage Browser Caching – Google Analytics and Achieve 100/100 score on Google PageSpeed Insights. 

#4 – Fast Velocity Minify

Fast Velocity Minify is an another good plugin for PageSpeed optimization. Apart from Minification of CSS, JavaScript and HTML files, this plugin also offers some good features like Gzip Compression, Option to defer JavaScript and CSS files, can filter specified scripts and/or css files.

If You only want to Minify CSS and JavaScript files and not interested in caching etc. Here is a list of WP plugins, recommended for Minification Only.

• Better WordPress Minify – It used to be a good plugin and most popular for minifcation. I have stop recommending it because it has not been updated from last two years. However, I have tested it with WordPress 4.7.5 and this was working perfectly fine. With more 90K active installs, you can give this a try.
• WP Super Minify – This plugin is quite popular with more >20K active installed. It is based on the Minify PHP Framework.
• Merge + Minify + Refresh – Another plugin, which gaining popularity. And can Minify JavaScript and CSS in WordPress without fail.

All the above mention plugins are available on WordPress Repository for free.

Minify CSS, JavaScript and HTML – Without Plugin

You can manually Minify CSS and JavaScript files of your website by using following online tools. It is only and highly recommended for developers.

Online tools to Minify CSS – You can use these online tool can Minify your CSS files.

• CSS Minifier
• Minify CSS

Online tools to Minify JavaScript – These online tools can be used to Minify your JavaScripts.

• JavaScript Compressor
• Minify your JavaScript

Scripts to Minify your CSS and JavaScripts of your website

• YUI Compressor
• js
• JSMin – The JavaScript Minifier

Wrapping Up

After Minifying CSS and JavaScript, now test again your website on analysis and ranking tools. And compare fresh results with base line results for your website. You will surely notice a significant improvement in terms of Page Load Speed, Page Size and Number of HTTP Requests etc.

These methods will definitely increase your web page loading speed. I would recommend you to give these plugins a try and check which suites as your requirement. Share your favourite method to Minify CSS, JavaScript and HTML files in comment section below. Do post your queries related to Minification and don’t forget to share this post with your followers.

You might be interested to read following tutorials –
How to Add Subscribe to Comments in WordPress
CSS Changes not Showing Up in WordPress – Cache Busting CSS
How to Lazy Load Images in WordPress to Speed Up Your Website
Cache Gravatar Images in WordPress for WP Optimization