How to minify your Shopify store’s CSS, JavaScript files and Liquid codes

by Kiet Huynh · November 16, 2018

How fast your site loads is not only important for first time visitors, but it is also important for moving search engine ranking. When you minify your website’s CSS, HTML, and Javascript files, you can shave some valuable time off of your site’s page load speed.

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

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

Minifying CSS on your theme
Minifying JavaScript on your theme
Minifying Liquid code on your Shopity store

Minifying CSS on your theme

You can see all CSS files in the Assets folder. The files have extension be .scss.liquid or .scss, that are files that have been set in optimization mode. And the files are typically not minified, their extensions are .css.liquid or .css.

Steps to minify CSS file:

In this example, you would click custom.css.liquid to open this file, then rename it to custom.scss.liquid.
Find where the file is being loaded. This command is usually in theme.liquid, most likely in the <head> tag.
Using the same example, you’d change “custom.css” to “custom.scss.css“.
Now, Shopify will compress your CSS file on their server before serving it up.

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

The output after – you have compressed code like this:

This will greatly reduce the size of your CSS files, which will speed up the page loading times of your online Shopify store.

Reference: https://speedboostr.com/shopify-liquid-lesson-auto-minifying-css/

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.

{%- comment -%}
Website: www.huratips.com
Email: info@huraapps.com
{%- endcomment -%}

{%- assign useMinification = true -%}

{%- assign profile = false -%}
{%- assign endings = "all" -%}
{%- assign startings = false -%}
{%- assign comments = "all" -%}
{%- assign blanklines = true -%}
{%- assign clippings = true  -%}

