Saturday, February 16, 2013

HTML Compression Leads to Great Speed


HTML Compression Leads to Great Speed

HTML Compression, the first time I talked to a person regarding this he/she laughed at me, Rather it was a team of He and She ;) . Anyways I gave it a thought and Googled out a bit whether are there fools like me anyways thinking about such a knave stuff and then I witnessed "Yes There are bigger fools than me who are working tremendously for User Experience and Faster Websites" . Now lets get back to the Topic "What is HTML compression anyways ?"
Lets see two HTML Snippets and then Compate their performance depending upon the different scenarios. The Below mentioned code is
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 we could see the considerable amount of change in the Size of the page as well as the HTTP request would take lesser time to fetch the HTML page. Hence improvement in Speed.
Now lets consider a scenerio where 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 Byte)
<!DOCTYPE html><html><head><title>My first styled page</title><link rel="stylesheet" src="x.css"><body>
Well now if the page is large then consider the efficiency you gain with this small effort. This was just a small trick in the trade.There are many such things that could be done in order to increase the deliverable of the payload.
Externalizing JavaScript (Haven't showed calculations)
As per my assumption there are many projects where people just scribble JavaScript clueless 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 and styles and compression of the HTML helps to speedup the website. Let me know your views regarding the same.
Note: The HTML code mentioned above a junk code taken from some random website just to portray the sample. Content is original.

No comments:

Post a Comment