Minifying codes is literally used to describe the method of removing white spaces between characters, line codes, developer comments, repeated scripts and other unnecessary characters from the source code. This reduces the size of the file and helps to load the website faster.

Minifying is applied to almost all the files sent to user’s browser including CSS, HTML, and JavaScript. But in this article we’ll limit our discussion to minifying CSS on Shopify only.

Minifying CSS helps increase conversion rate & sales

Do you know that just 0.5 second speed down causes 20% drop in traffic?. Indeed, visitors will most likely quite your website if they feel it is not fast enough.

Methods to minify CSS codes without apps

Minifying methods are classified into two main categories as follows:

  1. Minify CSS using tools online
  2. Manual Approach

1- Minify CSS online

There are many powerful tools to minify CSS online. You can “google” them and use them for any CSS file with the extension .CSS. They simply remove the break lines, develpers comments and most of them make the whole code in one line.

minifying css online
Example of minifying CSS online using cssminifier.com

2- Manual approach

Important : if you’re not familiar with it, it is recommended to save a copy of your theme, so you can recover it easily if something goes wrong

In the manual approach, You will have to remove all the line breaks, white spaces, comments, block delimiters and other unnecessary or repeated characters from the code manually. Here is a sample example

Before minification

/* 
 * 	example CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}

After minification

.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}

Conclusion

Minifying your Shopify CSS codes is literally a simple but effetive way to optimize your website loading speed. Faster is the speed, better it will be your conversion rate and better willl be your sales numbers.

Related Posts

  • Google announced in July 2018 a new ranking algorithm designed for mobile search. Google called it the “Speed Update,” so the online stores that delivers the slowest experience to users will be drastically impacted by this update. Beyond speed optimization is now one of the most important factors in SEO,…
    Tags: file, shopify, css, speed, website, code, codes, minify
  • When using speed tools like Gtmetrix, you certainly came across "The following images served from shopify.com should be combined into as few images as possible using CSS sprites." In this article we'll show the advantage of using CSS sprites and how to fix this speed problem. What is the advantage…
    Tags: css, speed, website, shopify, will, codes
  • Images are one of the most important components of every online store and website., and they constitute in most of cases more than 50% of a website file size, especially for e-commerce stores. image optimization is then important to give more speed to your Shopify store, but how to do…
    Tags: shopify, speed, website