CoolfundasWordpressHow to Minify JavaScript and CSS in WordPress

How to Minify JavaScript and CSS in WordPress

Speed and Bandwidth – that’s what it is all about, the need to optimize and make everything faster. So today, we are looking at ways to minify JavaScript and CSS in WordPress – a recommended approach to reduce file size and improve your website’s speed. If you test your website speed through Google’s PageSpeed Insights tool, you will find Minify JavaScript and CSS as one of the recommended implementations for a faster website.

What are JavaScript and CSS?

JavaScript, one of the world’s most commonly used programming languages, is used by developers to build interactive websites and is one of the key drivers of the WordPress platform, along with PHP and CSS. JavaScript is the key to making web pages dynamic. You see it in action when you see image carousels that allow you to scroll through a series of pictures, or when you use the zoom function to close in a product image, or while playing embedded audio or video on a website. You could say that JavaScript helps to make a web page feel alive, compared to the static web pages of the yesteryears.

CSS or Cascading Style Sheets is a language that helps you to make a web page visually appealing – it controls the fonts, color, layouts, borders, and so on. In short, it is a language that allows you to design the look and feel of your web pages.

What is Minify or Minification?

When developers write code, they follow certain practices that help make it readable and maintainable. Developers typically follow these while writing code:

  1. Use space, tab, or line breaks to structure the code and make it easier to read and follow.
  2. Add comments every few lines to explain what the following lines of code or function do to make it easier for them or any other developer to understand it easily.
  3. Use meaningful variable names to make it easier to reference throughout the code.
- Advertisement -

Now, while all this is great from a developer’s point of view, they are not necessary for the computer or server to process. This is where Minification comes in.

When you Minify JS or CSS code, you essentially remove all the space between the code, eliminate comments, and replace the meaningful variable names with shorter names – all this is done with the intent that there is less code to parse through and ultimately make the code processing faster. This code optimization will help you speed up a WordPress website.

Below is a sample JS program from a programming website to use as an example, and it has been minified using this minify tool from Digital Ocean.

Before the Minification of the JavaScript code

Minify Javascript and CSS in WordPress
Before Minification

After the Minification of the JavaScript code

Minify JavaScript 3
After Minification
- Advertisement -

As you can see, the minified JavaScript code is much smaller. In terms of size, this particular piece of code reduced in size from 434 bytes to 259 bytes, a saving of 40% in size. In real-world scenarios, the JavaScript or CSS code could decrease by 40-60% in size, making it compact, lighter, and faster to process by the server.

Remember, Minification does not change the function of the JavaScript or CSS file. Minifying a JS or CSS file can occasionally cause issues and break things. Check the front end of your website after you minify the files, and make sure nothing is broken. In something is broken, reverse or turn off the minification. It is also advisable to have a backup before you start to minify.

Related Article: How to Speed Up a WordPress Website

How to Minify JavaScript and CSS in WordPress?

There are a couple of ways you can minify JavaScript and CSS in WordPress. We will run through each of these options:

  1. Minify the code manually
  2. Use a WordPress plugin to do it for you
  3. Rely on a CDN to achieve minification

Minify the JS and CSS code manually

If you are looking at how to minify Javascript and CSS in WordPress without a plugin, you can take the manual approach. There are plenty of web tools like Minifier, Code Beautify, Toptal, and CSS Minifier, where you can manually input the JavaScript and CSS code and get the minified code at the click of a button. Then, copy the minified code, and paste it back into the file.

Minify JavaScript 4
Minify JavaScript and CSS Manually

This manual process takes time, and I would not recommend this. This is acceptable when working with a few files, but it is not something you can do regularly with many files where the code can change frequently. The right approach would be to use a tool that can do this for you automatically.

Use a WordPress Plugin to minify JavaScript and CSS

The simplest way to minify JavaScript and CSS in WordPress is to use a plugin that will do the job for you at the click of a button. Free plugins like Autoptimize or Fast Velocity Minify are available in the WordPress plugin repository with this feature. Alternatively, you can use a caching plugin like WP-Rocket or WP Optimize that delivers several speed optimization features, including the ability to minify JavaScript and CSS.

If you use the Autoptimize plugin to minify, you have to select the option to optimize JavaScript code and CSS Code to minify the files.

Minify JavaScript 5 Autoptimize Plugin
Autoptimize WordPress Plugin

If you choose to install and activate the Fast Velocity Minify WordPress plugin, then select the checkbox for the Enable JS and CSS Processing option to get minification working.

Minify JavaScript 6 Fast Velocity Minify
Fast Velocity Minify WordPress Plugin

WP-Rocket is a premium option, but given all the other speed optimization options available, including caching, image optimization, Database optimization, and lazy loading, it is worth a serious look.

Minify JavaScript 7 WP Rocket
WP Rocket WordPress Speed Optimization Plugin

If you choose WP-Rocket, go to the File Optimization section, and turn on Minify CSS files and Minify JavaScript files. You will get a warning before you activate the Minify option.

Minify JavaScript and CSS using the CDN

Most CDNs or Content Delivery Networks will offer the option to minify JavaScript and CSS of a website. The CDN will load the JavaScript and CSS files from your origin server and store the minified files on the caching server, from where they are delivered directly to the end user’s browser.

The advantage of this method is that it does not touch any of the files on your WordPress server and keeps them safe from any potential minification issues.

Cloudflare, one of the more popular CDNs in the market, offers a free plan, including the Auto Minify function for JS and CSS.

Minify JavaScript 8 Cloudflare Auto Minify
Cloudflare CDN Auto Minify option

Once you have Cloudflare set up for your website, go to Speed > Optimization > Auto Minify and select the checkbox against JavaScript, CSS, and HTML to start minifying the files.

Wrapping Up

You may wonder if this is necessary because it just seems to save a couple of hundred bytes. However, the ability to minify files should be seen in the overall context of optimizing the speed of your website, be it on WordPress or any other platform.

By itself, minifying files may deliver some speed improvements, but if you implement all the recommended speed optimization for a WordPress website, it all adds up and can deliver a fast website with quick load times for your users. A page with good load times will also help improve your Core Web Vitals, an important factor in SEO and page ranking driving more visitors to your website.

If you have used another WordPress plugin or an alternative approach, do let us know in the comments section.

- Advertisement -
Shashi Venkatesh
Shashi Venkatesh
Shashi Venkatesh is a 22-year veteran of the technology industry, with experience developing and managing large-scale web applications for clients, working globally across America, Europe, and Asia. He is also a Wordpress aficionado and has consulted extensively in the development of Wordpress websites, blogs and ecommerce platforms. He enjoys reading and gaming and is an avid motorsport fan.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Posts