Improve HTML page loading time

I cannot stress enough the importance of compression while loading html pages. One of the web applications (struts, weblogic implementation) I worked on was experiencing slowness while loading a search results page. The page used to take about 4 seconds to display (assume pure static content for the sake of this discussion) The page size was 638K! and there was no way I could reduce the amount of “visible” information.

Couple of things I observed and implemented which really helped cut 2 seconds of the page loading time. I am sure a lot is infrastructure dependent i.e : how stressed the network is etc. but there are things which are under developer’s control which we can leverage to improve page loading time.

Observation #1 :
The jsp had a for loop, which contained td style=”font-family: “Trebuchet MS”;font-size: 12px;color: #797b7a;font-weight: normal;” …. /td

I. e. : if the loop iterates for 500 times, that is the number of times “font-family: “Trebuchet MS”;font-size: 12px;color: #797b7a;font-weight: normal;” gets repeated.

Simple Solution :
Put this in css, refer that css in your jsp and change the td to . Huge reduction in generated html size. Instantly!

Point to note is : less number of characters used in the html (especially in a for loop) the better it is.

Observation #2 :
The page after it was built was not compressed. Even after the above change, the page was about 350K.

Simple Solution :
All browsers now support gzip compression. Add a filter at web.xml level and compress your html content before it hits the wire. A *huge* size savings here. The page size was reduced to 17K! while over the wire.

The effort to compress at the server level and decompress at the browser level takes much less time as compared to transmit 350K over the wire.

Many thanks to Jason Falkner for his excellent article on this. Completely agree with him to make the compression as part of a must-do for any web application

This entry was posted on 21 Jun 2008 at 16:29 and is filed under Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or trackback from your own site.