Not only is it important for first-time visitors how quickly your site loads, but it is also important for moving search engine ranking. You can save some precious time off the page load speed of your site by minifying the CSS, HTML, and Javascript files of your website.

The term ‘Minify’ is essentially used to describe the way white spaces, line breaks, comments, block delimiters, and other unnecessary characters are removed from the source code. It reduces the size of the file and helps to load it faster, improving the speed and performance of the site in turn. The concept of minifying is applied to all the files, including HTML, CSS and JavaScript, sent to the user’s browser.

I’m going to show some simple ways of minifying CSS, JavaScript files, and Liquid codes in Shopify in this article.

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:

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

Minifying your theme with JavaScript

The primary reason for JavaScript minification is that it’s the easiest way to bring the code to the browser of your user. Minification (minify/compress) is the compression code process that does not affect the function of the code, from the original size to the smallest size.

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.

Currently, Shopify does not support Javascript auto-minify files like CSS files. So the manual you have to do. In the Assets folder, you can see all the JS files. All JS files should be combined into one file. You open this file and copy all the code after that and you can use JavaScript online minifying software to minify.

• • JSCompress
  • JavaScript-Minifier
  • Minifier
  • MinifyCode

In JavaScript scripts, you need to pay attention to liquid code, since the tools do not support liquid code. After minifying, the JS code is on a single line, so that you can’t read to switch. But you have to back up a file before minifying it.

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.

The File Optimizer software is the simplest way of minifying CSS, JavaScript, and Liquid files if you are not comfortable dealing with code and choose to use an app instead.