Gmail: Latest News from the GMail Blog Thursday, 22 May 2008

« Factory Aspect, Added to a Decorator: APE.getById | Main | JavaScript Trends »

There is a new feature on the GMail login page: Gmail: Latest News from the GMail Blog.

I first noticed this last month when the GMail login page was reacting very slowly. The page froze for about 6 seconds in Firefox. I noticed the missing content in the lower left corner of the page appear immediately before the page unfroze, allowing me to then enter in my login credentials.

The latest News from the GMail Blog update is:

A need for speed: the path to a faster loading sequence

Posted May 13, 2008

Great performance has always been an obsession at Google and it's something that we think about and work on everyday. We...

The GMail blog talks about how the GMail team worked to reduce the number of overall requests, make more of the requests cacheable by the browser, and reduce the overhead of each request.

HTML Source

The HTML source code of the GMail login page contradicts that with:

  • three external script tags, loaded over a secure connection
  • fourteen img tags
  • twelve inline script tags,
  • four inline style tags, inline style attributes.

One of the external script tags is duplicated, but with a different query string, so even though the response is the same DetectBrowser code, it is un-cacheable and downloaded twice (bug).

Two of the script tags (urchin.js, inline) use javascript to document.write more external script and image tags.

This is all beautifully wrapped up in a nested, automatic table layout (not fixed).

Biggest Bottleneck

Despite the resource problems, the News from the GMail Blog on the GMail login page appears to freeze Firefox for roughly 1-6 seconds, depending on latency and connection speed.

This feature is slow because the page isn't completely rendered until the external JSON is downloaded, then transformed to HTML, then rendered on the page.

Solution?

News from the GMail Blog should be included in the server response for the login page, as HTML (if it is to be included at all).

Blog entries about acheivements are useful when they are informative and specific. This:

To do this, we used a lot of different web development tools, like Httpwatch, WireShark, and Fiddler, plus our own performance measuring systems

Comes off as a bit self-aggrandizing; especially in contrast to the source code of the GMail login page.

Technorati Tags:

Posted by default at 2:40 PM in JavaScript