{%- assign _LINE_FEED = "
" -%}

{%- unless useMinification -%}
{{ minified }}
{%- else -%}

{%- capture _content -%}{{ minified }}{%- endcapture -%}
{%- assign _profile = profile -%}

{%- if endings == "all" -%}
  {%- assign _endings = "html head body li dt dd rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " -%}
{%- else -%}
  {%- assign _endings = endings -%}
{%- endif -%}
{%- for _element in _endings -%}
  {%- capture _end -%}</{{ _element }}>{%- endcapture -%}
  {%- assign _content = _content | remove: _end -%}
{%- endfor -%}
{%- if _profile and _endings -%}
  {%- assign _profile_endings = _content | size | plus: 1 -%}
{%- endif -%}

{%- for _element in startings -%}
  {%- capture _start -%}<{{ _element }}>{%- endcapture -%}
  {%- assign _content = _content | remove: _start -%}
{%- endfor -%}
{%- if _profile and startings -%}
  {%- assign _profile_startings = _content | size | plus: 1 -%}
{%- endif -%}

{%- if comments == "all" -%}
  {%- assign _comments = "<!-- -->" | split: " " -%}
{%- else -%}
  {%- assign _comments = comments -%}
{%- endif -%}
{%- if _comments.size == 2 -%}
  {%- capture _comment_befores -%}.{{ _content }}{%- endcapture -%}
  {%- assign _comment_befores = _comment_befores | split: _comments.first -%}
  {%- for _comment_before in _comment_befores -%}
    {%- if forloop.first -%}
      {%- continue -%}
    {%- endif -%}
    {%- capture _comment_outside -%}
      {%- if _carry -%}{{ _comments.first }}{%- endif -%}
      {{ _comment_before }}
    {%- endcapture -%}
    {%- capture _comment -%}
      {%- unless _carry -%}{{ _comments.first }}{%- endunless -%}
      {{ _comment_outside | split: _comments.last | first }}
      {%- if _comment_outside contains _comments.last -%}
        {{ _comments.last }}
        {%- assign _carry = false -%}
      {%- else -%}
        {%- assign _carry = true -%}
      {%- endif -%}
    {%- endcapture -%}
    {%- assign _content = _content | remove_first: _comment -%}
  {%- endfor -%}
  {%- if _profile -%}
    {%- assign _profile_comments = _content | size | plus: 1 -%}
  {%- endif -%}
{%- endif -%}

{%- assign content_split_to_lines = _content | split: "
" -%}
{%- assign _content = "" -%}
{%- for line in content_split_to_lines -%}
  {%- assign stripped_line = line | strip -%}
  {%- if stripped_line != empty -%}
    {%- assign _content = _content | append: stripped_line | append: _LINE_FEED -%}
  {%- endif -%}
{%- endfor -%}

{%- assign _content = _content | replace: ">
<", "> <" | rstrip -%}

{%- if _profile -%}
  {%- assign _profile_collapse = _content | size | plus: 1 -%}
{%- endif -%}

{%- if clippings == "all" -%}
  {%- assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " -%}
{%- else -%}
  {%- assign _clippings = clippings -%}
{%- endif -%}
{%- for _element in _clippings -%}
  {%- assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" -%}
  {%- assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] -%}
{%- endfor -%}
{%- if _profile and _clippings -%}
  {%- assign _profile_clippings = _content | size | plus: 1 -%}
{%- endif -%}

{{ _content }}

{%- if _profile -%}
  <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile">
    <thead>
    <tr> <td>Step <td>Bytes
    <tbody>
    <tr> <td>raw <td>{{ content | size }}
  {%- if _profile_endings -%}
    <tr> <td>endings <td>{{ _profile_endings }}
  {%- endif -%}
  {%- if _profile_startings -%}
    <tr> <td>startings <td>{{ _profile_startings }}
  {%- endif -%}
  {%- if _profile_comments -%}
    <tr> <td>comments <td>{{ _profile_comments }}
  {%- endif -%}
  {%- if _profile_collapse -%}
    <tr> <td>collapse <td>{{ _profile_collapse }}
  {%- endif -%}
  {%- if _profile_clippings -%}
    <tr> <td>clippings <td>{{ _profile_clippings }}
  {%- endif -%}
  </table>
{%- endif -%}

{%- endunless -%}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

{%- comment -%}

Website: www.huratips.com

Email: info@huraapps.com

{%- endcomment -%}

{%- assign useMinification = true -%}

{%- assign profile = false -%}

{%- assign endings = "all" -%}

{%- assign startings = false -%}

{%- assign comments = "all" -%}

{%- assign blanklines = true -%}

{%- assign clippings = true -%}

{%- assign _LINE_FEED = "

" -%}

{%- unless useMinification -%}

{%- else -%}

{%- capture _content -%}{{ minified }}{%- endcapture -%}

{%- assign _profile = profile -%}

{%- if endings == "all" -%}

{%- assign _endings = "html head body li dt dd rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " -%}

{%- else -%}

{%- assign _endings = endings -%}

{%- endif -%}

{%- for _element in _endings -%}

{%- capture _end -%}</{{ _element }}>{%- endcapture -%}

{%- assign _content = _content | remove: _end -%}

{%- endfor -%}

{%- if _profile and _endings -%}

{%- assign _profile_endings = _content | size | plus: 1 -%}

{%- endif -%}

{%- for _element in startings -%}

{%- capture _start -%}<{{ _element }}>{%- endcapture -%}

{%- assign _content = _content | remove: _start -%}

{%- endfor -%}

{%- if _profile and startings -%}

{%- assign _profile_startings = _content | size | plus: 1 -%}

{%- endif -%}

{%- if comments == "all" -%}

{%- assign _comments = "" | split: " " -%}

{%- else -%}

{%- assign _comments = comments -%}

{%- endif -%}

{%- if _comments.size == 2 -%}

{%- capture _comment_befores -%}.{{ _content }}{%- endcapture -%}

{%- assign _comment_befores = _comment_befores | split: _comments.first -%}

{%- for _comment_before in _comment_befores -%}

{%- if forloop.first -%}

{%- continue -%}

{%- endif -%}

{%- capture _comment_outside -%}

{%- if _carry -%}{{ _comments.first }}{%- endif -%}

{%- endcapture -%}

{%- capture _comment -%}

{%- unless _carry -%}{{ _comments.first }}{%- endunless -%}

{%- if _comment_outside contains _comments.last -%}

{%- assign _carry = false -%}

{%- else -%}

{%- assign _carry = true -%}

{%- endif -%}

{%- endcapture -%}

{%- assign _content = _content | remove_first: _comment -%}

{%- endfor -%}

{%- if _profile -%}

{%- assign _profile_comments = _content | size | plus: 1 -%}

{%- endif -%}

{%- assign content_split_to_lines = _content | split: "

" -%}

{%- assign _content = "" -%}

{%- for line in content_split_to_lines -%}

{%- assign stripped_line = line | strip -%}

{%- if stripped_line != empty -%}

{%- assign _content = _content | append: stripped_line | append: _LINE_FEED -%}

{%- endif -%}

{%- endfor -%}

{%- assign _content = _content | replace: ">

<", "> <" | rstrip -%}

{%- if _profile -%}

{%- assign _profile_collapse = _content | size | plus: 1 -%}

{%- endif -%}

{%- if clippings == "all" -%}

{%- assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " -%}

{%- else -%}

{%- assign _clippings = clippings -%}

{%- endif -%}

{%- for _element in _clippings -%}

{%- assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" -%}

{%- assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] -%}

{%- endfor -%}

{%- if _profile and _clippings -%}

{%- assign _profile_clippings = _content | size | plus: 1 -%}

{%- endif -%}

{%- if _profile -%}

<thead>

<tr> <td>Step <td>Bytes

<tbody>

<tr> <td>raw <td>{{ content | size }}

{%- if _profile_endings -%}

<tr> <td>endings <td>{{ _profile_endings }}

{%- endif -%}

{%- if _profile_startings -%}

<tr> <td>startings <td>{{ _profile_startings }}

{%- endif -%}

{%- if _profile_comments -%}

<tr> <td>comments <td>{{ _profile_comments }}

{%- endif -%}

{%- if _profile_collapse -%}

<tr> <td>collapse <td>{{ _profile_collapse }}

{%- endif -%}

{%- if _profile_clippings -%}

<tr> <td>clippings <td>{{ _profile_clippings }}

{%- endif -%}

</table>

{%- endif -%}

{%- endunless -%}

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.

{%- capture minified -%}

1	{%- capture minified -%}

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

{%- endcapture minified -%}
{%- include 'minifier', minified: minified -%}

1 2	{%- endcapture minified -%} {%- include 'minifier', minified: minified -%}

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

Simon says:
June 27, 2020 at 8:37 AM
hello, how can I minify my product page liquid? if better, can I minify JS and CSS as well on my product page? can I use the same method that was given on this page?
David Paine says:
July 26, 2020 at 11:12 PM
Shopify is one of the important platforms that is used for e-commerce purposes. Optimizing the website is becoming an important factor in generating leads. As per the research, If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost $2.5 million in lost sales every year. So your article is quite important is that perspective. Thanks for sharing.

How to minify your Shopify store’s CSS, JavaScript files and Liquid codes

Minifying CSS on your theme

Minifying JavaScript on your theme

Minifying Liquid code on your Shopity store

Related

You may also like...

2 Responses

Leave a Reply Cancel reply

How to minify your Shopify store’s CSS, JavaScript files and Liquid codes

Minifying CSS on your theme

Minifying JavaScript on your theme

Minifying Liquid code on your Shopity store

Share this:

Related

Related Posts via Categories

You may also like...

How To Add A Customer Survey Form Or Poll For Post Purchase Feedback On Your Shopify Site

How to integrate ImageKit on Shopify store

3+ Best Shopify Breadcrumbs Apps

2 Responses

Leave a Reply Cancel reply