Faster HTML! Why not?

Although I’ve read so many articles about web page optimization there’s not so much about optimizing HTML.

Why?

Maybe because nobody things that the HTML source of a page can be optimized or the optimization of it cannot bring some benefit to the page load experience. I don’t thing so. If something can be optimized, even if this does not give you so much, why you shouldn’t do it?

How to optimize such thing as HTML?

Well there are few things you should do and other that can speed up a little bit but you should not.

1. Enable gzip

What is gzip? Well in breve everything the server generates is sent back to the client in text format. You’ve to possibilities to send it. Either compressed or uncompressed. As you may guess the compressed format is a lot faster than uncompressed. In fact to make it work that way you’d need to enable gzip which is supported by the web server. In the case of Apache web server this can be done by enabling mod_deflate. Take a look of mod_deflated and mod_inflate. This two modules gives you the possibility to make your site a lot faster and the good news is that this is done without a single line change. The bad news, as always there’s a bad news, is that sometimes this cannot help a visitor, simply because his browser doesn’t support such corresponding with the server. According to a research I’ve read recently almost 15% of the web browsers doesn’t support gzip. Sometimes the reason is old browser versions, sometimes because the state policy doesn’t allow it. However this is the first thing you should do to speed up your HTML even it is not related directly to HTML scripts. By the way this will speed up everything which is sent back to the client, especially CSS and JavaScript files and in the case of JavaScript this can improve dramatically the user experience.

2. Use div elements instead of tables when possible.

This is the second thing you can do to speed up your site. The simple reason to do that is because the DIV element doesn’t need so much markup as a TABLE element. When widely used in a page – imaging thousands of tables this can be a disaster. Remember the first thing is to make the text you send to the server as small as possible. In that point I should say that not only the tables to div switch is enough. Always prefer smaller tags and constructions. This is a bit difficult. Some experienced web developers can construct the same page with less HTML markup than newbies, but that depends of your level of experience.

3. Make it ugly – just to spend some space.

Your code is beautifully organized and when viewing the source everyone is excited! That was a mistake I used to make in my early projects. Why we thing somebody will take a look of the source code? Why we thing somebody’s using view-source option? Because we’re sick minded web developers. Nobody cares about your well organized source code. Normal users don’t look at it! Forget about beauty! As you may remember – you should spend all the extra spaces you send to the browser. Well if well organized the source code is full of tabulations, new lines and spaces. This is not good! Well if gzip is enabled they may be spent to the client, but if not? Stop writing beautiful HTML. The first task is to make it readable and maintainable.

4. Don’t use inline styling

This cannot be cached by the browser, is difficult to maintain and is – ugly! Yeah don’t use inline styles it makes your markup larger, which yet again is bad and is difficult to maintain. Write everything in CSS files, include them from the outside and setup only the classes you need.

5. Make it maintainable

Although its important to make the HTML as small as possible, sometimes that means to make it as ugly as possible and that brings the enemy number one – unmaintainable code. After a while the change of that code is technically impossible. So use all these techniques with something in mind – make it maintainable even if that will sacrifice some optimization benefits.

Leave a Reply

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