How to Minify CSS and Javascript in WordPress

According to Google ranking website loading speed is the most important factor. There are several ways to speed up a WordPress site in which minification also plays a very important role.

In this tutorial, I’m going to share how to minify Javascript and CSS in WordPress to improve website loading speed.

What is Minify and Why It is so Important?

Minifying JavaScript, CSS, and HTML reduce the number of requests and page size of your site. In simple words, it removes unwanted codes from your website.

So, minify CSS and Javascript is very crucial and helpful to make your site blazing fast. Also,Google recommends to Minify JavaScript and CSS files from a site.

Faster loading website performs better in search engines result and also improve the user experience.

How to Minify CSS and Javascript in WordPress Site

Page load speed is very important to get a higher rank in Google search and increase traffic to your blog. To minify CSS and Javascript, first, you need to know what is the current score of your website. There are many speed checker tools available in the market. Here is a list – 17 Best Website Speed Checker Tools in 2019

So let’s come directly to the main topic now…

There are many ways and plugins available to reduce CSS and javascript. Here I will minify CSS and javascript using some popular plugins.

#1. W3 Total Cache

W3 Total Cache is one of the most popular caching plugin available in the market. It takes your website performance to a new level.

The plugin comes with dozens of features including Minify. If you use W3 Total Cache on your site, you can reduce load time by reducing the size and number of CSS and JS files using its minify feature.

Just navigate to the General Settings tab and scroll to the Minify settings then follow the screenshot,

This is basic settings. For advanced settings click on the Minify under the performance tab and follow the screenshot below.

And that’s it! It will start to minify javascript and CSS from your site.

#2. Autoptimize

Autoptimize is the most popular plugin that optimizes HTML, JavaScript and CSS code on your site. It improves your site performance to a great extent.

First, install and activate this plugin. Once activated, click on Settings >> Autoptimize.

This will take you to the settings page of the plugin where you have to check the Optimize HTML Code, Optimize JavaScript Code, Optimize CSS option. Follow the screenshot below,

When you click on the Save button, it will start optimizing CSS, Javascript and HTML on your site.

Apart from this, it offers features like CDN and Lazy load for Images, which improves your website loading speed and reduces server load.

The Autoptimize plugin also allows you to remove query strings, emojis and Google Fonts.

The plugin reduces HTTP requests by optimizing HTML, CSS & JS file and speed up your WordPress. Furthermore, Autoptimize plugin works perfectly with WP Super Cache, HyperCache, Comet Cache or KeyCDN’s Cache Enabler.

#3. WP Fastest Cache

WP Fastest Cache is another most popular plugin with 5star rating. This plugin also has a built-in minify option. Just, you need to check the box. Follow the screenshot below.

The plugin also enables Gzip compression.

#4. Fast Velocity Minify

Fast Velocity Minify plugin specially designed for minifying Javascript and CSS files. Once the plugin is activated, click onSetting >> Fast Velocity Minify. This will take you to the plugin’s Settings page. Here click on the “Setting”tab and follow the screenshot below,

Congratulation! The plugin will start to minify CSS and Javascript in your WordPress site.

#5. WP Super Minify

WP Super Minify plugin combines, minifies, and caches inline JavaScript and CSS files and speed up page loads to a great extent. Just install and activate the plugin then check the option

• Compress Javascript
• Compress CSS

And that’s it!

Final Thought

Here’s the 5 best plugin that helps to minify CSS and javascript in the WordPress site. You can use any plugin on your site.

If you use any of the listed cache plugins on your site, then you will not need to install a minify plugin separately. The cache plugin will handle everything such as from caching to minifying.

Have any thoughts regarding how to minify Javascript and CSS in WordPress to Increase PageSpeed? We’d love to hear what you think about it.

I’ve done, and it’s now your turn! Find this article helpful? Don’t forget to share!