How To Compress Your HTML And JavaScript For Faster Website Loading Times

It seems that, as internet connection speeds get faster and faster, we get more impatient. There is a now a load of research to prove this. In 2009, research done Akamai found that users became impatient when they had to wait more than 2 seconds for a page to load.Since then, we’ve raised our expectations – today, 30% of users say they expect sites to load in under one second.

For this reason, reducing loading speeds on your website is more important than ever. There are a number of ways of doing this, of course. You should make sure that you are using images that are the right size for your site, and also that your web host can keep up with the size and traffic of your site.

One thing that is often overlooked nowadays, however, is the code on which your website runs. In the 1990s, coders used to optimize and minimize their code instinctively, because inefficient HTML would take an age to load. Today, because most of us do our coding through visual editors, and some never look at the code they are generating at all, the science and art of writing efficient code has been somewhat lost.

If you haven’t looked at your HTML and JS code for a while, I’ve got news for you. Even lines breaks, indentations, and extra spaces in your code can introduce significant latency into your website, to say nothing of poorly written scripts and multiple-call headers.

You’re in luck, though. Here are two approaches to minimizing your HTML and JS code.

1. Do It Automatically

There are now a whole host of online tools that will automatically minimize your code for you. Popular sites include JavaScript Compressor, CSS Compressor, and HTML Minifier. These essentially work by deleting out white space and indentations, and can make your code significantly smaller and faster.

But. To my mind, the problem with these tools is that they can make your code pretty hard to read. It depends on your coding style, of course, but if you like to leave notes for yourself, the code that these tools spits out can be difficult to work with.

2. Do It Manually

By which I mean “properly”! If you’ve got the time and expertise, , a few hours spent optimizing your code can bring significant improvements, even if it is only deleting the unnecessary white space from you HTML. Some hosting companies like Siteground will offer to do this as a free service.

Going through your code manually has several advantages. You can strike your own balance between readability and minification, you might catch some inefficiencies that are invisible to automated systems, and ultimately you will learn more about how your site actually works by doing it this way.

And it need not be that time-consuming, either, as long as you prioritize the files you look at. JS is particularly guilty in this regard, and I recommend looking at any JS file that is larger than 4096 bytes as a candidate for minification.

You can then move on to smaller files, and gradually improve the speed, efficiency, and perhaps even beauty, of your code.