Over a million developers have joined DZone.

The Effect of HTML Compression on Speed and User Experience

DZone's Guide to

The Effect of HTML Compression on Speed and User Experience

Free Resource

Transform incident management with machine learning and analytics to help you maintain optimal performance and availability while keeping pace with the growing demands of digital business with this eBook, brought to you in partnership with BMC.

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.

Evolve your approach to Application Performance Monitoring by adopting five best practices that are outlined and explored in this e-book, brought to you in partnership with BMC.


Published at DZone with permission of Shiv Kumar Ganesh. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}