How to Minify CSS / JavaScript Files in WordPress (3 Ways)

Some time ago, we discovered that minifying CSS and JavaScript files can drastically reduce load times. After testing it on a few WordPress sites, we were amazed by the results. Pages that took 5-6 seconds to load suddenly dropped to 2-3 seconds.

The truth is, every extra second of load time costs you visitors and potential customers. When your CSS and JavaScript files are bloated with unnecessary spaces, comments, and formatting, they’re literally slowing down your business.

Minification removes all that extra code without changing how your site works.

That’s why we put together this guide showing you how to minify your WordPress files. We’ll walk you through different approaches so you can choose what works best for your site.

What Is Minification and When Do You Need It?

The term ‘minify’ is used to describe a method that makes your WordPress website file sizes smaller. It does this by removing white spaces, lines, and unnecessary characters from the source code.

Here is an example of normal CSS code:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

After minifying the code it will look like this:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Usually, it is recommended to only minify files that are sent to the user’s browsers. This includes HTML, CSS, and JavaScript files.

You can minify PHP files too, but this will not improve page load speed for your users. That’s because PHP is a server-side programming language, meaning it runs on servers before anything is sent to the visitor’s web browser.

The advantage of minifying files is improved WordPress speed and performance since compact files are faster to load.

However, some experts believe that the performance improvement is very small for most websites and not worth the trouble. Minification only removes a few kilobytes of data on most WordPress sites. You can reduce page load time more by optimizing images for the web.

If you are trying to achieve a 100/100 score on Google PageSpeed Insights or the GTMetrix tool, then minifying CSS and JavaScript will significantly improve your score.

Having said that, let’s take a look at how to easily minify CSS/JavaScript on your WordPress site. We’ll go over 3 different options you can choose from:

Ready? Let’s get started with our top recommended method.

Method 1. Minify CSS/JavaScript in WordPress Using WP Rocket

This method is easier and is recommended for all users. It works regardless of which WordPress hosting you are using.

First, you need to install and activate the WP Rocket plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

WP Rocket is the best WordPress caching plugin on the market. It allows you to easily add caching to WordPress and significantly improve website speed and page load times.

For more details, see our tutorial on how to install and set up WP Rocket in WordPress.

Upon activation, you need to visit the Settings » WP Rocket page and switch to the ‘File Optimization’ tab.

From here, you need to check the Minify CSS files option.

WP Rocket will then show you a warning that this could break things on your site. Go ahead and click on the ‘Activate Minify CSS’ button. You can always deactivate this option if it causes any issues with your website.

Next, you need to scroll down to the JavaScript Files section below.

Here, simply check the box next to the ‘Minify JavaScript files’ option.

Again, you’ll see a warning that this could break things on your site. Go ahead and click on the ‘Activate Minify JavaScript’ button.

After that, don’t forget to click on the ‘Save Changes’ button to store your settings.

WP Rocket will now start minifying your CSS and JavaScript files. You can clear your cache in the plugin settings to make sure that it starts using the minified CSS and JavaScript for the next website visitor.

Method 2. Minify CSS/JavaScript in WordPress Using SiteGround

If you are using SiteGround as your WordPress hosting provider, then you can minify CSS files using SiteGround Optimizer.

SiteGround Optimizer is a performance optimization plugin that works on its own platform. It works well with their Ultrafast PHP to improve your site’s loading times.

Simply install and activate the SiteGround Optimizer plugin on your WordPress site. For more details, see our step-by-step guide on how to install a WordPress plugin.

After that, you need to click on the SG Optimizer menu in your WordPress admin sidebar.

This will take you to SG Optimizer settings.

From here you need to click on the ‘Go To Frontend’ button under ‘Other Optimizations’.

On the next screen, you will be able to manage the CSS front end.

You need to switch on the toggle next to the ‘Minify CSS files’ option.

Next, you need to switch to the JavaScript tab and turn on the toggle next to ‘Minify JavaScript Files’ option.

That’s all! You can now empty your WordPress cache and visit your website to load minified versions of CSS and JS files.

Method 3. Minify CSS/JavaScript using Autoptimize

This method is recommended for users who are not on SiteGround and not using WP Rocket.

First, you need to install and activate the Autoptimize plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

From here, you first need to check the option ‘Optimize JavaScript Code’ under JavaScript Options.

After that, you need to scroll down to the CSS Options.

Once there, you should check the box next to the ‘Optimize CSS code’ option.

Don’t forget to click the ‘Save Changes’ button to store your settings.

Then you can click the Empty Cache button to start using your minified files. The plugin can also be used to fix render-blocking JavaScript and CSS in WordPress.

Frequently Asked Questions About Minification

Here are answers to some of the most common questions people also ask about minifying files in WordPress. These can help you better understand the process and its benefits for your site.

1. What exactly is minification?

Minification is a process that makes your website’s code files smaller by removing all unnecessary characters without changing how the code works. This includes getting rid of white spaces, comments, and line breaks from HTML, CSS, and JavaScript files. Since the resulting files are smaller and more compact, they are faster for a visitor’s browser to download and process, which can help improve your website’s overall speed.

2. Will minifying CSS and JavaScript files break my website?

While it’s not common with modern plugins, minification can sometimes cause visual or functional issues on your site. This is why performance plugins often show a warning before you enable the feature. It’s always a good idea to create a backup first and then test your website carefully in an incognito browser window after turning on minification. If you notice any problems, you can simply deactivate the setting or use the plugin’s features to exclude specific files that might be causing the conflict.

3. Does minification really make a big difference?

The impact of minification can vary depending on your site. For many websites, it only removes a few kilobytes of data, and you may see a more significant speed improvement by optimizing your images. However, if your primary goal is to achieve a perfect 100/100 score on speed testing tools like Google PageSpeed Insights or GTMetrix, then minifying your CSS and JavaScript files is an important step that will significantly improve your score.

4. Do I need a plugin to minify files in WordPress?

For almost all WordPress users, the easiest and most recommended way to minify files is by using a caching or performance plugin like WP Rocket or Autoptimize. These tools allow you to enable minification with just a few clicks. Some hosting providers, such as SiteGround, also offer their own optimization plugins with these features built in. Manually minifying files is a complex and risky process that is not recommended for beginners.

We hope this article helped you minify CSS and JavaScript on your WordPress site. You may also want to see our guide on optimizing Core Web Vitals in WordPress and our expert pick of the best WordPress caching plugins to speed up your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.