Minify JavaScript and CSS in WordPress to Increase PageSpeed

Do you want to increase your webpage load speed? Here is a guide which will help you to minify JavaScript, CSS and HTML files of your website easily and increase page load speed. Using these methods on TechNumero, I got Google Page Speed Insights Rank from 68 to 93 and YSlow Page Rank from 70 to 92.

Updated on

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.

Minify JavaScript and CSS in WordPress
Minify JavaScript and CSS in WordPress

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

Minify Javascript and CSS in WordPress to Increase Speed
Google PageSpeed Insights Result – TechNumero.com

GTmetrix

GTmetrix and YSlow Result - TechNumero.com
GTmetrix and YSlow Result – TechNumero.com

Pingdom

Pingdom Result - TechNumero.com
Pingdom Result – TechNumero.com

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.
Minify Setting in W3 Total Cache Plugin
Minify Setting in W3 Total Cache Plugin

#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.
Minify Setup in Autoptimize Plugin
Minify Setup in Autoptimize Plugin

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?

WP Fastest Cache - WordPress plugin
WP Fastest Cache – WordPress plugin

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.

WP Fastest Cache WordPress Plugin
WP Fastest Cache WordPress Plugin

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 WordPress Plugin
Fast Velocity Minify WordPress Plugin

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.

Minify CSS, JavaScript and HTML - Without Plugin
Minify CSS, JavaScript and HTML – Without Plugin

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

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

Photo of author
Saurabh K
Saurabh K is a technology enthusiast and part-time blogger. He loves to explore the efficient use of technology and gadgets. He is an outlier and lensman. Add him in your social circle to know more.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

Hand-picked Related Articles

