How to minify CSS, JavaScript files and Liquid codes in Shopify

When people visit your website, they expect each web page to load quickly. If it takes a long time to load, then people will leave your site and see what your competitors have to offer instead.

It may seem like such a small thing, but it’s critical in keeping your website visitors engaged. This helps turn them from visitors into leads, and then from leads into paying customers.

You also want people to find your website in search engines, right? Google has many different criteria for how it determines where your website shows up in its rankings. Website speed is one of those criteria.

There are many things you can do to increase your Shopity store load speed. This includes optimizing your files, including images, CSS, JavaScript and Liquid code so that they are as small as possible.

Minifying CSS on your theme

You can see all CSS files in the Assets folder.

  • filename.scss.liquid or filename.scss files are already minified.
  • filename.css.liquid or filename.css files are typically not minified.

Steps to Minify:

  1. In this example, you would click ebay-styles.css, then rename it to ebay-styles.scss.liquid
  2. Find where the file is being loaded. This command is usually in theme.liquid, most likely in the “head” section.
  3. Using the same example, you’d change “ebay-styles.css” to “ebay-styles.scss.css”
  4. Like magic, Shopify will compress your file on their server before serving it up.
  5. Now that CSS file will get served up as a smaller file and save page weight.

File name change in the load command (in theme.liquid):

The output before – you have organized code how it looks in your editor:

The output after – you have compressed code like this:

Typically CSS files are pretty small, so you won’t notice a significant change in load speed, but with each incremental improvement to performance optimization, you collectively make your site faster, and Google likes that.

Minifying JavaScript on your theme

The main reason for minifying JavaScript is that it’s the fastest way to get the code to your user’s browser. Minification (minify/compress) is the process of compression code from the original size to the smallest size and does not affect to the operation of the code. The process will removes or modifies some unnecessary characters from the code. Removes characters as white space, new line, comment out code… modifies as HEX color, defined variable to minified character… Finally, all the code will on one line.

Actually, Shopify don’t support auto minify Javasript files like CSS files. So you must do that manual.

You can see all JS files in the Assets folder. You should merge all JS files to one file. After that you open this file and copy all code and you can use online JavaScript minifying tools to minify.

You need to pay attention to liquid code in javascript files because the tools don’t support for liquid code. The JS code is on one line after minify, so you can’t read to adjust. So you must back up the file before minify.

Minifying Liquid code on your Shopity store

Minifying Liquid code is minify html output. You must remove comment out codes. You must remove comment out codes and make it on one line.

In the Snippets directory, click Add a new snippet. In popup appear: Give your snippet the name minifier and click Create snippet.

In the online code editor, paste the content from the below text.

In the Layouts folder, locate and click on your theme.liquid file to open it in the online code editor.

Add the below code into before first line of this file.

Scroll down a bit until you see the closing tag. After the closing tag, paste the below code.

If you consider yourself non-technical, there are Shopify apps that minify CSS, JavaScript for you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *