The Effect of HTML Compression on Speed and User Experience

DZone 's Guide to

The Effect of HTML Compression on Speed and User Experience

· Performance Zone ·
Free Resource
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">
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
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.

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 Shiv Kumar Ganesh . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}