How to Minify CSS and JavaScript Files in Your Shopify Store

Sept 07, 2021 | 8 min read

1. QuickRead

The most misunderstood and despised aspect of website optimization is minification. What is the reason behind this?
While the principle is simple, in practice, it frequently ruins things, causing non-technical website owners to pull their hair out. Many people wish to utilize minification since it is nearly always mentioned as a web performance best practice. For developers, there are several tools available to integrate it into the development workflow, such as Gulp and Grunt.
There are plugin-based minification options available for the typical website owner, but they can be difficult to deploy because their behavior varies from site to site depending on the theme and plugins used.
While certain aspects of speed optimization operate in a similar way on each site, minification is the one that varies the most. One of the reasons it causes headaches is because of its unpredictable nature.
And that is why we will go through some of the simple ways to minify CSS and JavaScript files in Shopify.
But first, let’s understand what exactly is minification.

2. What is Minification?

Minification is defined as the process of removing all redundant or unnecessary data from the entire code, that is, removing some unimportant characters from the general code without the programmer altering the functionality or potency of the general code – it works in such a way that it eliminates a code file containing all redundant or unnecessary data that are not important in the general code. It is not like the conventional or old comprehension technique, which requires unzipping before being delivered or implemented.
It is mostly performed after the coding has been completed. It is mostly done prior to application deployment – it provides simple access to the webpage by allowing the user to view the minified version of the webpage rather than sending them the full version of the webpage. This allows users to quickly interact with a webpage while still having full access to the website’s content. It improves response times while decreasing loading times.
Minification is used on a variety of websites, including private blogs and large user portals.

3. How to Minify CSS and JavaScript files in Your Store

The speed with which your site loads is crucial not just for first-time visitors, but also for improving search engine rankings. When you minify your website’s CSS, HTML, and Javascript files, you may save important time off of your site’s page load speed.

Minifying CSS

CSS files may be found in the Assets folder.In your Shopify store, go to the Sales Channel tab and select Online Store. Then, from the Actions drop-down menu, choose Edit code. This will provide you access to your store’s CSS files. Any files ending in.scss.liquid or.sccs. have been optimized. The files ending in.css.liquid or.css have not been minified.
To minify your CSS files, follow the instructions in our example.
  • To access the file, choose css.liquid and rename it to custom.scss.liquid.
  • Look for the location where the file is being loaded. This command is usually seen in liquid and thetag.
  • Now modify custom.css to custom.scss.css
  • Shopify will now compress your CSS file on their server before sending it to your website as a result of this change.

Minifying JavaScript

JS files are not supported by Shopify in the same way that CSS files are. This may be done manually or with the help of an app. All of the JS files can be found in the Assets folder, and then all of the JS files may be merged into one file. After that, open the one merged file and copy all of the JS code. You will need to discover a source that will automatically minify your JS code. To minify, you can utilize online JavaScript minifying tools.
  • JSCompress
  • JavaScript-Minifier
  • Minifier
  • MinifyCode
Because the tools do not support liquid code, you must pay attention to it in javascript files. You can not understand the JS code after minify since it is all on one line. As a result, before you minify the file, you should create a backup of it.

4. How minification works?

Be aware that while building a webpage, the web browser often scans all of the additional characters that the developer uses or inserts in the codes; some of them may be useful, while others may be redundant. The goal of minification is to get rid of such unnecessary codes. This series of codes, known as whitespace, comments, and line breaks, generally take up a lot of space in the body of the file, making it much larger than it has to be. These extra codes are typically unnecessary because computers do not require them before executing the tasks that have been assigned to them. When code is minified, it significantly reduces the file size.
The following is a step-by-step breakdown of how minification works:
  • To be utilized in a web application, a web developer develops a JavaScript or CSS file. These files are designed for developer convenience, which means they contain whitespace, comments, lengthy variable names, and other readability techniques.
  • The developer uses a minification approach (see below) to optimize the file while making it more difficult to understand. The most common minification techniques are removing whitespace, shortening variable names, and replacing verbose methods with shorter, more concise functions.
  • When responding to web requests, the web server utilizes the minified file, resulting in decreased bandwidth use without losing functionality.
Minification has the advantage of just having to be done when the source file changes. Minification, when used in conjunction with other compression techniques, may drastically reduce bandwidth use for both the company and the user.

5. Advantages of Minification

