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 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:
- Use space, tab, or line breaks to structure the code and make it easier to read and follow.
- 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.
- Use meaningful variable names to make it easier to reference throughout the code.
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.
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
After the Minification of the JavaScript code
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 Site
How to Minify JavaScript and CSS in WordPress?
You can minify JavaScript and CSS in WordPress in a couple of ways. We will run through each of these options:
- Minify the code manually
- Use a WordPress plugin to do it for you
- 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. Plenty of web tools like Minifier, Code Beautify, Toptal, and CSS Minifier, allow you to 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.
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 with this feature are available in the WordPress plugin repository. 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.
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.
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.
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.
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 and improving conversion rates.
If you have used another WordPress plugin or an alternative approach, do let us know in the comments section.