69 thoughts on “Minify JavaScript and CSS in WordPress to Increase PageSpeed”

  1. Avatar of Zaahirah

    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.

    Reply
    • Avatar of Saurabh K

      Hey Zaahirah,
      Glad that I could help. Appreciate your fantastic feedback, Thanks.

      Reply
  2. Avatar of Yogendra

    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.

    Reply
    • Avatar of Saurabh K

      Hello Yogendra,
      Thanks for your feedback.
      You can try W3 Total Cache Plugin it also includes ‘Minify’ feature.

      Reply
  3. Avatar of Sanjeev Yadav

    Thanks Saurabh for great article
    Autoptimize Plugin is done great work for me.

    Reply
    • Avatar of Saurabh K

      Hey Sanjeev,
      Glad that I could help.
      Thanks for you awesome feedback.

      Reply
  4. Avatar of rajesh

    Thanks Saurabh for great article

    Reply
    • Avatar of Saurabh K

      Hey Rajesh,
      Glad that you find this post useful.
      thanks for your feedback.

      Reply
  5. Avatar of IT Support Austin

    I’ve never heard from Autoptimize – I installed it and have learned it is awesome! Thanks for the great recommendation.

    Reply
    • Hey,
      Glad that you find it useful.
      Thanks for awesome feedback.

      Reply
  6. Avatar of Jagad Shalawat

    Thank you for that SIr 🙂

    Reply
    • Hey Jagat,
      Glad that you find it useful.
      Thanks for your feedback.

      Reply
  7. Avatar of Bhavinder Rao

    Very informative and the manual minify of css and html are good.

    Reply
    • Avatar of Saurabh K

      Hey Bhavinder,
      Glad that it was useful for you.
      Thanks for your response.

      Reply
  8. Avatar of Pritam Thakur

    This is the second time you are helping me today!

    Reply
  9. Avatar of Vishnu

    Hey sourabh,

    Nice tips! Thanks you!

    Reply
    • Hey,
      Glad that I could help.
      Thanks for stopping by.

      Reply
  10. Avatar of karan

    Thanks Saurabh, you really digged out every step for minifying scripts and made it easy to understand easily.

    Reply
    • Hey Karan,
      Glad you find it useful.
      Thanks for stopping by.

      Reply
  11. Avatar of Max Ong

    Thx for the sharing, i’m in need to increase my page speed desperately. Thx again

    Reply
  12. Avatar of Shakir Hassan

    Thanks for writing, Saurabh.
    Learned and implemented on my blog, bloggingjar dot com.
    Thanks again.

    Reply
  13. Avatar of Samuel

    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.

    Reply
  14. Avatar of ROBERT BETHGE

    Thanks for your great article!
    Is there an advantage of using the developers (manual) approach over using plugins?

    Reply
  15. Avatar of Giulia Pizzignacco

    Loved your site! 😀 Thank you very much for all this important information!

    Reply
  16. Avatar of incomehustler

    thanks some great resources. Trying to achieve and keep google page speed score has become a challenge. Thanks

    Reply
  17. Avatar of Kredi başvuru

    Hello any wordpress plugin for minify js and css?

    Reply
  18. Avatar of Shahid

    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.

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

      Reply
  19. Avatar of kumar

    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

    Reply
    • Hi Kumar, Try to use Autoptimize plugin instead of W3TC. It will not break the design of your homepage.

      Reply
  20. Avatar of Jyoti Ray

    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.

    Reply
    • Hey Jyoti,
      Glad that I could help.
      Thanks for stopping by.

      Reply
  21. Avatar of anzlim

    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.

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

      Reply
  22. Avatar of Deepak

    Hello Saurabh It really minify css and js automatically without any other effect.???

    Reply
    • Hey Deepak,
      It certainly does minify, i would suggest you to use Autoptimize plugin.

      Reply
  23. Avatar of Hamza Hassan

    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.

    Reply
  24. Avatar of Jack

    Thank you for sharing this very usefull information. My blog now runs much faster then before. Awesome post.

    Reply
    • Hey Jack, Thank you for your feedback. Glad i could help.

      Reply
  25. Avatar of Jacob

    Thank You!. This Autoptimize plugin is awesome. It really help me. Thanks For Sharing!

    Reply
  26. Hey Jacob, Glad you find it helpful. Thanks for stopping by.

    Reply
  27. Avatar of Nitesh

    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.

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

      Reply
  28. Avatar of Aleksandar

    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.

    Reply
    • Hey Aleksandar,
      If you will deactivate the plugin, your JS & CSS should get return in their original form.
      Thanks for stopping by.

      Reply
  29. Avatar of Priyank

    Very nice informational blog sir . Nice artical about plugins . Wp total chace also i am also use in my blog

    Reply
  30. Avatar of Darren Roberts

    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?

    Reply
  31. 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.

    Reply
  32. Avatar of Girdhari Choyak

    If you need to minify only HTML use this wordpress plugin “Lightweight HTML Minify”

    Reply
  33. Avatar of itroz

    Thanks for awesome article

    Reply
  34. Avatar of dharmendra vishwakarma

    Hello I am New Visitor in Your website and Your article was help to my clients website speed optimization keep posting

    thanx

    Reply
  35. Avatar of Harjit

    hello
    I want to ask you that I have to use all these plugins or anyone.
    Thanks

    Reply
  36. Avatar of Early

    Alhrgit alright alright that’s exactly what I needed!

    Reply
  37. Avatar of Canelo Forum

    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.

    Reply
    • Avatar of Saurabh K

      Glad you find the information useful. Thank you for stopping by.

      Reply
  38. Avatar of Md Rasiduzzaman

    I have a website, I am using wp fastest cache. But I think, the free version doesn’t provide the minify html and css

    Reply
    • Avatar of Saurabh K

      Use Autoptimize WordPress plugin, it is free and allow minification.

      Reply
  39. Avatar of negar

    thank you for sharing this 🙂
    i have a problem with Autoptimize pluging.
    after minify js slider and pistures doesnt work!

    Reply
    • Avatar of Saurabh K

      Just exclude your slider js files from minification.

      Reply
  40. Avatar of faragasht

    hi. thx for this usefull article. what is your idea combine css and java? in travel agencies website with lots of texts and images.
    is it a good things? (for example 50 request with 20 to 50 kb goes to 1 or 2 request with 120 kb )

    Reply
    • Avatar of Saurabh K

      It is always recommended to m=combine and minify JS and CSS files. It reduces the file size and no. of requests as well that can directly impact on your site speed. You should give it a try.

      Reply
  41. Avatar of Alex

    Thanks sir, this information make my website more lite and faster.

    Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.