Skip to content
How to Minify Your Shopify Javascript Files
1. Overview
If the speed of page loading time on your site is slow it can turn away your customers on another site and affect the conversion rates. The process that can be used to improve your page loading time is beneficial building into your themes of the store. One such process is minification.
What is minification?
Minification can compress the text by removing extra characters like spaces and comments. In simple words, Minification is a process of removing unnecessary or redundant data without affecting how the resource is processed by the browser.
For example code comments and formatting, removing unused code, using shorter variable and function names, and so on. This method makes the file size smaller. If your all files are small in size it means they can get transfer faster, which leads to your site loads quickly.
Minification technique can reduce 10% – 95% the size of the code.
To minify Javascript you can use UglifyJS. The Closer Compiler is also very effective. These tools are useful and can help you optimize your store and make it performant, without affecting the operation of the code.
You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
2. How many Javascript files used in debut theme (Excluding system generated files)?
In the Asset folder, there is a total of 5 js files.
- gift-card.js
- lazysizes.js
- password.js
- theme.js
- Vendor.js
You Might Be Interested In: Magento 2 Speed Optimization Services
3. The sizes of Javascript files (in kb):-
Before minimizing
The sizes of files before minimizing are dependent on how many files are used in the theme and which files are to be minified.
After minimizing
The size of the file before minimizing is larger let’s say 200 kb then after minimizing the size of the same file becomes 88 kb. In simple words, the file size gets reduced after minimizing.
4. How to minimize Javascript files?
The main reason for minifying JavaScript is that it’s the fastest way to get the code to your user’s browser. Minifying code simply refers to removing unnecessary characters like white spaces from the code without affecting how the code will be processed by the browser.
Javascript code can be compressed manually by the following ways:
- By removing newline characters and white space.
- By trying to arrays to objects
- By shortening variable names
- By removing comments
- By optimizing conditional statements
Actually, Shopify doesn’t support auto minify Javascript files like CSS files. So you must do that manually.
You can see all the Javascript files in the Assets folder. Merge all Javascript files into one file. After this open file and copy all code and you can use online JavaScript minifying tools to minify. Tools are-
- JSCompress
- JavaScript-Minifier
- Minifier
- MinifyCode
5. Why do we need to minimize Javascript files?
Developers mostly use spacing, comments, and strong-named variables to make code and markup readable for themselves while developing Javascript files. This is additional in the development process to enhance the efficiency and scalability of applications with node.js web development services. Server and browsers will analyze the file content consist of a well-designed code and without comments.
So, to minimize file and reduce the file size remove comments, extra spaces from the javascript file. While reducing the bandwidth of network requests the minified file version creates the same functionality.
All major JavaScript library developers (bootstrap, JQuery, AngularJS, etc.) provide minified versions of their files usually denoted with a min.js name extension.
Minification has become a standard process for page speed optimization.
6. Benefits of Javascript minification.
- Faster download times for your users.
- Less bandwidth consumption of your website.
- Comments and whitespace are not needed for JavaScript execution. Removing them will reduce file size and speed up script execution times.
- Multiple Javascript files can be compressed into one minified Javascript file.
- Reducing the number of HTTP requests to your server, which in turn reduces the load on the server and allows more visitors to access your website.
Some of our Shopify optimization Blogs
