Google, Bing, Yahoo and many other search engines evaluate your website on the page load speed. Not only search engines, but your visitors also evaluate your site, and the bounce rate also depends on your websites page load speed. If it is very slow, your visitor will bounce back from your site too early. However, if it is good, then surely your visitor will move around on your site. Moreover, a website has tons of files that contains HTML, JavaScript, CSS, etc. and want these codes to be as clean and fast as possible in the least time. These codes contain the comments, formatting, extra white space that your computer doesn’t need to execute the code. However, it could be easily fixed by minifying your code, and that is what we would be discussing today. How to Minify and Optimize Your Website CSS, HTML and JavaScript?

Tip: 11 Amazing CSS Tools You Should Be Using

What does minify means?

It is a program that removes unnecessary characters that are not required to execute the code. This technique helps a lot to speed up the page loading process, thus making search engines and visitors happy with your site.

What Minify does?

  • It removes the comments,
  • New line characters.
  • Blocked Delimiters.
  • White Space Characters.

And any other unnecessary things that are not required to run the code on the website. These characters help increase the readability to the code. However, they don’t play any part in its execution. Interpreted languages that run mostly on Internet like CSS, JavaScript, HTML etc. may slow the speed, but minifying them can help a lot.

Speed Comparison

Ads

You can easily test the speed of website pages through some free online tools. Google PageSpeed is a free resource.

PageSpeed Tools

PageSpeed Tools

To test the speed, you need to paste the URL only to get the result. The tool displays the result in a couple of seconds. However, it is important to improve your website before you check the speed. As every site is different from the other, the before result might be 80, and the after score might be 90. These tools display the score for mobile and desktop separately. When results are shown, the tool also tells you how to improve certain things on your site to improve its speed.

Minifying vs. Compression

Both are different from one another. Compression means that the data which is compressed must be un-compressed before it could be run. However, the minified code could be run as it is. The interpreter on which the code is executed could easily understand the original code.

Gzip for HTML

It is one of the most popular and effective compression methods, and was developed by GNU project and standardized by RFC 1952. It reduces response size by 70% and supports for more than 90% of today’s web browser. It also reduces the page weight, the ultimately increases the speed. Many plugin use Gzip for HTML compression.

How you can do it manually?

Many tools help you to minify code manually. There are a number of free tools available, and you simply copy and paste the code to and from the side.

How to do by Hand?

Well it is not a recommended technique as it may cause many errors. So, let us check out an example to minify the code by hand.

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
  • Firstly you need to remove comments, it is the text between and including the /**/.
  • Next remove the unnecessary spaces. You need to remove all the spaces expect between the (0 0 0 0). It is a part of CSS function so the code needs this. In case you don’t know which space to remove, you can do it with the help of minifying tools.
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

So, for your easiness, here are some tools that work offline for minifying the code.

1) Closure Tools

Closure Tools

These tools were developed by Google Developers and include many tools that help to speed up JavaScript code.

Closure Compilers

Closure Compilers

It is a JavaScript optimizer and it rewrites the code and minimized the dead space. This allows downloading quicker. Moreover, it also check the syntax, variable, references and types. Moreover, it will warm about common JavaScript issues as well. This will make the code less buggy and easier to maintain.

Closure Linter

Closure Linter

Every team at Google that writes JavaScript also uses Closure Linter. It quickly checks issue like operator placement, missing semicolons, spacing etc. Moreover, it also debugs the code and contains all necessary codes to run.

Closure Stylesheets

Closure Stylesheets

It concatenates and minified a list of stylesheets. Moreover, it makes a vendor specific stylesheet. These include Mozilla, Opera, Microsoft, Konqueror and Webkit. Whenever the vendor’s flag is present the vendor specific properties for other vendors would be removed.

CSS Minifier

CSS Minifier

It is a great online and free tool from Dan’s Tool and helps remove spacing, indentation, comments and new line from CSS code and helps make website faster. You simply need to minify the code. When the code is minified, copy it again and paste it back.

Tip: 21 Useful Minify JavaScript Tools For Web Developers

A list of some other minifying tools contains:

JavaScript Minify Tool

JavaScript Minifier

Some JavaScript and CSS compressors available online include the:

  • Smaller that helps to load your website faster.

Smaller

Online JavaScript CSS Compressor

How to minify dynamically using the Plugins

As already mentioned, codes can also be minified automatically using many plugins. WordPress makes all steps automated for you, by simply uploading plugin, activating it and finally using them.

1) Better WordPress Minify

Better WordPress Minify

It combines and minifies the CSS and JavaScript files and improves the compatibility with other plugins by making use of WordPress’s enqueueing system.

2) Assets Minify

Assets Minify

It is a free plugin that helps to minify JavaScript and CSS. It does not contains any complex setting to deal with. Once you choose handful of setting, you can simply choose whether or not to compress script and files.

3) WP Super Minify

WP Super Minify

It quickly compresses CSS, HTML and JavaScript and has fewest setting. You have the option to compress or not to compress the JavaScript.

4) WP Minify Fix

WP Minify Fix

It might be an older plugin, but is a great free source to enable compression of HTML, CSS and JS files.

Final Verdict

It is very important that your site loads faster and user browses it with ease. The best way is to minifying the unnecessary code from your website and improve the page loading speed, especially when you are on shared hosting.

LEAVE A REPLY