Welcome to PotatoCommerce - Magento Extensions Store

Home > Blog > How to Minify Javascript, CSS and HTML in Magento 2

How to Minify Javascript, CSS and HTML in Magento 2

Posted on 21 February 2018

What is minification?

Is ‘minification’ equals to ‘compression’?

Some people mistakenly believe that minification and compression are synonyms, but it is not. Сompression is a process of zipping a code with compression algorithms. Compressed files require a decompression process to unzip and read the file. Usually, GZIP is used to compress web content.
As for minification, web browsers do not need an additional step to understand the minified code.

So, what is minification?

Minification is a process of code optimization in such a way that unnecessary information is removed from the code (code obfuscation), while the functionality of the code does not change. When some code is minified, it's still valid in all respects. Almost any code can be minified: Javascript, CSS, HTML, etc.

An example of Javascript minify

// Function to add two numbers
function addTwoNumbers(x, y) {
  let sum = x + y;
  return sum;
}

// Function to multiply two numbers
function multiplyTwoNumbers(x, y) {
  let product = x * y;
  return product;
}

/* In this example, we're commenting out the addTwoNumbers
function, therefore preventing it from executing. Only the
multiplyTwoNumbers function will run */

// addTwoNumbers(3, 5);
multiplyTwoNumbers(5, 9);

The minified output (saved 74.76%):

function addTwoNumbers(u,r){return u+r}function multiplyTwoNumbers(u,r){return u*r}multiplyTwoNumbers(5,9);

Why Minify Javascript?

Minify means make content smaller

Programmers use comments, white space characters, tabs, block delimiters, new line characters for code styling, which helps them to easily ‘read’ the code, as well as to simplify code maintenance in the future.

There are lots of specifications about "clean" code (for example Google JavaScript Style Guide), which dictate strict rules of writing code.

spaces or tabs?

The problem is that the browser does not need extra spaces, tabs and line breaks to interpret the code. If you remove all code styling and comments, the functionality of the code will not be affected. This fact allows us to minify code and reduce file size.

The main purpose of minify is to reduce the number of characters in the code, and therefore the size of the resulting file. The smaller the file, the faster it will be downloaded and processed by the browser.

Benefits of minification

Files minification is a quick and easy way to achieve the following benefits:

  • The HTML page and its resources (JS and CSS files) are loaded faster
  • Minified code is also parsed and compiled faster, which also contributes to faster performance and page rendering.
  • Minification helps to improve Google PageSpeed score, which often positively affects page positions in the SERP.
  • Business spends less money on costs because minification reduces web traffic.

How does minification work?

The code should be minified at the very last moment, because no programmer will work with minified code. Moreover, the minification should be done automatically, because it’s time-consuming and annoying to optimize the code manually each time.

Minification removes all unnecessary white spaces, tabulations, block delimiters, new line characters and comments.


Some advanced Javascript minify tools can even make an automatic refactoring (change the names of variables, replacing them with shorter ones), thereby reducing the file size. For example:

variable3 = variable1 + variable2

can be replaced by

c = a + b


Some advanced CSS minify tools can optimize CSS code in a smart way:

.test1 {
color: #333;
}
.test2 {
color: #333;
}

The output will be the following:

.test1,.test2{color:#333;}

As you can see, test1 and test2 CSS rules were combined because they have common directives.

How minification is arranged in Magento 2?

Magento 2 ecommerce platform has a built-in feature that allows you to minify JS and CSS files automatically. This tool can minify the basic Javascript files as well as those files that are loaded by require.js.

Interesting fact: Magento 2 can not merge Javascript and CSS files which are loaded by require.js. Learn more →.

Magento 2 Javascript Minify

How to minify Javascript in Magento 2?

There are many solutions that can minify code, for example UglifyJS, Closure Compiler, etc. However, not all of them are compatible with Magento 2, and not all of them work in automatic mode. Moreover, there is no need for them, since the functionality integrated in Magento 2 successfully copes with the task of minification.


To enable Javascript Minify в Magento 2 please do the following:

  1. Put Magento 2 into production mode.
    ./bin/magento deploy:mode:set production
  2. Go to Stores > Configuration > Advanced > Developer
  3. Set Minify Javascript Files option to Yes.
  4. Flush Cache at System > Cache Management page.

You can use the Performance Optimization Tool from PotatoCommerce, which in addition to Minify Javascript, CSS and HTML also has the following features:

  • Defer parsing of Javascript
  • Lazy load images
  • Merge Javascript and CSS into single files
  • Load all images by one HTTP request.

This module significantly improves the download speed of resources on Magento 2 pages, thereby improving overall performance.

How to minify CSS in Magento 2?

To enable CSS minify:

  1. Put Magento 2 into production mode.
    ./bin/magento deploy:mode:set production
  2. Go to Stores > Configuration > Advanced > Developer
  3. Set Minify CSS Files option to Yes.
  4. Flush Cache at System > Cache Management page.

How to minify HTML in Magento 2?

To enable HTML minify:

  1. Put Magento 2 into production mode.
    ./bin/magento deploy:mode:set production
  2. Go to Stores > Configuration > Advanced > Developer > Template Settings
  3. Set Minify HTML option to Yes.
  4. Flush Cache at System > Cache Management page.
Magento 2 HTML Minify

What’s wrong with Magento 2 minify?

Despite the fact that the functionality integrated in Magento 2 can minify Javascript, CSS and HTML successfully, in reality it is very difficult to use it. The thing is, no one guarantees a compatibility with your customized theme, 3rd-party extensions and external resources (Google Analytics, Zendesk Chat, etc.). The probability of conflicts is very high. In our experience conflicts between modules happen on every third Magento store.

On top of that, the native Magento 2 minifier does not have an ability to control the minification process flexibly.

In addition, native HTML minification can cause some problems (for example, it can break checkout page).

Magento 2 Minify extension

Unlike the native Magento 2 minifier, Performance Optimization Tool allows you to control the process - you can exclude any file or even inlined content. Moreover, this extension comes with free technical support, which makes it possible to be calm and not worry about potential conflicts, because professionals from PotatoCommerce will fix any incompatibility issues withing several days within free support period.

Final words

Minification allows you to slightly speed up the performance of Magento 2. However, it’s not enough to make Magento 2 much faster. To make Magento 2 store fast you need to take care of many other aspects, such as image optimization, use of a fast server, CDN, Varnish, Full Page Cache, reducing the number of requests, etc. This requires a comprehensive approach, and this hard work is best entrusted to professionals.