Wednesday, February 20, 2008

Web Performance Analogy

IBM Page Detailer Basic Version 5.2.6's help file has a very good analogy to help you understand why one page can load faster than another

This is best explained with an analogy. It is a simplification of the argument, but should help you understand why one page can load faster than another. You are a member of a large family. Your relatives love to come visit you for a week at a time. There are several strange traditions (some would call them rules or protocols) that must be followed by all members of your family when moving your relative's belongings into the guest room.
  • The hostess or host (you) must carry all of the belongings into the guest room.
  • The visitor must put all of the things they will need for this visit in the trunk of their car.
  • People in your family may carry only one item at a time. (I warned you the traditions were strange.)
  • Your guest room is up on the second floor.
  • Larger items move more slowly, and have a higher incidence of being dropped (delaying your mission even more), although you have been known to drop even the smallest item at random.

You receive five visitors:

  • You invite Uncle Frank to come visit. Uncle Frank loads his trunk with eight changes of clothes, a bathing suit, toiletries, a picture album, camera, and film. He pulls into the driveway and you go out to greet him. He opens the trunk and tells you which item to take to the guest room first. Uncle Frank feels a little uneasy in your neighborhood, so he closes the trunk each time you leave with an item. Because uncle Frank doesn't believe in suitcases, he has sixty items in his trunk. Uncle Frank must stay by the trunk to lock and unlock it each time you get back for the next item. When you have fetched the last item, he follows you in and you can begin the more important parts of the visit. It will take you at least 60 trips up and down the stairs to get Uncle Frank's things into the guest room.
  • You invite Aunt Lorraine to come visit. She loads her trunk up with enough items for two weeks. Like Uncle Frank, Aunt Lorraine doesn't believe in suitcases either. She does feel a little better about leaving the trunk open for you though. Once she has opened the trunk she will leave it open for you. If someone else comes up to get things, she will close the trunk until she is sure who they are. She waits until the trunk is empty before coming into the house.
  • You invite Uncle Dan to come visit. He believes in suitcases, so he has twenty or so items in his trunk. He doesn't feel like leaving his trunk open and he will wait until the last item is on the way before he comes inside.
  • You invite Uncle Ian to come visit. He believes in suitcases, and is comfortable with your neighborhood. He has twenty something items in the trunk and keeps it open for you but waits until the trunk is empty to come inside.
  • You invite Aunt Joan to come visit. She believes in suitcases, and is comfortable with your neighborhood. She asks you to take in 6 out of the twenty something items in for her, and tells you the rest are not so important and you can get them later. She comes in with the sixth item.

If you care about how long it takes to get the visitor in the house, which relative would you prefer to come for a visit? This is a somewhat unfair narrow focus because it is the visitor's personality and what you can do with, and learn from them that most influences a lasting relationship, but for now we will concentrate on this first part of the visit.

Can you predict which visitor will come inside the soonest? How would the times change if your guest room was on the first floor and the visitor backed their trunk right up to the guest room door so you didn't have to walk at all to unload the trunk? What if your apartment was on the 5th floor with no elevator?

Would having your spouse and children help unload the visitor's trunk, (four at a time) using the same rules, change which visitor would take less time?

We could generalize that in most cases Aunt Joan followed by Uncle Ian would be available to come inside before anyone else, the exception being if Aunt Joan packed extremely heavy suitcases.

We can also say that the closer the car trunk is to the guest room, the less it matters how the trunk is packed. Said another way; the care taken in packing the trunk can have a great influence on how long it takes to get things inside, and matters more as the guest room moves further from the trunk.

OK, so what does this story have to do with IBM Page Detailer? In the analogy above, you are playing the web browser. The visitors are web pages. The car trunk is the web server. And the things in the trunk are the items on a web page. (e.g., gifs or jpeg images, html text, ...). The family traditions are the protocols the web browser must follow to obtain items from the web server. The visitors who close their trunk all of the time are sites that do not keep connections open (see Too Many Connections). And the visitor who comes in after only part of the baggage is loaded, is a page that is useable before the last item is completed.

Many factors go into how a web page should be packaged. It is not possible to generalize about the correct number of items on any page, but if designers limit the number of separate items on a page when possible, the end user will see better performance from your site. An example of a common page improvement is to send a menu as a browser or client-side map instead of a table with individual graphic elements. While the use of mouse rollovers, which dynamically change the displayed GIF, looks interesting, it also means that additional GIFs must be downloaded for the effect to operate differently over each menu item. Eliminating the rollover GIF action can reduce the number of objects required to load the page. There are other similar tradeoffs that can be taken to reduce the number of objects on a page. Most of them, like the example above, trade off some amount of interface function for a reduction in the number of items on the page.

The "side effects" of combining page contents for delivery may be significant too. Your server will require fewer machine cycles to retrieve and deliver your content to the end user. Think of the same number of users hitting your site over a period of time, if each repackaged page requires one half the number of objects, the hit rate your site needs to support is also halved, or the capacity you have for more users in that period increases dramatically, assuming your server and infrastructure can handle the increased content delivery bandwidth required.

The repackaged page also will use a little less network bandwidth. The resources required for eliminated objects are saved. For objects that have been combined, the new object may be smaller than the sum of the parts. The new combined object, if smaller, will require fewer resources to deliver and may take better advantage of TCP/IP delivery windows. The small packets sent back and forth along with the overhead of each item are eliminated. The biggest difference can be seen when the server doesn't keep connections open, when a socks server is involved, or when SSL is being used.

Web designers and developers tend to gravitate close to the web server they are working with for efficiency. Most of them try to be on the same LAN. Real web end users tend to be further away and may be connected via dial-up at considerably slower speeds. The web designer may not see much difference in response time for some of these changes from their viewpoint, but the real end user will see the benefits of a thoughtful repackaging with fewer items for delivery. It is a good Web site development policy that developers should regularly view pages under development by using connections that are typical for the target users.

If the link between the Web server and the browser is saturated all of the time while delivering data (relatively rare with large numbers of items, but possible with slow dial-up links), repackaging may not benefit the end user experience unless the repackaged page becomes useable sooner.

These arguments could be extended to include proxy servers, SOCKS enabled firewalls and SSL, but the lessons remain the same. These extra steps taken in item delivery only amplify the importance of using fewer items on the page.

A closer analogy to item delivery over the Internet may be "move-in day" at the dorm. Hundreds of individuals, with the same goal, get every item from the car into their room in the least amount of time using common elevators, stairs and hallways. One can even envision the lost "packets" in the halls. Even in this chaos, we can understand that having fewer items can help minimize the inevitable delays due to infrastructure saturation.

Labels:

0 Comments:

Post a Comment

<< Home