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?
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.
Online tools to Minify JavaScript – These online tools can be used to Minify your JavaScripts.
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
Thank you for this! I was wondering whether it would be a waste to use an extra plugin for minifying. Glad to see that it’s okay.
Hey Zaahirah,
Glad that I could help. Appreciate your fantastic feedback, Thanks.
I tried autoptimize but when i activate the CSS Optimization, social sharing plugin didn’t perform well and also there are various css which breaks the layout. Is there any other small wp minify plugin, who can work for my theme.
Hello Yogendra,
Thanks for your feedback.
You can try W3 Total Cache Plugin it also includes ‘Minify’ feature.
Thanks Saurabh for great article
Autoptimize Plugin is done great work for me.
Hey Sanjeev,
Glad that I could help.
Thanks for you awesome feedback.
Thanks Saurabh for great article
Hey Rajesh,
Glad that you find this post useful.
thanks for your feedback.
I’ve never heard from Autoptimize – I installed it and have learned it is awesome! Thanks for the great recommendation.
Hey,
Glad that you find it useful.
Thanks for awesome feedback.
Thank you for that SIr 🙂
Hey Jagat,
Glad that you find it useful.
Thanks for your feedback.
Very informative and the manual minify of css and html are good.
Hey Bhavinder,
Glad that it was useful for you.
Thanks for your response.
This is the second time you are helping me today!
Glad that you find it useful.
Hey sourabh,
Nice tips! Thanks you!
Hey,
Glad that I could help.
Thanks for stopping by.
Thanks Saurabh, you really digged out every step for minifying scripts and made it easy to understand easily.
Hey Karan,
Glad you find it useful.
Thanks for stopping by.
Thx for the sharing, i’m in need to increase my page speed desperately. Thx again
Hey Max,
Glad that I could help.
Thanks for writing, Saurabh.
Learned and implemented on my blog, bloggingjar dot com.
Thanks again.
Hi, great article
But I have a question
Will it be great to use w3 total cache with Autoptimize plugin since I use w3 total cache.
Thanks for your great article!
Is there an advantage of using the developers (manual) approach over using plugins?
Loved your site! 😀 Thank you very much for all this important information!
Glad you find it useful.
thanks some great resources. Trying to achieve and keep google page speed score has become a challenge. Thanks
Glad you find it useful.
Hello any wordpress plugin for minify js and css?
Nice article mate! I was wondering if I can use W3 Total Cache along with Cloudflare. I’ve had some issues earlier when I used both of them on one of my sites.
Can you help me with this? TIA.
Hey Shahid,
Glad, you find it useful. You can use W3TC with cloudflare, i am using the same on my client’s website without any problem.
However, you can give Autoptimize a try anyway.
i have applied this with my blog but it change the design of homepage as it show before how can we minify without loosing any user interface
Hi Kumar, Try to use Autoptimize plugin instead of W3TC. It will not break the design of your homepage.
Yes. This Autoptimize plugin is awesome. It helps toMinify HTML, CSS and JavaScript easily. I am also using this and significantly increased my site speed. Thank you, Jyoti.
Hey Jyoti,
Glad that I could help.
Thanks for stopping by.
Can you please help speeding mobile pages in wordpress.com & not wordpress.org. question-does amp works when i open it through a link eg-from whatsapp.
Technically No. If you open any link of your post through WhatsApp, AMP would not open automatically. AMP (Accelerated Mobile Pages) works through google search results, however if you use /amp/ tag at the end of your post url i.e. http://www.abc.org/my-blog-post/amp/ your amp will open irrespective of any interface you are using i.e Google Search or WhatsApp.
Hope i could help.
Hello Saurabh It really minify css and js automatically without any other effect.???
Hey Deepak,
It certainly does minify, i would suggest you to use Autoptimize plugin.
Nyc Article.
Thank you for this! I was wondering whether it would be a waste to use an extra plugin for minifying. Glad to see that it’s okay.
Hey Hamza, Thanks for the feedback.
Thank you for sharing this very usefull information. My blog now runs much faster then before. Awesome post.
Hey Jack, Thank you for your feedback. Glad i could help.
Thank You!. This Autoptimize plugin is awesome. It really help me. Thanks For Sharing!
Hey Jacob, Glad you find it helpful. Thanks for stopping by.
Only 1 confusion, do I have to install all the three or any one of the three, and what if I’ll install all the three. Is there any problem with that, please help, this is the only post I was able to find which works.
Hi Nitesh,
You only need to use one plugin and I would recommend you to use Autoptimize. However, If you still want to use the W3T plugin, you can use that too for browser caching and Autoptimize to minify JS and CSS. Both plugins work with each other flawlessly.
Hello sir. If I deactivate the plugin, will my JS and CSS code stay minified or they’ll return to their original form? Thanks for the excellent article.
Hey Aleksandar,
If you will deactivate the plugin, your JS & CSS should get return in their original form.
Thanks for stopping by.
Very nice informational blog sir . Nice artical about plugins . Wp total chace also i am also use in my blog
Great article. I have tried Autoptimize and it has improved my scores nicely. My only concern is am using SiteGround’s built in Cache plug-in as well. Will this conflict with Autoptimze cache?
Hey Darren,
I’m glad that you find it useful. I did not notice any conflict using both the plugins together so don’t worry about that. If you notice something weird, do share with us. We love to hear from our visitors.
Thanks for dropping by.
If you need to minify only HTML use this wordpress plugin “Lightweight HTML Minify”
Thanks for awesome article