How to make faster websites and enhance your site user experience – Part 1

In all my posts till now I concentrated over how to get started with web development and related introductory stuffs. In next few posts (series of 3 posts), I will write some of my learning in the field of “How to make your website faster and enhance your site user experience”.

So lets assume I made a site, which rocks with all those web2.0 features in it. But still my user complaints like:

  1. My site hangs their browser while loading.
  2. The page takes too long to load.
  3. Blah Blah Blah…… 🙁

So how to go about and make sure that you do your best to make things rocking. Here are a few of my tips on things that you should concentrate upon and which will definitely help in fast loading of your pages:

  1. GZip your site static content: This is one of the most important stuff which helps a great deal in enhancing your site download speed. Let me explain the process:
    • When I type www.yahoo.com in my browser and press enter, an interaction starts between my browser and the www.yahoo.com servers. My browser asks for the yahoo.com homepage from the yahoo servers. However all Grade-A browsers sends a few useful stuff along with this homepage request. They tells the server that I support gzip encoding, and if you serve me the contents in g-zipped format I will happily except it, unzip at my end and render it for the user.
    • The Yahoo server sees these headers being sent by the browser and depending upon its configuration it gzips the content before serving back to the browser. However, if Yahoo server’s are not configured for the gzip encoding, it will server the content in its raw form. Further, if Yahoo server’s are configured for gzip encoding but my browser isn’t a Grade-A browser, servers are smart enough to return back the content in the form which suits my browser.
    • For instance here are the request header sent by my browser to the yahoo servers when I type in http://yahoo.com in my browser:

      In the above image we can very well see that my browser sends in a header saying Accept-Encoding : gzip,deflate. On seeing this in the headers Yahoo server responds as expected i.e. it serves back the gzipped contents to the browser.

      In the above image we see the response headers being sent by the Yahoo server to my browser. We can see that Yahoo server tells back my browser that it has served the contents in Content-Encoding : gzip , so please unzip them at your end before rendering them for the user.

      So how does the end user’s experience gets enhanced?

      If we see the above image we can very well see that the Yahoo homepage which is actually of 125.1Kb comes in as 31.9Kb only. Further the javascript files gets compressed and hence faster data transfer through the channels and thus faster experience for your site users.

      Though gzipping the site content increases your server side CPU load, but that gets compensated by the fast that users are able to see your pages load faster.

    • What all contents should I gzip? Its always better to gzip the javascript files, CSS files, HTML files, Plain Text files (In some cases XML’s too but I have had a few problems with gzipped XML’s). We generally don’t compress images, pdf’s etc as they are already in best compressed format and further compressing won’t give us any smaller file sizes.
  2. Setting an ETag for your sites content: This is another factor which helps the page load faster for the users. By setting up an ETag , server sends an information about the contents being served to the browser, telling the browser about its last modified date. So when I type in http://yahoo.com in my browser and presses enter, my browser requests for content from the Yahoo servers. In reply if it sees that the ETags haven’t changed for the requested component, it simply uses the component from browser’s cache. Hence this time we saves the data transfer part, as browser is capable enough to cache enough static data from one single domain.

    In the above image Yahoo servers doesn’t reply back the ETags possibly because of two reasons. Advertisements and Expires Headers which we will see in the next point. As Yahoo have advertisements on all their pages, they simply don’t want those contents to be cached by our browsers. So that everytime we open yahoo.com , we see a new advertisement. (Experts, Kindly correct me if I am wrong in my explanation here)

  3. Setting up the Expires headers: This factor even saves the browser pinging the server time.

    In the above image we can see Yahoo servers setting up an expire header telling the browser that, this component is not going to change before the setup expired header. Hence next time you type in Yahoo.com in your browser and press enter, browser sees the content which still haven’t expired and picks them up from the browser cache. Thus they don’t even ping the servers, saving your servers BW and enhancing your users page load time.

    What if I have setup expired headers 2 months from today and I want to change the content before that?
    Simple enough, next time in place of http://l.yimg.com/us.js.yimg.com/lib/bc/bc_2.0.4.js will be change to something like http://l.yimg.com/us.js.yimg.com/lib/bc/bc_2.0.5.js ,  i.e. changing the version of the javascript file being served from server side. Hence browser will be forced to download the new javascript file from the servers rather than using them from the cache.

  4. Use of sub-domain or different domain for serving static contents: We can very well see in the above image that Yahoo serves all its javascript files from a server called http://l.yimg.com which is supposedly one of its static server. But why the hell do I need to do this? This is because currently all Grade-A browsers allows 2 parallel connections to a host. i.e while loading a page yahoo.com, my browser can download only two files at a time from the yahoo yahoo.com server. Hence this will make other contents to go in queue, wait for the already downloading contents to finish before they get downloaded.

    Hence for the same reasons, we generally server our static content from one or more different sub0domains or full-domains all together. In future Internet Explorer 8 and Firefox are planning to increase this 2 requests per domain to 4-8 requests per domain.

  5. Minify your Javascripts and CSS files: What is minify? It was something developed and introduced by Douglas Crockford. Minifying your sites javascripts and CSS files two purpose at the same time. They decreases the size of your javascripts and CSS files and also hides (make it tougher to parse by others) your javascript calls. I minified javascript file will look like this:

    We can see it makes the size of javascript file by eliminating unwanted white spaces and blank lines. Plus it also makes it difficult for a hacker to tweak in the javascript file.

  6. Put CSS on top and JS at the bottom , avoid inline javascripts: By putting CSS on top ensures that user’s browser will render the page content for your users as and when it gets the HTML content. We want to put Javascripts at the bottom and avoind inline scripts, because while the page loads we do not want browser to start executing the contents in javascripts, which may create a lock time for other contents before they gets downloaded.

Thats it! There are a lot of other things which you may want to do, for making your site page load faster. But the above described 6 points dominates the page load time. I am no expert and still learning the tid-bits of scalable websites, hence if you find any mis-leading content , kindly leave a comment. I will be more than happy to edit the post.

PS: These are a few of the frontend things that we can do on the frontend to make our sites faster. In my next post of this series I will try to bring in the key backend things which can help in faster loading of the webpages.

Enjoy making cooler, faster webpages for your users 🙂