Minify JavaScript and CSS in WordPress to Increase Page Load Speed

In this post I’ll let you know, how you can minify JavaScript and CSS of your WordPress website to increase page load speed. I’ll also discuss, What is Minifying? Why it is so important? How you can minify your own 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 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.

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

Why Minifying is so Important?

Simplest reason is – because minification reduces size of your web page and which result to increase in Page load speed. 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 CSS, JavaScript and HTML content to its optimum size and reduce number of request counts. Minification combines your website’s different CSS files in to one file, minification process does same for JavaScripts and HTML files, combines different files into one respective file.

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. Your PageSpeed Scores will be in form of given below pictures.

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 of your Website

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

Method #1

Here I’ll suggest few WordPress Plugins to minify your CSS, JavaScript and HTML files and combine different files into one file respectively. Why I am suggesting a plugin? Thought I always recommend to use a plugin only when it is highly required. Oh, Yaa, this is a case where use of plugin is highly required. 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. It might not be coincidence if you are using W3 Total Cache plugin, many of the WordPress users use this plugin to increase web page speed. You might be aware that this plugin offers a feature to minify your 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.

2. One of my favorite plugins is 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.

Method #2

You can manually minify your CSS and JavaScript files by using following online tools and Java Scripts. 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

JavaScripts to minify your CSS and JavaScripts of your website

• YUI Compressor
• js
• JSMin – The JavaScript Minifier

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 see significant improvement in terms of page load speed, page size and number of requests etc.

These two methods will definitely increase your web page loading speed. I would recommend you to give a try to these plugins and check your web page loading speed on Google PageSpeed Insights, GTmatrix or Pingdom, you will certainly find improvements. Share your favorite 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.