Sept 07, 2021 | 8 min read
Table of contents
- 1. QuickRead
- 2. What is minification
- Minifying CSS
- 4. How minification works?
- 5. Advantages of Minification
- 6. How is minification different from obfuscation, compression, encryption, or uglification?
- 7. Why don’t developers write minified code, to begin with?
- 8. What are the disadvantages of minification?
- 9. Conclusion
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.
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.
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:
- 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?
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?
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.
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.