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. 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.