Last Updated on by Dan S
Originally Published November 30, 2020.
Below is a simple guide on how to minify JS and CSS on your Shopify theme in 2 steps. We cover the reasons why you might want to minify and how to achieve this for your Shopify store.
In short, Minification is a technique that can be applied to your website to improve its speed by removing unnecessary characters. Having a fast-loading website is important if you want a good customer experience and a key metric to improving conversion rate.
Let’s get started.
What is minification?
Minification is the process of removing unnecessary or disused data from your website without affecting how the resource is managed by the browser. Examples of minification can include deleting unused code, clearing code comments and formatting, and using shorter function names, to name a few.
Why should I minify?
Improving the speed of your website is important if you want to keep a good conversion rate for your consumers. Minification should be considered, along with image compression and app reviewing. It’s so important to compress every image on your store and review your apps every now and then to remove any you no longer use.
Minifying reduces the size of your website and helps to load your store faster, which in turn, improves your website’s speed and performance. Minification is applied to JS, CSS and HTML.
Want to know how to minify Javascript and CSS in Shopify? Let’s take a look.
How to minify CSS on your Shopify theme
You can locate your CSS files in the Assets folder.
Select Online Store under the Sales Channel tab in your Shopify store admin.
Next, select the Actions drop-down menu and click Edit code. This will present you with the CSS files for your store. Any files with the extension .scss.liquid or .sccs. have been optimised. Those files with the extensions .css.liquid or .css have not been minified.
Follow these steps in our example to minify your CSS files.
- Select css.liquid to open the file and rename to custom.scss.liquid
- Search for where the file is being loaded from. You can normally find this command in liquid and in the <head> tag
- Using our example, you would change css to custom.scss
- Following this change, Shopify will compress your CSS file on their server before serving it to your website
These steps minify the size of your CSS files, which in turn, speeds up the loading time of your Shopify store.
You can opt to use a CSS compressor. cssnano is a modular minifier that you can include to your build process to ensure that stylesheet is as small as possible.
It takes your well formatted CSS and runs it through focused optimisations. Extra whitespace from your CSS code will be removed and other parts compressed to improve the performance of your store.
How to minify JavaScript (JS) on your Shopify theme
Shopify does not support the minification of JS files like it does CSS files. This must be done manually or via an app. You can find all the JS files in the Assets folder, then merge all the JS files into one file. Remember to always backup your themes files in case you need to revert.
Once this step has been completed, open the merged file and copy all the JS code. You’ll need to find a source that will minify the JS code for you.
JSCompress is an online JS compressor that’s used for minifying your JS files by up 80% of their original file size. It’s really simple to use; just copy and paste your JS code and compress.
In summary
This is a scenario where size really does matter! Minifying your CCS and JS is so important if you’re looking to improve your website’s speed and loading time. Minification is a great process to apply to your website and definitely worthwhile doing it on your own site.
We also talk about other processes you can do such as compressing images and videos to improve your Shopify theme speed score. You’ll be surprised at how much difference it makes to the loading time of your Shopify store. Your customers will notice the difference too when they use your site; it’ll make their experience faster and responsive.
