Minification as a method of website optimization, is it effective? And is it recommended?
Speed optimization is a very important aspect that every developer should consider when writing any website because a website that takes ages to load and respond often ruins the user’s experience. With the increasing number of web pages on the web each day, one thing you should want for your website is for it to stand out, as a bad user experience often pushes users away from your website to other websites that deliver a great user experience. Minification (which we will be talking about in this article) is a popular method of speed optimization that is often recommended to web developers.
This article covers
What is minification?
How does minification optimize a program?
How effective is minification?
Methods of minification
Is minification the same as compression?
Minification for speed optimization
So,
What is minification?
Minification simply means minimization, it is the process of removing codes that do not affect the functionality (or behavior) of a website from the source file, this is often done for speed optimization. By saying codes that do not affect the functionality of a website we mean codes like white spaces, comments, semicolons, etc. that are added to a code to make it more readable to humans such codes are often ignored by the server meant to run the code.
Example
The un-minified version
@import url(‘https://fonts.googleapis.com/css2?family=Lato&family=Martel+Sans&family=Open+Sans:wght@300&display=swap');*{margin: 0px;font-family: ‘Lato’, sans-serif;padding: 0px;font-family: ‘Lato’, sans-serif;}a{text-decoration: none;}ul{list-style: none;}.showcase{width: 100%;height: 692.594px;background-image: url(https://assets.nflxext.com/ffe/siteui/vlv3/b321426e-35ae-4661-b899-d63bca17648a/044b9365-d6b8-4e45-98b0-3ace7d99ffd3/BD-en-20220926-popsignuptwoweeks-perspective_alpha_website_medium.jpg);background-position: center;background-size: cover;position: relative;z-index: 2;border-bottom: 8px solid #222;}.showcase:after{content: ‘’;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0, 0, 0, .5);z-index: -1;}.menu{padding-top:28px ;margin: 0 56px;display: flex;justify-content: space-between;align-items: flex-start;}.menu img{width: 135px;height: 41px;}.menu a{background-color: #e50914;font-size: 16px;font-weight: 600;padding: 7px 17px;color: #fff;border-radius: 5px;}
And the minified version
@import url(‘https://fonts.googleapis.com/css2?family=Lato&family=Martel+Sans&family=Open+Sans:wght@300&display=swap');*{margin: 0px;font-family: ‘Lato’, sans-serif;padding: 0px;font-family: ‘Lato’, sans-serif;}a{text-decoration: none;}ul{list-style: none;}.showcase{width: 100%;height: 692.594px;background-image: url(https://assets.nflxext.com/ffe/siteui/vlv3/b321426e-35ae-4661-b899-d63bca17648a/044b9365-d6b8-4e45-98b0-3ace7d99ffd3/BD-en-20220926-popsignuptwoweeks-perspective_alpha_website_medium.jpg);background-position: center;background-size: cover;position: relative;z-index: 2;border-bottom: 8px solid #222;}.showcase:after{content: ‘’;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0, 0, 0, .5);z-index: -1;}.menu{padding-top:28px ;margin: 0 56px;display: flex;justify-content: space-between;align-items: flex-start;}.menu img{width: 135px;height: 41px;}.menu a{background-color: #e50914;font-size: 16px;font-weight: 600;padding: 7px 17px;color: #fff;border-radius: 5px;}The above code sample shows the un-minified and minified versions of a CSS file. You can see that the un-minified is more readable and understandable than the minified version, which sacrifices readability for speed optimization.
How does minification optimize a program?
The simple answer to this is that minification reduces the file size of a program by reducing the number of codes a server has to worry about when downloading and loading a code, which results in faster loading speed. As the server now has fewer files to download and run, websites with smaller file sizes are meant to load faster than websites with larger file sizes.
Now,
How effective is minification?
Minification can reduce the file size by up to 50%. That could translate into a 1 to 3 seconds speed improvement. Though the speed difference might not be all you need to take your website from slow to extremely speedy, the slight speed difference could mean a lot to visitors and also increase your chances of ranking higher in Google searches.
Google’s Search team announced that
“speed would be a ranking signal for desktop searches in 2010 and as of July 2018, page speed will be a ranking factor for mobile searches too”
And, in 2018 google research by google states that
“We also trained a deep neural network — a computer system modeled on the human brain and nervous system — with a large set of bounce and conversions data. The neural net, which had a 90% prediction accuracy, found that as page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases by 123%. Similarly, as the number of elements — text, titles, images — on a page goes from 400 to 6,000, the probability of conversion drops 95%”.
Minifying your code also brings advantages like improved user experience, reduced file size, and better performance to a website.
Methods of minification
Online minification tools
This process is straightforward. All you have to do is access an online minification tool, insert your code, hit minify, and then wait for it to do the whole minification process for you. Although this sounds easy, it is not that convenient for large projects because the copying and pasting involved in this process can be tiresome and frustrating. Imagine working on a large project and wanting to minify it using this method. You have to copy each file individually, insert and minify it in the online minifier, then copy and paste it into your code editor. You can see how tiring this process can be. That is why it is mostly recommended only for smaller projects.
Some great online minification tools include
HTML minifier for HTML
Clean CSS for CSS
Toptal javascript minifier and compressor for Javascript
So let’s look at other methods.
Command line tools
Command line tools are another method you can use to minify your code. Unlike online minification tools, they run locally and do not require an internet connection to use them, and it is also easier to customize their output compared to online minification tools.
To use a command-line tool for minification, you have to install it on your computer.
Some great command line minification tools include:
npm for CSS.
uglifyjs for javascript.
WordPress plugins
WordPress plugins are another way to minify a website. If you run a WordPress site, then there is no better way to minify your website than by using WordPress plugins like W3 Total Cache, Hummingbird, and Autoptimize, which allow you to do just that. With these plugins, you can easily optimize your site’s files, images, and more with the click of a few buttons.
CDN
A content delivery network (CDN) is another way your website can be minified. Using a CDN automatically minifies your website files stored on its servers without you having to do any work.
Software build tools
If you use software build tools like packer, gulp, ant, maven, etc., it is safe to know that these tools offer a minification function. You just have to search your tool’s documentation or integration library to find that out.
Is minification the same as compression?
One thing I see many people confused about is “is minification the same as compression?”. While minification and compression do a similar function, which is to ‘’optimize a website,’’ they work differently. Compression optimizes a website by using a compression algorithm like GZIP to rewrite the code into a binary format, while minification does the same by reducing the whitespace, comments, etc. in the code.
Minification for speed optimization, final thoughts
In dealing with speed optimization, there are many ways and minification is one of those ways that I love to use and also recommend to others. Leaving your code without minification makes it more readable by humans, but servers meant to run the code don’t care, they just need a code they can process. So I will recommend to you minify your website because it speeds it up and it doesn’t compromise on its code functionality.
