Skip to content
How to Minify your Shopify CSS files
1. Quick Read
CSS makes webpage look and feel the way it does: the beautiful layouts, designs, colors that stimulate our senses, fonts that help us read text expressed in creative ways, images, and other content displayed in a myriad of shapes and sizes.
When a developer codes, they make sure that the code is in a well readable format. So, the variable names are in a format that is easily understandable and consists of a lot of characters. Developers also add a large amount of blank spacing to make it in a good look.
But in this method, file size is increasing which in turn increases the website loading time. CSS minification is the best way for optimization – to boost performance-to web app users.
2. What is CSS Minification?
Minification helps out to remove the unnecessary portion of your code and reduce the file size. The things which are removed from the code are-
- Newline characters
- Comments
- White space characters
- Shortening variable names
- Block delimiters
These are all elements that just make the file heavier and increase the webpage loading time. The web browser doesn’t need an extra spacing between the characters to understand and run the source code. So,minify your CSS code that reduces the size of the file.
3. Any difference — Minify vs. Compress?
Code minification and compression are used for performance optimizations that lead to size reductions. But they are different things, the files are minified and then compressed as zipping and sent over the network when a user requests to access the website.The file is then uncompressed and utilizes by the user.
Minification reduces the content of code. It alters code size by removing out unwanted spaces, characters, and formatting, resulting in fewer characters in the code. It optimizes the code by renaming variables to use fewer characters.
Compression does not necessarily alter the content of code—well unless we consider binary files like images. Compression makes a minified file reduce more but doesn’t affect the code structure.
4. Why Minify CSS?
Minification of source code reduces the file size and speed up the time required by the browser to download and execute such code. However, what is more, important about minifying CSS is CSS causes the render-blocking on the website.
No one likes waiting for the loading of any webpage. Because nowadays, so many options are available, people tend to switch to another one.
So, it is better to reduce the file size and to make the loading time of your webpages faster.
You Might Be Interested In: Shopify Speed Optimization Services
5. When should you perform Minify CSS?
Minification has become a standard process for page speed optimization. Minification of CSS files can be done, when the developer has written the code and has to send the code on the server for a response.
Now,you can perform the minification of CSS code. Once the files are minified, these versions of files are used to distribute to the users.
6. Advantages of Minification:-
File size reduction: By removing the extra spacing, reducing variable names, and removing comments, file size is almost reduced by 30-60%.
Page loading quickly: The lesser data to send over the network, which results in the website loads faster than before.
Lower bandwidth cost: When unnecessary data is removed, bandwidth needed is much less, and hence the low cost is required.
Points to Remember
Before attempting the minification of CSS make sure your code doesn’t get break out in limits. The flow of code shouldn’t get disrupted and all functionality remains the same.
After performing minification you need to check your CSS code, runs in the same manner. The best option is you can always keep a template ready. Make your changes in the built-in template which will save you a huge amount of time.
7. Minifying CSS on Your Theme in Shopify
You can see all the CSS files in the Assets folder. The files having extension are files already minified. And the files are typically not minified, their extensions .scss.liquid or .scss, are .css.liquid or .css
The steps to minifying the CSS files on Shopify are as follows:-
Step 1:-
In this example, you would click on custom.css.liquid to open this file, then rename it to custom.scss.liquid. You can take a look at the image.
Step 2:-
Search where this file is being loaded. This command is generally in theme. liquid, most likely in the “head” section.
Step 3:-
Using this example, change the file extension from “custom.css” to “custom.scss.css“
Step 4:-
Now, Shopify will compress your file on their server before serving it up. This CSS file will get served up as a smaller file and save page weight.
The file name gets changed in load command in the theme. liquid file as shown in the image:-
This whole process will reduce the size of your CSS files, which will speed up the page loading times of your online Shopify store.
8. Know about Online Tools for Minification CSS:-
A number of free and simple online tools exist that can quickly minify CSS. You can also do it manually but for a larger codebase use any of the following tools to minify your CSS file:
- Minify
- CSS Minifier
- Minify Code
All these three tools provide a simple user interface consisting of input fields and you can copy and paste your CSS into the input field and click a button to minify the code. The output is also presented for you to copy and paste back into your project.
This is an image of CSS Minifier, there is a Minified Output section that has CSS code that has been minified
Some of our Shopify optimization Blogs
