Increase Page Rendering Time by Reducing HTTP Requests

Yahoo has shown the results of research, using packet sniffers, showing that download and rendering time is due almost entirely to HTTP Requests.

No less than 60-95% of the response "time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets)."

The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

EDIT: 4/17/2007

If a web page evenly distributed its components across two hostnames, the overall response time would be about twice as fast.

Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane

The Importance of Sketching

I'm a big fan of sketching ideas and consider it to be a key design skill. One of its many benefits is that stakeholders and project managers and salespeople are comfortable recommending changes. The know that it is "nothing but a sketch." However many people I speak to say "never show a sketch to a client" and, I have to admidt, that many times I think they are correct; especially when the stakeholder says "why are you showing me sketches?"

Stakeholders often times feel that they are wasting their time looking at sketches and don't particular warm up to the idea that making more "presentable" representations take time (hence money). They like the idea of not wasting money but they feel that it is the designer who should "waste his time" making things presentable as opposed to them "wasting their time" reviewing sketches. Too many stakeholders do not understand the value of a sketch. The question, I suppose, is "how do we change this perception?"

Another benefit of a sketch is that it helps to put a form, a face if you will, to the idea that's floating around the room. We all may be talking about the same thing but the image we each have is different (sometimes very, very different). Sketching out the concept allows us to be focusing upon the same idea AND often times generate multiple leads from what was originally thought to be one idea.

And yet another value of sketching its that it functions as a recording of design ideas. It's a story board of when the idea(s) were formed and often are themselves the springboard to new ideas.

Lurkers and Commenters

Jakob Nielsen has an interesting new article in his AlertBox. The jist of the article is that "a tiny minority of users usually accounts for a disproportionately large amount of the content."

In most online communities, 90% of users are lurkers who never contribute, 9% of users contribute a little, and 1% of users account for almost all the action.

So, what can be done about this? How can the site owner increase user participation? The short of it, according to Nielsen, is that you can't.

I have found that posts that have comments get more comments. It seems as people are more tempted to respond to comments than the original post; or posts with comments than posts without any comments.

EDIT 12/20/2010:

Sysomos also found that 80.6% of Twitter users have made fewer than 500 tweets, which likely points to the relative newbie status of the average Twitter user. Also noteworthy is that 22.5% of users are responsible for 90% of all tweets.

It will be interesting to see what happens over time - do Twitter stats start converging to the expected 90-9-1 spread?

Text Resizing Widgets

Is it good practice to place Text Resizing Widgets on your page or should the user change font-size through their browser?

Lately, I've had people tell me that they doubt the utility of the text-resizing widgets; that people who don't know how to resize fonts through their browser would not be able to recognize or use text-resizing widgets. I can't stand this position that people should change font-size only through their browser - and that if users aren't using their browser to change font-size it can only mean that they are ignorant.

Some argue that resizing widgets requires Javascript which is not always enabled. It's true that Javascript is not always enabled but session-variables and client-side cookies can be used as well.

I don't see the rational in spending time showing your readers how to change text-size via their browsers after all would they even see or click the link explaining the process if they wouldn't see or use the text-resizing  A A A.

It is simpler and easier for most users to adjust text-size on a particular site via an icon than using keyboard commands. Of course CTRL/CMD +/- is simple too but there is more than one way to do things. There is no harm in providing visual clues in interface design - or would you like to get rid of GUIs and go back to UNIX and use Vi or EMACS for your wordprocessing?

Finally a lot of text-resizing problems comes from designers who reduce the size of text, concerned as they are with the visual impact rather than the utility aspect of the site.

Sprites What are they good for?

I never particularly cared much for them. I had nothing against them. I personally (unlike others) found having all the images in one graphic file easier to maintain; and yes it was less of a server hit but I never had a time, until now, where I found sprites to be indispensable.

I have a complex image: an intertwined pie-chart that highlights as different parts are rolled over. And now - I have a use for sprites. I cannot see how this user interface could have been accomplished without sprites. One can even imagine, that with javascript, one can display different information based on other factors than simply the mouseover.

For example a class name could be added to the div (via server-side script) based on almost any factor and then different information could be shown to different users (or even the same user) as needed.

This user interface is for the marketing department of a well-know company. It displays the course work and tests necessary for employees a variety of certification. So class names can be appended to the div; and javascript can display different text as needed. Example: If user has completed course X then show "Completed" elseif show "In Progress" else "Not Started".

Is a coding problem, bookkeeping, or some other nonsense getting you down?

A psychiatrist visited a California mental institution and asked a patient, How did you get here? What was the nature of your illness?

He got the following reply:

Well, it all started when I got married and I guess I should never have done it. I married a widow with a grown daughter who then became my stepdaughter. My dad came to visit us, fell in love with my lovely stepdaughter, then married her. And so my stepdaughter was now my stepmother. Soon, my wife had a son who was, of course, my daddy's brother-in-law since he is the half-brother of my stepdaughter, who is now, of course, my daddy's wife. So, as I told you, when my stepdaughter married my daddy, she was at once my stepmother!

Now, since my new son is brother to my stepmother, he also became my uncle. As you know, my wife is my step-grandmother since she is my stepmother's mother. Don't forget that my stepmother is my stepdaughter. Remember, too, that I am my wife's grandson.

But hold on just a few minutes more. You see, since I'm married to my step-grandmother, I am not only the wife's grandson and her hubby, but I am also my own grandfather. Now can you understand how I got put in this place?"

After staring blanky with a dizzy look on his face, the psychiatrist replied: Move over!

Notes working with Rhythmyx

Rhythmyx takes the developer’s code, strips it, and then recompiles it. Think of it as having Front Page reedit your page after you’ve written it and not allowing current coding standards. You have to go back to 1999 technology, using tables and transparent gifs. Yukk. Furthermore Rhythmyx strips away much of the white space making comments close to useless.

Label your images, even where SEO is not an issue, in order to have a reference point when you searching for a piece of code. Usually it’s easier to copy and paste the code back into your text editor of choice; make the changes; and then copy and paste it back into the Rhythmyx.

Rhythmyx adds width and height to <img src=""> tags whether or not you put it into the source code. However, if you change the size of the image (without changing the name) Rhythmyx does not automatically change the width and height in the <img src=""> tags. You need to go back into the source code and do that yourself.

Rhythmyx does not let developers add stylesheets; nor can one add anything to the head; nor can one use includes of any kind, including javascript includes.

One cannot use classes or ids of any kind. One can use <DIV>s but everything must be inline and one cannot use absolute or relative positioning of ANY kind.

One can add padding and margins to <DIV>s but NOT to images.

The editor is really bad. To link a graphic one selects it and selects a link icon, then input (or search) for the link. However there is no indication given should the icon already have a link attributed to it. So, if you link again, a new link gets added to the existing one. For example:

<a href="xxx"><a href="yyy"><a href="zzz"><img src=""></a></a></a>

and sometimes a <a href=""></a> thrown in at the end for good measure.

I don’t want to judge Rhythmyx solely from one experience with it, especially since we weren’t working with any Rhythmyx reps but I don’t have any warm fuzzies for it. Everything, from big issues such as speed, to smaller issues such as the pop-up windows being too small and having to scroll down to be able to select the form buttons are irritants.

EDIT: 5/8/2005

Spoke to someone from Rhythmyx. It seems as if the overwhelming majority of their users do not bring in designers and developers to work on their subsite. Thus the stripping of whitespace has not been a concern, nor was the absence of absolute and relative positioning.