How to Minify CSS & JavaScript Code In Magento?

Page speed is one of the parameters Google search engine and your customers use to evaluate your website on their first visit. If your web page takes too long to load, your customers will likely abandon your website and never return. However, there are a number of options when it comes to increasing website speed. In this article, we will cover one of the simplest ways of increasing page speed through minifying CSS and JavaScript code.

Though this seems to be the simplest and straightforward method of increasing site speed, a lot of Magento websites for some reason fail to leverage this benefit. There are cases where developers either ignore code minification or minify code partially. Now you might be wondering what minified code or partially minified code means. So, here it is:

1. Minified Code - A minified code is a code without whitespace characters, new line characters, comments, and block delimiters.
2. Partially Minified Code – In partially minified code, the theme code is minified, but a lot of inline code or some other sources such as extensions are not minified.

Now let’s go through the tutorial on how to minify your CSS and JavaScript code.

There are two ways to minify JavaScript and CSS – manually and automatically. As an experienced custom Magento development service provider, we recommend you to do it automatically as it speeds up your development process. But in case you choose to do it manually, we have that covered too.

Manual Code Minification:

• Minify CSS – If you do not use any kind of front-end wizard on your project such as SASS, Gulp, LESS, Grunt etc., the best thing you can do is to use some online or offline minifying tool. For instance, cssminifier is one of the popular online minifying tools.

• Minify JavaScript – Just like CSS code minification tools, there are a bunch of tools and IDE extensions for minifying your JavaScript code. Some of the popular online JavaScript code minification tools are javascript-minifier and jscompress.

Automatic Code Minification: The automatic approach highly depends on the nature of your project. It is often impossible to change the entire development environment especially when you’re working with other developers on the same project. As a result, it is difficult to recommend the best possible solution. Hence, we have shared a solution that we use for our Magento projects, assuming you are familiar with SASS, Compass, and Gulp.

SASS: If you have set up SASS for your web project, you simply need to add an additional parameter on sass-watch command:

Compass: If your project has Compass included, it will already have a Compass config file in the project. Search for config.rb file and open it. It will have something similar to this:

In config.rb file, Line 11 will be commented with a '#' sign. You need to uncomment the output_style (by removing #). Now restart Compass and start looking for changes in SCSS files. Now trigger it by entering the following command:

Gulp: There are multiple ways to handle code minification with Gulp. But the following two methods are most preferable:

• CSS minify task - gulp-clean-css
• JavaScript minify task - gulp-uglify
  

In conclusion, minifying your JavaScript and CSS code is a great way to increase your page loading speed and it can be easily done with the help of online tools and plugins. But if you know any other tools or options to minify CSS and JavaScript code, please let us know in the comments below.