Minification

Updated on 31 May 2020

By Web Camp

7 min read 20 views

Updated on 31 May 2020

Share this article

Copy Link Link Copied

First let’s understand what is minification.

Minification is the process of minimizing code. In simple words, Minification is the process to remove all unnecessary characters in javascript and css files to make them more compact. This includes the removal of whitespace, comments, new line characters etc.

Why minify?

When creating HTML, CSS and JavaScript files, developers tend to use spacing, comments and well-named variables to make code and markup readable for themselves. It also helps others who might later work on the assets. While this is a plus in the development phase, it becomes a negative when it comes to serving your pages. Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit.

To minify JS, CSS and HTML files, comments and extra spaces need to be removed, as well as crunch variable names so as to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.

Before:

After:

Minification vs compression:

Minification removes whitespace and other unnecessary characters from the file to create a different CSS file with exactly the same meaning.

but compressing uses a compression algorithm (such as gzip) and adds an HTTP response header to tell the client that the file is compressed CSS (instead of plain text CSS) so it can be decompressed before being passed to the CSS parser.

Advantages:

When your webpage is loaded into the browser, it will be rendered quickly because less content is downloaded.
Less data is transmitted over the network reduces bandwidth cost
Faster loading improves UX and SEO
File size is decreased by removing unnecessary content without compromising main functionality.

There are some online tools available, you can easily minify your code for any website. And for you WordPress users, there are some powerful plugins available to minify. Some of them are:

minifier.org
minifycode.com
cssminifier.com and javascript-minifier.com
Dan’s Tools offers a CSS Minifier and a JavaScript Minifier.
Refresh-SF
Autoptimize (Wordpress)
Fast Velocity Minify (Wordpress)
W3 Total Cache (Wordpress)
WP Super Cache (Wordpress)
WP Fastest Cache (Wordpress)

Tips for minifying your files without breaking your site:

Always backup your website before making changes
When using tools such as PageSpeed Insights, be careful about implementing everything
Don’t use multiple plugins to minify your files.
Start with minifying for your CSS. If you’re using a plugin use its automatic mode first. If automatic mode doesn’t work, check the web browsers error console to confirm that the optimization isn’t working
Once CSS is optimized, then try JavaScript minification. If you have errors with JavaScript, try the “combine only” option if the plugin has it. If it continues to generate errors, there could be bugs or an incompatibility with your theme or plugins that’s keeping your JavaScript from minifying.
Also, if minification is done incorrectlt, it ccan mess up your site.

Thankyou for reading...

Please follow Web Camp for more such information.

Also, If you or your developer want me to develop something for you, you can contact me at : nidhigupta12811@gmail.com

Till then..#StaySafe #KeepLearning #KeepCoding

Computer Programming Web Development Scripts