CODEWITHSUNDEEP
shopifyminify
Zoltan TM
Zoltan TM

Reputation: 43

What Shopify uses to minimize JavaScript and CSS?

My test site has a huge loading time and test shows I can cut performance by minifying JS and CSS assets.

What Shopify uses to minimize JavaScript and CSS? Thanks

Upvotes: 0

Views: 3544

Answers (1)

Dave B
Dave B

Reputation: 3248

Shopify doesn't have the ability to auto-minify your Javascript (you need to do that yourself), but it does have the ability to auto-minify your CSS by giving it an 'scss' suffix, then including it in your site with the suffix .scss.css

So if your CSS file is currently named theme.css.liquid and included in your site with {{ 'theme.css' | asset_url | stylesheet_tag }}:

  • Change the name of your CSS file to end with .scss (or .scss.liquid, if the file in question ends with .css.liquid) - so in this case, the file becomes theme.scss.liquid

  • Change the reference to the file to end in .scss.css - so in this case, the include becomes {{ 'theme.scss.css' | asset_url | stylesheet_tag }} (Note that a .liquid suffix, if any, is not included here)

The result will be a minified CSS file built from your un-minified source code.

As John Bell mentions in a comment to your main post, though, minification alone probably won't resolve the underlying problems. If you look at the waterfall results from your speed test, look for files that have a long 'Waiting' or 'TTFB' time - those are files that are taking a long time for Shopify to compile, and indicate that your Liquid code is what needs to be optimized. Also look for files with a long 'Downloading' time, and see if those files could be compressed or only deferred so that they only load after the initial page has completed.

Upvotes: 4

Related Questions