How to minify Javascript (JS), CSS and HTML


If you liked the content, please share the knowledge :)
  • Yum

Minifying JS CSS and HTML

 

What is CSS, JS and HTML Minification?

Minification is basically removing all the data that is not required in order for the file to be executed. It is performed after the code for a web application is written but before that application is deployed.

Thus when a user requests for a web page , the minified version is sent . The minified version requires less bandwidth and results in faster response times.

Minification helps load content faster as the less unnecessary data needs to be downloaded. Also, businesses see lower bandwidth costs as less data is transmitted over network. Businesses also see less resource usage since less data needs to be processed for every request.

It is believed that Minification can improve the time needed to render a page by 60%. It doesn’t compromise users’ experience and help the business make large performance gains.

The minification is done via analyzing and rewriting parts of your website so as to reduce the original size of the file. It is extended to the components like scripts, style sheets and other components that are used by the web browser to render the site.

Unnecessary characters like whitespace characters, comments, line breaks , and block delimiters are removed during file minification.

To distinguish minified files from unminified files , a .min is often included with the file name.

Minification Techniques and tools

Minify is a comprehensive minification tool that handles minification, caching and compression of CSS , HTML, and JavaScript files. Minify also offers integration with WordPress.

HTML Minification

PageSpeed Insights Chrome extension has been provided by Google which recommends performance improvements to any website. It provides a minify HTML rule which generates a minified version for open website.

CSS Minification

We have a CSS Minifier, which is a quick and simple way to minify CSS. We also have Refresh-SF, which uses multiple tools to minify CSS, HTML and JavaScript. As CSS doesnt change that frequently these online tools provide us with instant CSS Minification.

JavaScript Minification

Closure Compiler is a JavaScript optimization tool that is provided by Google. It creates a more efficient copy of and JavaScript file. It minifies the code and the new file after minification is pushed to web server where the user can access it.

Minifying CSS, JavaScript and HTML in WordPress

Here are certain WordPress Plug-ins that will help you minify your CSS, HTML and JavaScript files.

  • W3 Total Cache

Many WordPress users use this plug-in to increase their web PageSpeed. This plug-in offers a feature to Minify CSS, JavaScript and HTML files. As it serves both the functions, it is highly recommended.

  • Autoptimize

The plugin works very well and has a very simple user interface.

The plug-in combines multiple CSS, multiple JavaScript files into one CSS and JavaScript file and does the minification. This helps us reduce the HTTP requests and improves the PageSpeed.

 

  • WP Fastest Cache

This plug-in is really helpful as it helps in minifying JavaScript, CSS and HTML files along with Browser Caching

 

  • Fast Velocity Minify

This is another good plug-in . This plug-in has multiple uses, apart from minifying CSS, JavaScript and HTML files, it also offers features like deferring JavaScript and CSS files and Gzip Compression.

 

If you are only interested in minifying the files and not concerned about the extra features, then for minification you can use:

 

  • Better WordPress Minify
  • WP Super Minify

 

 

 

 

 

 

Example of Minification:

 

Normal Code

<html>

<head>

<style>

#myContent { font-family: Arial }

#myContent { font-size: 90% }

</style>

</head>

<body>

<!– start myContent –>

<div id=”myContent”>

<p>Hello world!</p>

</div>

<!– end myContent –>

</body>

</html>

 

The same code 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>


If you liked the content, please share the knowledge :)
  • Yum

Leave a comment

Your email address will not be published. Required fields are marked *