How to minify JavaScript and CSS files in WordPress to speed up your site

Speeding up a WordPress site takes time. There is so many points you can improve in order to remove that one little fraction of a second from loading time. But, the speed of your site matters both from visitors’ and search engines’ perspective. And, although you will have to go through different techniques and plugins to make the best out of your site, it will be worth it.

What is Minify and When Do You Need it?

The term ‘Minify’ is used to describe a method which makes your website file size smaller. It achieves this goal by removing white spaces, lines, and unnecessary characters from the source code.  Usually, it is recommended to be used only for files that are sent to user’s browsers. This includes HTML, CSS, and JavaScript files. You can minify PHP files too, but PHP is a server-side programming language and minifying it will not improve page load speed for your users.

The minification only decreases few kilobytes of data on most WordPress sites. You can reduce more page load time by simply optimizing images for the web.

Here is an example of normal CSS code:

body {
margin:30px;
padding:30px;
color:#262626;
background:#f4f4f4;
}
h1 {
font-size:36px;
color#000;
margin-bottom:20px;
}

After minifying the code it will look like this:

body{margin:30px;padding:30px;color:#262626;background:#f4f4f4}h1{font-size:36px;margin-bottom:20px}

Minify CSS and JavaScript files manually

These apps can help you write the code and also minify and crunch it after you export the files.

Manually minify CSS

Manually minify JavaScript

Minify CSS/Javascript in WordPress

First of all, you need to do is install and activate the Better WordPress Minify plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled ‘BWP Minify’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

On the settings page, you need to check the first two options to automatically minify JavaScript and CSS files on your WordPress site.  You can now click on the Save Changes button to store your settings.

If you liked this article, then please follow us on Twitter and Facebook.

Deals & Discount

Coupons

Unbounce Coupon

Save 35% off your first year

Cloudways Coupon

Save 20% off first 1 months

Featured

WordPress Plugins

PatternsWP

WordPress Block Patterns Library