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 🙂

Calendar with Auto-Notification : API and demo.

I was quite impressed with the Google Calendar, Yahoo Calendar and Outlook implementation of the same and wondered how exactly is it done? What are the challenges? So I thought of making a clone of one of them and see if I am able to achieve the same level of perfection.

I must say my 1 day of work did indeed brought some smile to my face as I could see my application running and rocking. Here is it, try out for yourself and Let me know if it worked for you. You can even use it for your day to day needs, my server is up and running forever 😉

Click to visit the Calendar API Demo Page

Important before you try it out:

  1. It will ask you for Email Id and Password.
  2. Give your personal email id where you want to receive event’s notification.
  3. Password can be anything, which you can reuse to login.
  4. It will send out an email to your email id above 30 minutes before the event start
  5. For eg. If you marked an event for 26th July, 2008 – 06:00 PM. You will receive a mail notification of the same at 26th July,2008 – 05:30 PM.
  6. There must be atleast an hour gap between your event time and the moment you are marking it.

STEP 1:



STEP 2:



STEP 3:

Thats it, try out. Works for me perfectly. Let me know about your feedbacks.

Thanks
Abhinav

Photo Cropper API: How is it achieved?

Photo Cropper was something which was introduced or I must say became popular after various social networking sites started applying it. This allows users to choose a section from a photo which he wants to upload and show to the world around.

I initially tried to investigate how Orkut do this for their users. Further I took a look at API’s provided by YUI for the same purpose. After investigating a few other sources of photo  cropper I finally decided to build a photo cropper with an approach used by orkut.

I will further explain the algorithm used in more details later, but before that let us have a look at what I have been able to come up with.

Currently configured only for FireFox Mozilla and Flock (Not IE)

Click here to visit the demo section of this API.

Algorithm

  • The upload form is a clone of gmail type attachment, where as soon as you select a file on your system. The upload starts automatically. I have explained and provided open source codes for the same one of my previous posts. Click here to read more on how to achieve this. Gmail Type Attachment Clone
  • Hence as a user selects a file for upload, it is submitted for upload into an iframe. In the iframe I have a file called ajax.php, whose one of the functionality is to save the selected file on the server.
  • After the upload is complete I do the following processes.
    • Hides the upload box.
    • Using iframe, open the uploaded file into a DIV on the parent page. See the source of the page to know more  and inspect the DIV named cropdiv. Basically I set the uploaded image into this div through a javascript function which is invoked from the iframe.
    • After you have opened up the uploaded image, main challenge is how to get the dashed rectangular selection region working. This dashed selection region is the one which users will use to select the section of image which they want to actually show up after upload.
    • For this purpose I have used a method similar to Orkut. To start with I create a dashed DIV of width and height half of the original uploaded image. Also I place this Selection DIV at top left corner and sync it up with the background original image. 
    • Biggest thing which I wondered before making this application was, as user moves the selection region how to ensure that he gets the corresponding section of the image inside the selection region. For this Orkut plays a big trick. They use another image on top of the original underlying image (which is transparent). This second image is knows as proxy image. Now as user shifts the selection DIV x pixel to the right and y pixel to the bottom, I simply move this proxy image x pixel left and y
      pixel top. Hence fooling the user around. User never gets to know if their were two images involved in the process.
    • Once you are done with selecting the portion of choice. I simply sends the top,left position of the selection div and new height and width of the selection div to the server using ajax. Ajax.php again handles this call which takes the parameters and crop the original image accordingly.
    • Finally once the we have our cropped image, we display the same to the user.
  • Another interesting thing which you can do is, allow user to tag the photo after he has cropped the image. I have provided an open source API for tagging photo in one of my previous posts here. Photo Tagging API

As promised before all this will officially be made open source with the API package i am currently working upon. Meanwhile if you really need this currently for your website or blog, feel free to contact me for the same.

If you liked this post kindly digg the same and thanks for shouting it out to your friends.


Creative Commons License

This work is licensed under a
Creative Commons Attribution-Share Alike 2.5 India License.

