How to Minify JavaScript and CSS in WordPress: Boost Speed & SEO with Plugins or Manual Methods

Speed up your WordPress site by minifying JavaScript and CSS. Learn easy plugin and manual methods to boost site speed, SEO, and user experience.

Updated on

Do you want your WordPress website to load faster and rank higher in Google? Minifying JavaScript and CSS files is one of the easiest ways to speed up your site, improve user experience, and boost SEO.

Website performance plays a huge role in user experience and search engine visibility.

Google considers website speed as a ranking factor, so optimizing your CSS and JavaScript can directly impact your search rankings and conversions.

Besides enabling caching and using a CDN provider, there is a simple optimization method that can help you reduce the size of static files and improve loading speed.

That’s called minification.

Minification works by removing unnecessary spaces, line breaks, and comments from your code, which makes your files smaller and your pages quicker to load.

In this step-by-step guide, you’ll learn:

  • What minification is and why it’s important
  • How to check if your files are already minified
  • The best plugins and manual methods for minifying CSS and JS in WordPress
  • How minification compares to caching and compression

Let’s get started optimizing your WordPress site for speed and better search performance.

TL;DR

How to Minify JavaScript and CSS in WordPress

Minification removes unnecessary spaces and comments, reducing file size and improving website speed and SEO.

First, let’s see what minification is and why you should use it.

What is Minification?

Minification is the process of removing unnecessary spaces, line breaks, comments, and formatting from JavaScript and CSS files. This reduces file size, speeds up loading times, and improves page performance without affecting how the code works.

Why You Should Minify JavaScript and CSS?

By minifying CSS and JavaScript files in WordPress, you can significantly enhance page load speed and overall site performance by reducing file sizes.

This optimization improves your Largest Contentful Paint and other essential Core Web Vitals metrics.

For example, an original, unoptimized CSS code will look like the following code. The total size of this unminified CSS is 545 bytes.

/* Main container styles */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Header styles */
.header {
background-color: #f8f8f8;
color: #333;
font-size: 24px;
text-align: center;
padding: 15px 0;
}

/* Navigation menu */
.nav-menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
}

/* Navigation links */
.nav-menu li a {
text-decoration: none;
color: #007bff;
font-weight: bold;
}

.nav-menu li a:hover {
color: #0056b3;
}

Now, the minified CSS version of the same code is reduced by 35%, totaling just 354 bytes.

