Skip to content

In WordPress, how do I minify CSS and JavaScript files?

Minify, CSS, Javascript

What is Minify, and When Should You Use It?

The term ‘minify’ refers to a technique for reducing the amount of your website’s files. It accomplishes this by deleting extraneous characters, lines, and white spaces from the source code.

It is usually recommended to utilise it exclusively for files supplied to users’ browsers. HTML, CSS, and JavaScript files are all included. You can also minify PHP scripts, but as PHP is a server-side programming language, doing so won’t help your visitors load pages faster.

The obvious benefit of minifying files is that it speeds up and improves the performance of WordPress. Compact files load faster and increase the speed of your site.

However, other experts argue that the performance gain for most websites is insignificant and not worth the effort. On most WordPress sites, minification only saves a few kilobytes of storage. By simply optimising photos for the web, you can cut pageload time even further.

Here’s an example of standard CSS:

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}

If you’re attempting to get a perfect score on Google Pagespeed or the GTMetrix tool, minifying CSS and JavaScript will help you get there.

After that, let’s look at how to quickly minify CSS and JavaScript on your WordPress site.

Minify CSS/Javascript in WordPress

The Better WordPress Minify plugin should be installed and activated first.

When you activate the plugin, it will add a new menu item to your WordPress admin bar called ‘BWP Minify.’ It will send you to the plugin’s settings page if you click on it.

To automatically minify JavaScript and CSS files on your WordPress site, click the first two choices on the settings page.

You can now save your changes by clicking the Save Changes button.

On this page, you’ll find a plethora of sophisticated settings. Most websites will operate with the default settings, but you can check and adjust these choices on a case-by-case basis.

The next step is to visit your website. Select ‘View Page Source’ from the browser menu by right-clicking anywhere.You will now see the HTML source code generated by your WordPress site. If you look closely, you will notice that this plugin will load CSS/JavaScript files from plugin’s own folder instead of your WordPress themes and plugins.

These are the minified versions of your original CSS and JavaScript files. Better WordPress Minify plugin will keep them cached and serve the minified versions to browsers.

That’s all, we hope this article helped you learn how to minify your WordPress site.