iGoogle Portal Implementation: How to do it?

After developing the draggable div application the other day, I was itched to implement the whole iGoogle portal. Probably the drive came when a few of you asked me “These draggable divs are just like iGoogle”, so I thought why not to give a shot at it.

Here is what I was able to come up with while sitting idle at the office. I have shown 3 tabs for making it look more of a realistic demo. However only the news tab is operational as of now. Feel free to drag and drop any of the news box to any corner of the page and rest of the boxes will make place for it. 🙂

Find the implementation of this application here.

Basically it proved out to be a derivative of the previous application i.e. draggable div. However this one is a bit more modular, will easily fit into any changes made to the tabs and tab names or what ever.

Feel free to post a comment or two at the blog here.

Finally make your portals like iGoogle 😛

Draggable DIVs : How to make one?

You all must have seen a similar thing on your iGoogle home page. Further for years this application is an integral part of Yahoo User Interface Library i.e. YUI. I tried to tweak into the iGoogle and YUI implementation of the draggable div implementation, but somehow I found them rather too complex to understand. Hence I thought of better write a short application and see if I can do the same magic. 🙂

Here is what I came up with. Still not modular enough, I coded everything as per the requirements for this demo. Probably in future I should be able to come up with a modular stuff to let others use the same.

Click for the demo here.

Basically it proved out to be much simpler as it looked. However if you have observed and used YUI, they have a concept of proxy element for the same implementation. Basically what proxy allows you is, while you are dragging the DIV, it doesn’t actually moves the original DIV. However it simply creates a proxy DIV, which will be visibily move when we try to move the DIV.

Feel free to post a comment or two here. 🙂

Happy dragging!

Photo Tagging API : Easy plugin for your websites and blogs

Flickr, Facebook and now Orkut. One by One everyone has implemented the photo tagging feature into their social network. Initially introduced by Flickr, extended by Facebook and finally Orkut was forced to implement it too.

Last night I tried to look into it to found out what does it take to make one and I was able to comeup with something like this. Probably a little different from the one’s implemented by others in the sense that you just have to do the first click and then the second click, and you are done. No mouse-press and drag thing needed.

Now without much of a talking, lets first see a demo of how it works and then probably I will write a few words on how to implement the same:

Note: How it works? Unlike Facebook and Orkut, I have implemented this in a little different manner. You just need to click once, and then no need to keep your mouse pressed. Freely move to the another place and click again and thats it, you have selected your photo tagging area and ready to tag it.

Feel free to play with the demo here.

Drawbacks: However the drawback of this phototagging API is that if someone has tagged the photo using a monitor which have a different screen resolution than yours, then probably you might not see the tag exactly at the right place. This bug exists in Facebook too, haven’t checked with Orkut yet.

Feel free to leave a comment or two.

Also feel free to discuss any flaws which you may find in the implemented API above. I am completely open for suggestions for improvement.

Happy Photo Tagging.

Gmail Type Attachment – How to make one?

Google and its wide range of web applications have simple changed the way we used to look at internet. Be it the revolutionary fast Google search engine or mail by Google i.e Gmail. You will find enormous amount of threads and forums discussing How do google achieve doing XYZ? or How do they make it happen fast and efficiently?.

One of the most talked about thing about Gmail is probably how do they achieve making Gmail so simple, convinient, sober, fast and easy. One of the Gmail’s feature which contribute hugely in making it easier and faster for users is: Its ability to attach your files while you are writing your mail.

I have tried to come up with an exact clone for gmail attachment. Kindly click here for the demo and the source files.

This is achieved by using an iframe which contains your server side script responsible for handling uploads. As soon as the user select a file to upload, the upload form gets submitted to upload.php, which lies in an iframe. Hence at no point does the user leaves the page and still he gets his file uploaded. Find attached below all the files you need to implement this on your server. Just unzip the file on your server, and you are ready. All the uploaded files will go in th upload folder by default. You may change that in upload.php.

Feel free to post a comment back here for any queries etc.

Cheers !