Minify Resources
Page Speed

Minify Resources: JavaScript, CSS & HTML

Minify Resources: JavaScript, CSS & HTML

Background

Now a days, Google is quite strict with regards to ranking websites in SERP results. To appear your site in SERP results organically, ,first your website needs to be SEO optimized. Further, Google also evolved over a period of time & they started ranking websites that load quicker in web browsers. As a blogger or a web master, your job is to load your website as quickly as possible in browsers. Webmasters can achieve fast loading of website by minify resources.

Lets try to understand the background of request making of browser & how server responds to browser request. It all starts whenever a visitor visits your website for the first time. If the website is slow, visitors will drop from the web site in search of a much better website that loads fast & offering the same or better content material. Further, Minify resources also improve performance of website.

Why Websites Load Slowly in Web Browsers?

The Common reasons for a website to load slowly are given below.

The time for loading a web site depends mostly on following factors.

1. The number / size of external resources included in the webpage/website.
2. The database (db) queries executed while the loading website/webpage.
3. Properly resized images to their visible size.

Why Is It Vital That You Minify Resources?

If you’ve ever seen an HTML, CSS, or JavaScript file, it’s likely that you’ve noticed that there exists a large amount of whitespace or range breaks. This make the code simpler to read, but the documents containing them will end up being larger and slower to load. Thus, minify resources is vital for webmasters. Minify Resources removes unnecessary whitespace, individuals, and lines from the code and generates more compact data.

As we all know, websites are made up of large amount of data files. The Files may be of HTML, CSS, JavaScript etc.These documents contain a great deal of codes. It may be auto-generated or written & compiled by a programmer. Also, these are well formatted documents, which are readable by humans. To enhance readability to the code, developers may also add comments, line breaks, Block delimiters & Whitespace characters. It is exclusively meant for human visitors. It simply add size to the document. where as machines doesn’t need formatted code. So, minify resources can eliminate unnecessary code. Thus able to use to save lots of space and help enhance the performance of websites.

Before we get started, lets know what minify & compression means and how it will help website loading quickly.

Minify Resources Vs Compression

File minification and File compression are two different things. Both try to accomplish the same objective aka faster load period of webpage. They are different in how they function. Taking benefit of minification or compression is an excellent way to greatly help further optimize your website. It is very easily achievable by using available online tools and plugins of wordpress.

What is Minify?

Minification of  CSS, JS, and HTML means removing of unnecessary character types from within a webpage. When they are eliminated, the data files become lighter. It enhances the page loading time. Minify is a good strategy to improve  visitor’s expectation and rank your website better. As usual, There are many methods to minify resources types.

What will Minify remove?

When the minification process is performed, it removes the below codes from your webpage:

1. Whitespace characters
2. Comments
3. Line breaks & 1. New line characters
4. Block delimiters

Usually, the minification process will not affect the function of the webpage. What it does is simply optimizes the webpage for downloading reasons. Minifying the CSS, JS, and HTML documents in your web server environment is particularly useful. Minification helps both Google as well as your site visitors happy. It makes google give good rating for your website.

a .min filetype is quite often included postfix of the document name (e.g. footer.min.css, header.min.css). It is to distinguish minified data files from unminified documents.

How To Minify CSS, HTML files manually

Now that we’ve understood what minification is and it is different from compression. Now, It is time to figure out how to minify CSS, JS, and HTML.

The process of minification is quite straightforward & clear. All you have to do is take away the unnecessary code parts from your own code. Let’s do it with an example below.

Ex: Minification Example 1 ( Minify CSS file)

The below example shows a CSS file before and after minification.

Before CSS minification:

.entry-content p
font-size: 12px !important;

.entry-content ul li
font-size: 12px !important;

.item_item p a
color: #000;
padding: 15px 5px 10;
margin-bottom: 15px;
border-bottom: none;

After CSS minification:

.entry-content p,.entry-content material ul lifont-size:12px!important.item_item p acolor:#000;padding:15px 5px 10;margin-bottom:15px;border-bottom:none

As is seen by the example above, after minification the CSS is harder to understand as there will be no line breaks, whitespace, etc. Nevertheless. This optimized CSS data format takes less bytes. Thus, it makes it to download quickly.

Ex: Minification Example 2 ( Minify HTML file)

The example shows a CSS file before and after minification.

<!DOCTYPE html>
<html>
<head>
<title> Table Data </title>
<meta charset=”utf-8″>
<meta name=”viewpoint” content material=”width=device-width”, initial-scale=”1″>
<hyperlink 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 minifications it’ll look like below:

