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 critical if you want to keep a good conversion rate for your consumers. Recent studies show that website conversion rates drop by an average of 4.42% for each additional second of load time, and a site that loads in 1 second has a conversion rate 3x higher than a site that loads in 5 seconds.
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
Good news: Since August 2021, Shopify automatically minifies JavaScript files when they are requested by the storefront. This means that for most Shopify themes, especially those built with Online Store 2.0 architecture, your JavaScript is already being optimized without any manual work required.
However, if you’re working with custom JavaScript files or older themes, you may still want to manually minify your JS. You can find all the JS files in the Assets folder. Remember to always backup your themes files in case you need to revert.
For manual minification, 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 to 80% of their original file size. It’s really simple to use; just copy and paste your JS code and compress.
Alternatively, you can use Shopify apps like MinifyMe or speed optimization tools that handle minification automatically across your entire theme.
In summary
This is a scenario where size really does matter! Minifying your CSS and JS is so important if you’re looking to improve your website’s speed and loading time. With Shopify now automatically handling JavaScript minification, it’s easier than ever to optimize your store’s performance.
Minification is a great process to apply to your website and definitely worthwhile doing 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.