.container{width:100%;max-width:1200px;margin:0 auto;padding:20px}.header{background-color:#f8f8f8;color:#333;font-size:24px;text-align:center;padding:15px 0}.nav-menu{list-style-type:none;padding:0;margin:0;display:flex;justify-content:center;gap:20px}.nav-menu li a{text-decoration:none;color:#007bff;font-weight:bold}.nav-menu li a:hover{color:#0056b3}

As you can see, with a minification plugin or any minification tools, you can easily remove all unnecessary elements from the code, which can significantly reduce the JavaScript or CSS file size by as much as 25-90%.

In this case, the CSS file size is decreased by 35%.

Now you have an idea of what minification is and why you should use it.

How to Check If Your JavaScript and CSS Are Minified

  1. Go to Google PageSpeed Insights.
  2. Enter your website URL and click Analyze.
  3. In the results, look for “Minify CSS” or “Minify JavaScript” under Opportunities.
  4. If you see “Passed”, your files are already minified.

Once you have added the minification feature to your WordPress website or WooCommerce store, it is mandatory to test if it is working correctly.

While you may not be able to spot the difference naturally, it is ideal to use third-party tools like Google PageSpeed Insights or GTmetrix.

Below, I will show you how to use these tools to verify whether your minified JavaScript and CSS are actually minified.

Google PageSpeed Insights

Google PageSpeed Insights is an excellent tool used for evaluating a website’s speed and performance.

For this example, I am testing my site on the Google PageSpeed Insights tool to check if the CSS and JS are minified.

Go to Google PageSpeed Insights and enter the address. Once you are done, click Analyze.

Here, I am using PageSpeed Insights to analyze my site, https://technumero.com, for JavaScript and CSS minification. Take a look at the outcomes below:

Google PageSpeed Insights Analyze
Google PageSpeed Insights Analyze

Now you need to go to the audits section, and there you will see the results.

Minified CSS and JS
Minified CSS and JS

As you can see in the screenshot that minification of JS and CSS files is already enabled.

Next, let’s see how to use GTmetrix for testing the minification.

GTmetrix

The first thing you need to do is go to GTmetrix. There, enter the website’s address and click ‘Test Now‘.

I am testing my site on GTmetrix, see the results below:

Gtmetrix Test
Gtmetrix Test

Within a short time, you can see the results. Go to the structure tab.

Structure Tab
Structure Tab

Scroll down to view the results of both CSS and JavaScript modifications.

CSS Minified
CSS Minified
JS Minified
JS Minified

Step-by-Step: How to Minify JS and CSS for WordPress Speed Optimization

How to Minify JavaScript and CSS in WordPress
How to Minify JavaScript and CSS in WordPress

There are two methods you can use to implement JavaScript and CSS minification:

  • Using a dedicated plugin
  • Do it manually, without a plugin

Below, I will outline both methods so you can choose one according to your preferences.

How to Minify CSS and JS in WordPress With a Plugin

If you are looking for a simple method, go for the plugin method. Even Google PageSpeed recommends using a WordPress plugin to minify CSS or JavaScript files.

There are multiple plugins (both caching and performance optimization) that can help you minify the static files. Here, I will recommend a few and also show how to use them for minification.

  • FlyingPress
  • Perfmatters
  • Auptomize
  • WP Fastest Cache
  • W3 Total Cache

1. FlyingPress

I use the FlyingPress plugin on my site, https://technumero.com, to minify JS and CSS files.

Let’s see how to use the FlyingPress caching plugin for minification. Once you have activated the plugin, open the plugin settings.

On the left-hand side, you can see the CSS and JavaScript optimization tabs.

You can open those and see the minification options.

1.1 JavaScript Minification
FlyingPress Minify JS
FlyingPress Minify JS
1.2 CSS Minification
FlyingPress Minify CSS
FlyingPress Minify CSS

To make the website even faster, you can consider enabling the ‘Remove Unused CSS‘ option, in addition to code minification.

Save settings after enabling minification.

2. Perfmatters

Perfmatters is another popular performance optimization plugin I am using for various optimizations on this site, including CSS and JS minification. So if you are a Perfmatters user, you can enable CSS and JS minification via the plugin settings.

2.1 JavaScript Minification

To enable JavaScript minification, open the JavaScript tab. There, you will see the option.

Perfmatters JS Minification
Perfmatters JS Minification

Save the settings after enabling it.

2.3 CSS Minification

The same goes for the CSS files.

Perfmatters CSS Minification
Perfmatters CSS Minification

Save the plugin’s settings once you are done with the options. It is one of the best WordPress plugins to minify CSS and JS.

3. Autoptimize

By default, Autoptimize comes with CSS and JS minification enabled. After activation, you can see the plugin’s settings under WordPress Settings.

There, you can check the JS and CSS minification options.

3.1 JavaScript Minification
Autoptimize JS Minification
Autoptimize JS Minification
3.2 CSS Minification
Autoptimize CSS Minification
Autoptimize CSS Minification

If they aren’t enabled, feel free to enable them and save the settings.

4. WP Fastest Cache

WP Fastest Cache makes it easy to enable minification on CSS and JS files. Once you have activated the plugin, go to the main settings page.

There, you will see the minification options, and that’s it.

4.1 JavaScript & CSS Minification
WP Fastest Cache Minification
WP Fastest Cache Minification

Enable those and save the settings.

5. W3 Total Cache

The last plugin I have for you is W3 Total Cache. After activation, you can see the minification option on the left-hand side.

W3 Total Cache Minify
W3 Total Cache Minify

From there, you can minify the static files.

5.1 JavaScript Minification
W3 Total Cache JS Minify
W3 Total Cache JS Minify
5.2 CSS Minification
W3 Total Cache CSS Minify
W3 Total Cache CSS Minify

Best WordPress Plugin for Minifying CSS & JS

The best plugins for minifying JavaScript and CSS in WordPress are:

  • WP Rocket (best all-in-one performance solution)
  • FlyingPress (fast setup, reliable)
  • Autoptimize (free, easy to use)
  • W3 Total Cache (advanced options)

Choose one based on your site’s needs and hosting environment.

Manual Minification in WordPress Without Plugins

You can optimize your site’s performance by manually minifying CSS and JS files using free online tools if you don’t want to use plugins.

There are so many online minification tools available that can help you optimize your files without using a third-party plugin.

Use a CDN for File Minification

Many Content Delivery Networks (CDNs) like Cloudflare offer automatic minification as part of their performance features. They minify JavaScript, CSS, and HTML files on the fly to reduce loading times globally.

Online JS and CSS compressor Tools

For this tutorial, I will use the CSS Minifier tool. Open the tool, paste your raw CSS code, and click minify.

Minify CSS Code
Minify CSS Code

And if you scroll down, you can see the code you have generated via manual minification.

Minified CSS Output
Minified CSS Output

Similarly, you can utilize any available tools to optimize the CSS and JS files through minification.

Bonus: How to Minify HTML in WordPress

In addition to minifying JavaScript and CSS files, optimizing your HTML source code can improve site speed and overall web performance.

Minifying HTML means removing unnecessary spaces, line breaks, and comments from your code.

This helps reduce page load speed and improves metrics like Largest Contentful Paint. Most site owners prefer using a cache plugin to handle this task.

Tools like LiteSpeed Cache, WP Rocket, and Cache Enabler offer built-in features for HTML and JavaScript minification, as well as other techniques such as GZIP Compression and text compression.

Here, I will show you how you can use the LiteSpeed Cache WordPress plugin to Minify HTML.

Once you have activated the LiteSpeed Cache plugin, open the page optimization tab. There, you will see the option to enable HTML minification.

Enable HTML Minification
Enable HTML Minification

Enable that option and save the changes.

This will automatically compress your HTML files, clean up excess PHP code spacing, and prepare your website for faster delivery.

Combining HTML minification with optimized JavaScript libraries and server-side compression can lead to noticeable improvements in page speed.

What Is the Difference Between Minification and Compression?

Minification and compression are both used to make your website load faster, but they work differently.

  • Minification removes unnecessary characters (like spaces, line breaks, and comments) from your JavaScript, CSS, or HTML files. The result is a smaller file with the same code and functionality, just without extra formatting.
  • Compression (such as GZIP compression) takes your files, minified or not, and packs them into a smaller size for transfer over the internet. When a visitor loads your site, their browser automatically decompresses the files.

In summary, Minification makes your code files smaller by cleaning them up, while compression shrinks your files for faster transfer between your server and your visitors.

For best performance, I always recommend using both minification and compression together.

What Is the Difference Between Minification and Caching?

Minification and caching are both performance optimization techniques, but they serve different purposes.

Minification reduces file size by removing unnecessary characters like white spaces and comments from your JavaScript and CSS code.

Caching, on the other hand, stores a static version of your site so it loads faster for repeat visitors. While minification improves how quickly files are downloaded, caching speeds up how quickly pages are served to users.

Together, they significantly enhance load speed and overall site performance.

Frequently Asked Questions

Next, let’s see some frequently asked questions regarding the topic.

How Can I Minify CSS Files Without a Plugin?

You can use free online tools like CSSNano or Minifier.org to paste your CSS code and generate a minified file. These tools remove white spaces and optimize the structure of your CSS file manually.

What Is the Purpose of an Online Minifier Tool?

An online minifier tool is designed to optimize your code by stripping out unnecessary characters like white spaces and comments. The goal is to make your CSS or JavaScript files smaller and load faster.

Does Minifying Code Really Improve Load Speed?

Yes, minifying your CSS and JavaScript can significantly reduce file size, leading to faster loading times and better performance on tools like PageSpeed Insights. This is especially important for mobile users and SEO rankings.

What Are the Downsides of Using Minify Plugins?

In some cases, minify plugins may break certain features of the website, like design. You can often fix this by excluding specific files from the minification process using plugin settings.

How Is Minified Code Different from Regular Code?

Minified code removes all unnecessary spaces, comments, and formatting. The functionality remains identical to the original version.

Should I Use a Caching Plugin Alongside a Minifying Tool?

Yes, using a caching plugin along with a minifying tool offers the best performance. Plugins like W3 Total Cache or WP Rocket can handle both caching and minification for maximum speed improvements.

How Do You Minify JS/CSS in WordPress Fast?

To quickly minify JavaScript and CSS in WordPress:
– Install an optimization plugin like Autoptimize or WP Rocket.
– Enable “Minify CSS” and “Minify JS” in the settings.
– Save changes and test your site speed.

Which Is the Best WordPress Plugin to Minify CSS and JS?

Plugins like FlyingPress, WP Rocket, Autoptimize, and W3 Total Cache are among the best options. These plugins allow you to minify JavaScript and CSS files with just a few clicks and often come with extra performance features.

How to Minify JavaScript in WordPress for Better Performance?

To minify JavaScript in WordPress, enable JavaScript optimization in your caching or performance plugin. This reduces the size of your JavaScript files and helps improve page speed and web performance.

How to Minify CSS in WordPress Without Breaking Design?

Start by enabling CSS minification in your optimization plugin and test your site for design issues. If anything breaks, exclude the conflicting CSS files in the plugin settings to safely minify the rest.

Conclusion

Minifying JavaScript and CSS files is a powerful yet simple step toward boosting your WordPress site’s performance.

By eliminating unnecessary characters like white spaces and line breaks, you can significantly reduce file size, improve load speed, and enhance overall user experience.

You can use a caching plugin/performance optimization plugin like FlyingPress, WP Rocket, W3 Total Cache, or Perfmatters for the process. Additionally, if you are using a LiteSpeed hosting server, I recommend you use the LiteSpeed Cache plugin for JS and CSS modification. Otherwise, you can use dedicated online minification tools for this task.

If you are using a CDN provider, they can also help you with minifying the static files. It should be a standard practice for every website to optimize the speed and reduce bandwidth usage.

WordPress speed optimization isn’t complete without JavaScript and CSS minification. Combine caching, CDN minification, and code optimization for best results with Google PageSpeed Insights and Core Web Vitals. For more tips on boosting site speed, read our guide on WordPress Caching Plugins.

So, the question is for you.

Which minification method will you be using to improve the site’s performance?

Let us know in the comments.

Photo of author
Saurabh K
Web dev with a knack for content writing, speed optimization, SEO, and WordPress magic. By day: building fast, beautiful sites. By night: chasing coffee and ideas for my next technical write-up.
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.

69 thoughts on “How to Minify JavaScript and CSS in WordPress: Boost Speed & SEO with Plugins or Manual Methods”

  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 *.