React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
(7200)
This article will introduce you to a topic known as Minify In CSS and in process also give you a detailed practical demonstration. Following pointers will be covered in this article,
- What is minification?
- Why is minification needed?
- How do you minify CSS, JS, HTML code?
- When should you do that?
- Benefits of minification?
As the name suggests us pretty well, minification is about minimising the size of a file. In a code base, we have the liberty to minify HTML, CSS, or Javascript files. Here, we will discuss about minifying a CSS file.
When a developer codes, he/she makes sure that the code is in the best readable format to simplify any process of further changes. So, the variable names are in a format that is easily understandable and take up a whole lot of characters. Then, they also add a good amount of blank spacing to make it readable enough.
But in the whole process, we tend to loosen the strings that our file size is increasing which in turn increases the website loading time. Especially with websites which have a major chunk of functionalities and add-ons, a longer code base just makes the website worse.
Google anyway has a restricted format to rank the websites on its search page based on the optimal user experience that websites provide. The better your site loads, the better your website ranks on the search page.
With so much at stake, you don’t want your users to suffer because of bad site loading time and move on to the next one. Therefore, minification of the code is extremely important.
Infact, while building a website, we know what consists of the maximum code base?
It is all about CSS, HTML, and Javascript. The competition today to make your website look visually appealing stresses out the CSS file a lot and without realising we leverage our website with heavy code.
Enters, minification..
Moving on with this article on Minify CSS
Learn the latest UI/UX design techniques and trends through this UX Design Course.
What is minification?
Minification allows you to strip down your code to a minimal file size which doesn’t affect the code and yet reduces the file size. In the process, you can remove the unnecessary spacing and characters that nowhere affect your website’s originality. A few things which should be avoided from the code are:
- Whitespace characters
- New line characters
- Block delimiters
- Comments
- Shortening variable names
These factors are not involved to make your website run instead just make the file heavier and increase the website loading time.
Readability of code is entirely exclusive of what the machine understands. Web browser doesn’t need an extra spacing between the characters to understand and run. So, try reducing them and minify the CSS and HTML code.
Let’s take an example:
<html>
<head>
<style>
#myContent
{
font-family: Montserrat
}
#myContent
{
font-size: 90%
}
</style>
</head>
<body>
<!-- start myDemo-->
<div id="myContent">
<p>Minify my CSS</p>
</div>
<!-- end myDemo -->
</body>
</html>
Almost a difference of 48% in the original and minified file. Reduced by 178 bytes. After Minification
<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head>
<body><div id="myContent"><p>Hello world!</p></div></body></html>
Moving on with this article on Minify CSS
Why is minification needed?
To better the website loading time. No one likes waiting for a website to load as per convenience. With so many options available, people tend to switch to another one. So, it is better to reduce the file size.
Moving on with this article on Minify CSS
How do you minify CSS, JS, HTML code?
To minify, there are umpteen number of tools available online which may help you reduce the code base. You can also opt in to do it manually but for a larger code base it is advisable to use any of the following tools to minify your CSS file:
CSSminifier.com: An extremely simple tool to use. Just copy the code on the left side, generate the minified file, and download it. The minified file will have an extension .min.
Your minified CSS file will have the extension demo.min.css.
Smallseotools.com: Either copy your code or upload your code file. It will minify your code and lets you copy it or download it.
Autoptimize: This is a plugin that you can add to your WordPress tools. As a plugin, you can choose to minify your CSS code then and there.
It is easier for a developer to understand when the file is minified and when not. A minified file will have an extension .min.
Moving on with this article on Minify CSS
When should you do that?
Minification should be primarily done, when you have written the code and have to send it on the server for a response. Once the files are minified, the minified versions are used to distribute to the users.
Benefits of minification?
File size reduction: By removing the extra spacing, reducing variable names, and removing comments, file size is almost reduced by 30-60%. Faster loading: With lesser data to send over the network, the website loads faster than before. Lower bandwidth cost: When unnecessary data is removed, bandwidth needed is much less and so is the cost.
Things to Remember:
Even before attempting minification, make sure your code doesn’t burst off limits. The flow shouldn’t get disrupted and the functionality should remain faceless. You need to check that even after minification your code runs in the similar manner.
Infact, as a best practice you can always keep a template ready. Make your changes in the built-in template which will save you a generous amount of time.
Is it similar to compression?
Well, strongly NO. minification is different than compression. Compression makes a minified file reduce more but doesn’t affect the code styling and structure.
The file is minified and then compressed as a zip and sent over the network when a client requests to access the website. The file is then uncompressed and used.
Examples:
Before Minification:
<!DOCTYPE html> <html> <head> <title>Portfolio</title> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width", initial-scale="1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav> <ul> <li>Home</li> </ul> </nav> </body> </html>
After Minification:
<!DOCTYPE html><html><head><title>Portfolio</title><meta charset="utf-8"> <meta name="viewpoint" content="width=device-width", initial-scale="1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script></head><body><nav><ul><li>Home</li></ul></nav></body></html>
The code is definitely harder to read and understand for a human but is equally plausible for a machine to render. A machine doesn’t really care about the beauty of the code and spacing, it understands the gist and works accordingly.
Impressed enough with the minification technique?
Then try for yourself. Lessen the burden of your file and let your website flow freely for all the users!
This brings us to the end of this article on Minify In CSS.
If you’re interested in learning more about web-development, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Check out the Angular Certification Training course online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
If you are still interested If you have any question, you could post it in the comment section of this “Minify In CSS” blog, and we will get back to you as soon as possible.
