Minify CSS and JavaScript in WordPress

One of the ways to increase the website speed is minifying the assets like CSS and JavaScript. And if you observe this for sure it has a good result. So let’s get started to minify CSS and JavaScript on your website.

You can do this in some method like using the plugin or doing this by yourself or your website developers. In this post, we’re going to use the plugin called Autoptimize. This plugin has over 1 million active installations on the WordPress repository.

What do compression plugins do?

Thecompression plugins remove the space between the CSS and JavaScript codes like this example.

span{
    background: red;
    font-size: 14px;
}
h2{
    font-size: 19px;
    color: #333;
}

After installing this plugin and when you minified the CSS and JavaScript codes your codes are like this.

span{background:red;font-size:14px}h2{font-size:19px;color:#333}

And for example, if the CSS file was 13kb it becomes 5kb and it’s good for your website to test for example when using the Gtmetrix or the Google PageSpeed.

So now you know about compression. So let’s install theAutoptimize plugin.

Minify the CSS and JavaScript codes

The first thing you need to do is install the plugin. You can download it from the official WordPress repository or you can install it from your WordPress dashboard.

After installing the plugin you have a submenu in Settings. Find it and click on it.

Autoptimize Settings
Autoptimize Settings

Forcompression of the CSS and JavaScript codes, you should check the Optimize JavaScript Code and Optimize CSS Code. You can also check the Optimize HTML Code it helps to increase your loading time too.