<!DOCTYPE html> <html> <mind> <title> Table Data </name> <meta charset=”utf-8″> <meta name=”viewpoint” content material=”width=device-width”, initial-scale=”1″> <hyperlink 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> </mind> <body> <nav> <ul> <li> Home </li> </ul> </nav> </body> </html>

The above format gets rid of any unnecessary whitespaces, breaks and so forth making it smaller sized. Therefore decreasing the document size & thus loading time of webpage too.

Methods to Minify the Files of CSS, JS & HTML

1. Minify the Files Manually

“Manually” doesn’t mean that you should delete the unnecessary character types all by yourself. There are numerous helpful tools online. You may use to speed up the procedure of minify resources. However, you do have to upload the minified data files to your webserver/website manually.

Minify resources manually may make use of GTMetrix to download the optimized data files. After that, replace the unedited documents on your own website’s directory with the brand new one. After you’re done with minify resources , be sure to check your website score in GTMetrix!

Using Online Tools for Minification

Below, We also outlined the various tools that let you  may use to do the minification manually. Webmasters may use Online Tools to perform minification of files. You may use an FTP tool to overwrite the initial files in your domain with the minified files. Alternatively, you may use either CPanel’s file manager or file manager plugin.

1. GTMetrix

You may use of GTMetrix, to locate the documents you would like to minify. Enter your website’s URL, and the tool will show the data files that you could optimize for performance of website.

Snapshot

2. CSS Tools

CSSminifier.com: It enables you to minify CSS files. To Minify,  copy and paste your code of css & submit for minification. Once done, download the minified edition as a file.

phpied.com: It is an online css tool that uses YUI Compressor for minification of CSS files.

2. JS Tools

Jscompress.com: It is an online JavaScript-based minification tool. This tool enables you to copy-paste your code and download the minified code of JavaScript.

yui.github.io: A advancement tool that can be utilized during development of Java scripts.

3. HTML Tools

htmlcompress.com: An online minification tool that enables you to minify HTML files. It also miniy JavaScript and CSS.

HTMLMinifier: It is a JavaScript-based HTML minifier. It can be built-into your project easily. It is one of the best minification tool  .

In case you are using a CMS such as for example WordPress, you may look for minification plugins described below.

How  to Minify CSS, HTML, and JavaScript Files in WordPress

Make use of a WordPress Minify Plugins

WordPress provides number of plugins of minification of resources. You may change the configurations of plugin as per your requirements. The tool will deal with the rest work on our behalf.

Utilizing a WordPress minify plugin is normally way easier because plugin will minify your documents automatically. Listed below are best options to accomplish the job of file minification.

WP Rocket (Paid) minify your resources like JavaScript , CSS  HTML files. It is No#1 plugin for optimization of website.

Fast Velocity Minify (Free) minifies your JavaScript and CSS documents. It does through the use of PHP Minify. Further, you may also ask the developer to create custom optimization choices for the plugin.

Better WordPress Minify (Free)  make sure that minifications won’t break your theme and additional plugins. Furthermore, the plugin also provides many features such as for example CDN integration and multisite compatibility.

WordPress Super Minify (Free) minify, combine, and cache your website data files. In addition, It is the most simple and lightweight tool designed for the purpose of resource minification.

Whichever plugin you select, all you need to do is select the files you need to minify. The plugin will do the rest in the background. And, Improves performance of website.

Nevertheless, you may try all of them to see which offers you the most value & features in terms of performance of website.

Testing the website After Minification

Make sure you’ve optimized your website to the fullest through the use of GTMetrix. The tool will display website score, how big is your files and display the unresolved issues.

Further speed up & optimize your website

In order to speed up & optimize your website further, follow the below instructions.
1. Decreasing the number & size of external resources on your website.
2. Optimize the size of the images you used on your website.
3. Decrease the number of additionally installed plugins/modules /components of website.
4. Decrease any additional / extra features in your site like searches, statistics and others.

Conclusion

In summary, Minify is the process by which needless space or character types are taken off from the code of webpages. These aren’t necessary to operate the code.Further, simply add size to the document. After minification of resources, code will be certainly smaller in size. It means fewer bytes will become transmitted from your own server to your customer’s browsers which makes your website pages load quicker.

Minifing CSS, JS, and HTML data files not only provides advantage to the visitors of websites, it also help webmasters & owners. By minifying your documents you will get advantage by reducing the quantity of data transfer needed. further, files will run quicker in the client’s web browser.By Reducing the size of webpage, It can be loaded very quickly on client browser. In fact, It optimize &  improve user experience on website.

 

 

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!