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


Want to minify files on your WordPress site?

Minifying your WordPress CSS and JavaScript files can make them load faster and speed up your WordPress site.

In this guide, we’ll show you how to easily minify CSS/JavaScript files in WordPress to improve performance and speed.

Easily minify CSS and JavaScript files in WordPress

What is minification and when do you need it?

The term “minify” is used to describe a method that reduces the size of your website files. It does this by removing unnecessary white spaces, lines, and 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 shrink only files sent to users’ browsers. This includes HTML, CSS, and JavaScript files.

You can also minify PHP files, but minifying it won’t improve page load speed for your users. This is because PHP is a server-side programming language, meaning it runs on servers before anything is sent to the visitor’s web browser.

The benefit of minifying files is improved WordPress speed and performance, as compact files are faster to load.

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

If you’re trying to score 100/100 on the Google Pagespeed or GTMetrix tool, reducing CSS and JavaScript will significantly improve your score.

That said, let’s see how to easily minify CSS/JavaScript on your WordPress site.

We are going to go over 3 different options that you can choose from:

Ready? Let’s start with our best recommended method.

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

This method is easier and is recommended for all users. It works no matter what WordPress hosting you use.

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 lets you easily add caching to WordPress and dramatically improve website speed and page load times.

For more details, see our tutorial on installing and configuring WP Rocket in WordPress.

Upon activation, you must visit the Settings » WP Rocket page and switch to the “File Optimization” tab.

Minify CSS Files in WP Rocket

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

WP Rocket will then show you a warning that this might break things on your site. Go ahead and click the “Enable Minify CSS” button. You can always disable this option if it causes problems with your website.

Enable CSS minification

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

Here, just check the box next to the “Minimize JavaScript files” option.

WP Rocket minifies JavaScript files

Again, you’ll see a warning that this might break things on your site. Go ahead and click the “Enable Minify JavaScript” button.

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

WP Rocket will now start minifying your CSS and JavaScript files. You can clear your cache in the plugin settings to ensure that it starts using 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, you can minify CSS files using SiteGround Optimizer.

SiteGround Optimizer is a performance optimization plugin that runs on its own platform. It works well with their super-fast PHP to improve your site load 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.

SG Optimizer

This will take you to the SG Optimizer settings.

From there, you need to click on the “Go to interface” button under “Other optimizations”.

Optimization of the SiteGround interface

On the next screen, you need to enable the toggle next to the “Minimize CSS files” option.

Minify CSS in SiteGround

Next, you need to switch to the JavaScript tab and enable the toggle next to the “Minimize JavaScript files” option.

That’s all! You can now clear 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 who do not use WP Rocket.

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

Upon activation, you must visit the Settings » Automatic optimization page to configure plugin settings.

From here, you must first check the “Optimize JavaScript Code” option under JavaScript Options.

Automatically optimize JavaScript options

After that, you need to scroll down to CSS options and check the box next to “Optimize CSS code” option.

Automatically optimize CSS code

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

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

We hope this article helped you minify CSS and JavaScript on your WordPress site. You can also check out our tutorial on optimizing basic web vitals in WordPress and follow our ultimate guide to WordPress performance.

If you liked this article, subscribe to our Youtube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Minify CSS/JavaScript Files in WordPress (3 Ways) first appeared on WPBeginner.



Leave a Comment

Your email address will not be published.