We should have learned by now that minification has a slew of benefits as we have sailed through the heart of this topic. We have gathered some of the most evident benefits of minification in this section:
  • Minification reduces the amount of time it takes to load a page – minification reduces the amount of time it takes to load a page. Because the page has previously been minified, it responds faster than a non-minified page. Minification is supposed to reduce the time it takes for a website to load by 60% or more. This demonstrates the need for minification in web and app development.
  • After eliminating the useless codes such as comments, line breaks, and code files, there is no need to download unnecessary data. This reduces file size and ensures that only the most critical codes are found among the general codes. Minification allows you to avoid downloading unneeded files by only downloading what you require at the time.
  • Because the quantity of data consumed by users while receiving a request is not as large as that of an un-minified page, Enterprises need fewer resources. These minified pages only need to be produced once, and they may be utilized in a variety of requests without needing to be loaded from the beginning.
  • Increases how people engage with your website or app — minifying a website improves how users interact with your website or app. Nobody wants to use a website that takes minutes to load or consumes a lot of data. When more people find your website to be responsive and simple to load, the website’s performance will improve. Because of its user-friendliness, minification will assist your website get a good rating.
To convey the true significance or advantages of minification. Assume you and your three pals pay a visit to one of your buddies, and he wants to provide you all drinks to cool inside the evening. He would have to walk down to the fridge at least twice to fetch you all your wanted beers because he only has two hands to carry two beers. You and your pals are the web surfers in this simple example, while your beer carrier friend is the webserver. This can be time-consuming due to the time he would spend walking to and from the fridge to fetch those drinks.
However, if there is a tray that can carry this beer all at once without stressing your friend by walking to and fro – he would choose all four drinks all at once, saving time and saving him from the energy he would need in walking around. Now, in terms of minification, your buddy who is the carrier of the beers can only manage a certain number of beers at a time, much as your browser can only handle a certain number of files at a time, so you tend to send the webserver (Your friend who is the carrier) to assist you in retrieving additional files (beers from the fridge). Websites nowadays use a large number of files at once. Concatenation is used to combine many files together so that the server may transmit fewer files to the browser, which is a faster operation.

6. How is minification different from obfuscation, compression, encryption, or uglification?

Uglification:This is quite similar to minification. Uglify JS is a JavaScript library that simplifies the process of minifying JavaScript files. Uglification boosts productivity but lowering readability.
Encryption:The process of converting plain data into encoded data is known as encoding. This encrypted, or encoded, data is called ciphertext, and it requires a secret key to decrypt it. Encrypted code cannot be executed by the browser. Encryption is a security feature that does not always result in smaller file size.
Obfuscation:This technique is used to conceal business logic. The code is changed in such a way that it is no longer readable by humans. Reverse engineering becomes harder as a result of this. Obfuscation differs from encryption in that the code is still understandable and executable by computers. Obfuscation is achieved by altering the names of variables, functions, and members. Although this is not the primary objective of obfuscation, the resulting reduction in file size helps performance.
Compression:Data compression is a technique for reducing the number of bits required to represent information. Data compression can help you save space on your hard drive, speed up file transfers, and lower your network bandwidth expenses. Some files, such as Microsoft Word documents, can be reduced to 90% of their original size.

7. Why don’t developers write minified code, to begin with?

Because minification produces compact files, it is a great practice for web performance. So, why not write already-minified code?
Humans require whitespace, formatting, and comments to comprehend and debug JavaScript code, therefore it is created for and by them. Minifying software can be used after the code has been created to enhance performance. This is due to the fact that browsers can run code without having to understand it.

8. What are the disadvantages of minification?

Because of site-dependent factors like themes, plugins, and server environment, minification might disrupt complex scripts. Minification must also be done in combination with other speed optimization techniques. It might not give considerable benefits on its own. Minification can sometimes cause problems that are difficult to debug.

9. Conclusion

In a nutshell, one must ultimately confront the obvious issue of whether or not minification is worth all of these efforts. To be honest, it is neither rocket science nor a cheating procedure. It will not result in a significant increase in traffic to your website. It is similar to the fine-tuning stage. You only use minification once you have finished writing your code. It is the final stage of the tuning process. There will be a little adjustment to websites, but do not expect lightning-fast performance.
Using CSS minification makes debugging easier, but using JS minification causes stress since the files that are designated to be excluded are not obvious enough, thus it takes a long time to figure it out. If you are not a coder or a web developer, this may not be worth the trouble.
chat-with-us
chat-with-us

Latest Posts

Leave A Comment