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
3
-
Have you tried a quick google search first? Also, by the sounds of it, minifying your files won't fix your problem. Minifying will only shave off a small load time, useful for optimisation, and by the sounds of it this is something happening in your script to warrant a "huge loading time".John Bell– John Bell2018-08-10 14:24:55 +00:00Commented Aug 10, 2018 at 14:24
-
yes, I google searched it.Zoltan TM– Zoltan TM2018-08-11 17:16:45 +00:00Commented Aug 11, 2018 at 17:16
-
1I tested it with many different solutions and the main issue was file sizes. Also, I asked out of curiousity, I wanted to kjnow what Shopiffy uses and I couldn't find it official doc.Zoltan TM– Zoltan TM2018-08-11 17:18:04 +00:00Commented Aug 11, 2018 at 17:18
Add a comment
|
1 Answer
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 becomestheme.scss.liquidChange 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.liquidsuffix, 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.
4 Comments
Zoltan TM
thanks, great to know that, so I minify before uploading
Dave B
For javascript, that's the only way to get minified code with Shopify, correct :)
Dave B
Also, if you have extremely large javascript files, it may make sense chunk them out into a few smaller files. With HTTP/2 becoming mainstream, multiple smaller files are sometimes better than singular monoliths. See for example the analysis at medium.com/@asyncmax/…
docta_faustus
As of 8/12/2021 Shopify DOES auto-minify JS files: shopify.dev/changelog/…