Performance Zone is brought to you in partnership with:

I am a Software Engineer and a keen enthusiast of Semantic Web technologies. I am a regular speaker at JUG Chennai and also have contributed to many open source projects. I am also the community lead of Lotico Semantic Web Chennai. Shiv Kumar has posted 9 posts at DZone. You can read more from them at their website. View Full User Profile

The Effect of HTML Compression on Speed and User Experience

09.05.2013
| 2591 views |
  • submit to reddit
HTML compression: the first time I talked to a person regarding this he or she laughed at me, CompressionRather, it was a whole team of he's and she's. ;) Anyway, I gave it thought and Googled a bit to find out whether there are fools like me thinking about such knave stuff. Then I realized that, yes, there are bigger fools than me who are working tremendously for user experience and faster websites. Now let's get back to the topic of HTML compression. Let's see two HTML snippets and then compare their performance depending upon the different scenarios.

Sample HTML (225 Bytes)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>
<body>
Compressed HTML (142 Bytes)

<!DOCTYPE html><html><head><title>My first styled page</title><style type="text/css">body{color:purple;background-color:#d8da3d}</style><body>
From the above code we can see the considerable amount of change in the size of the page as well as the fact that the HTTP request would take less time to fetch the HTML page. Hence, an improvement in speed. Now let's consider a scenario in which the CSS is also externalized and the cache has been enabled in the HTTP headers. So now if we try to see the size of the content it would be:

CSS Externalized (103 Bytes)
<!DOCTYPE html><html><head><title>My first styled page</title><link rel="stylesheet" src="x.css"><body>
Now, if the page is large, then consider the efficiency you gain with this small effort. This was just a small trick of the trade.There are many such things that could be done in order to increase the deliverability of the payload.

Externalizing
JavaScript
As per my assumption, there are many projects where people just scribble JavaScript cluelessly into the HTML page, destroying the speed of the view. This also hampers the efficiency of the page. This article clearly shows how externalizing the scripts, styles and compression of the HTML helps to speed up the website. Let me know your opinions about HTML compression. You can try out compressing any HTML document and check the change in the file's size at HTML Compressor. Here you can see the way HTML shrinks.  
Do leave a comment if you find this interesting. 
Note: The HTML code mentioned above is junk code taken from some random website just to portray the sample.
Published at DZone with permission of its author, Shiv Kumar Ganesh. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)