What is the Minification of CSS?
Minification allows the redundant portion of your code to be deleted and the file size decreased. The items that are eliminated from the code are:
- Newline characters
- Shortening variable names
- Block delimiters
- White space characters
These are all components that only make the file heavier and increase the loading time of the web page. To understand and run the source code, the web browser does not need any extra spacing between the characters. Minimize the CSS code, which decreases the file size.
Minify vs. Compress: any distinction?
For performance optimizations that lead to size reductions, code minification and compression are used. The files are minified and then compressed as zipping and sent across the network when a user requests access to the website, but they are different items. The file is then uncompressed and used by the user.
Compression does not inherently alter code content, unless binary files such as images are considered. Compression reduces more of a minified file but does not change the layout of the code.
Minification decreases the code content. By deleting unused spaces, characters, and formatting, the code size changes, resulting in fewer characters in the code. It optimizes the code to use fewer characters by renaming variables.
CSS Minifying on your theme
In the Assets folder, you can see all of the CSS files. The extension files are .scss.liquid or .scss, which are files that have been defined in the optimization mode. Typically, and the files are not minified, their extensions are .css.liquid or .css.
Steps to minify a CSS file on Shopify:
- Click ebay-styles.css in this case, and then rename it to ebay-styles.scss.liquid.liquid
- Find the place where the file is loaded. “This command is usually located in theme. Liquid, most likely in the section “head.
- You will change ‘ebay-styles.css’ to ‘ebay-styles.scss.css’ using the same example.
- Just like magic, before serving it up, Shopify will compress your file on their server.
- Now that the CSS file gets served as a smaller file, page weight is saved.
Any unnecessary characters from the code will be omitted or changed in the process. Removes characters as white space, new line, comment out code… modifies as HEX colour, minified character variable specified… Finally, all of the code appears on a single line.
Minifying the liquid code in your Shopity store
• Minifying Liquid Code minifies the performance of HTML. You have to delete the comment codes. Comments must be omitted from codes and rendered on a single line.
• In the directory for Snippets, press Add a New Snippet. Appear in the popup: Enter the name of the minifier in your snippet and press Build Snippet.
• Paste the content from the text below into the online code editor.
• Locate and click on your theme. Liquid file in the Templates folder to open it in the online code editor.
• Attach the code below to the file before the first section.
• Before you see the closing tag, scroll down a bit. Paste the code below after the closing tag.