1. Web Standards to Measure Real-world Performance [slides]
- by Tony Gentilcore (Google) & Anderson Quach (Microsoft)

They explained a bit about the Web Performance Working Group and jumped straight into the implementation of it in Chrome and IE9.
The three key things that will be available as per the spec are:

1. HTML document : Navigation Timing
2. HTML resources: Resource timing. e.g Images, audio, video, etc.
3. Interactive scenarios: clicking on links

Navigation timing[spec]:
The events that will be available as part of this spec are summarized in this image below:

Navigation timing overview

Demo
Security, performance constraints, determining apps in the background and change polling behavior are some other things they spoke about.

2. Above the Fold Time: Measuring Web Page Performance Visually[slides]
- by Jake Brutlag (Google)

This is a completely new area in performance for me and something very interesting. As Jake defines in his slide, ATF(Above the Fold Time) is “Time when content that stops changing and is above-the-fold reaches its final state.”

AFT brings a new set of metrics to look at and can take web page optimization to a whole new level. Imagine a site optimized for better AFT v/s a site optimized for better Page load time.
I wont go into the details of how the AFT is calculated, why 5 sec is taken as a cutoff time, etc. All those details and more are mentioned in his slides.
What I am excited about is that this feature is already available in WPT(http://www.webpagetest.org/). Go to the video tab and enable AFT.

Once the test is complete(it will take a min of 4 mins, so be patient), the AFT stats and images are available in the  summary view. I ran a test on Y! search & here are the results. Go to the screen shot link on the top nav and see the AFT details image.
All of the AFT technology and implementation are part of webpagetest and is available to download at http://code.google.com/p/webpagetest/.

3. Introducing Next-gen YSlow [slides]
- by Betty Tso (Yahoo!) & Marcel Duran (Yahoo!)

Note: YSlow for Chrome is now available for download.
Marcel spent a few minutes on how the current YSlow is designed, and the MVC pieces of it. He also mentioned the limitations of the Chrome plugin sandbox architecture and how YSlow for chrome uses cross domain ajax.

The BIG announcement for the day was YSlow for all browsers(IE, Opera, Safari, etc.), including mobile and tablet browsers. It’s not an Add-in, it’s a Javascript bookmarklet.
This version of YSlow is powered by HTML, CSS & YUI for building the view. JS, HTTP headers and YQL is used for the controller. The bookmarklet opens an iframe and injects the HTML contents of the Doc into it. YQL is used to process component headers  & generate results.

Note: This version of YSlow will be available in early April. (The attendees of the conf. had a sneak peek at this). As per Marcel, it works & works just like YSlow for Chrome.

• The data generated  by YSlow will be available in a YQL open table
• A new Mobile friendly interface will be launched  - powered by YUI
• Jdrop integration (more about that later)
• Will be Open sourced soon – on Git
• Multi lingual support

If you have any question, ask them here at the exceptional-performance group.

In my opinion, stick to the Firefox version of YSlow, it gives the most accurate & correct value compared to other options.

4. Visibility into Mobile Performance [slides]
- by Steve Souders (Google)

Steve’s talk was more interesting as it contained demos, demos and demos.
1. Blaze.io (http://www.blaze.io/mobile/)
Blaze.io is for mobile browsers what webpagetest.org is for desktop browsers. Blaze.io has taken the webpagetest source code and modified it to run with iOS and Android  browsers.
It let’s you view the HAR file of the transaction.  Here’s a sample of Blaze.io run on Yahoo! mobile
Other than that, it even records a video of how the page renders & loads in the selected mobile browser. Now that is awesome.

Problems with this approach: It considers data: URIs as separate HTTP requests (as shown by Steve in his Demo)

II. pcapperf (http://pcapperf.appspot.com/)
Let’s you convert .pcap files to HAR files. He explained how we can get the waterfall chart for a mobile browser.
a. Set-up internet sharing on your mac (Ethernet to Wifi)
b. connect your  mobile device to the computers Wifi hotspot
c. start network sniffing tool (wireshark or tcpdump) and capture traffic sent to the wireless interface.
d. save .pcap file and upload to URL mentioned above. That will give you a HAR file.

This procedure is explained  in detail over here.

Limitations of this approach: This method wont consider the actual bandwidth of the mobile user, e.g 3G or edge(Since we are running a test using ethernet -> Wifi).
Also, it wont take into account changes done by providers to images and other elements of a page.

III. Jdrop (http://jdrop.org/)
Jdrop allows users to store JSON on the cloud. It was mainly built to store performance data gathered from mobile devices.
You need to sign in to Jdrop, get the  bookmarket and visit any mobile page and run ‘DOM monster’(other applications will support Jdrop soon), DOM Monster will then let you export the data it generates to Jdrop, which can be viewed on a desktop. Steve has made some data public on Jdrop for others to view it. The data is organized with information like Browser type, Application that exported data & website. Jdrop also let’s you view and export the HAR file.

Get the mobile bookmarklet demoed by Steve from here.

Overall this was a great improvement compared to last years Velocity Online Conference. Kudos to the organizers for keeping it short and interesting.

Both the URLs google.com and google.com.cn use a 302 redirect to redirect traffic to Google HK and that’s perfectly fine. The redirected URL doesn’t look clean, not only is it NOT clean, I have a feeling they use URL GET parameters to keep track of some statistics.

Here’s how a sample header looked like:

URL: http://www.google.cn/

GET / HTTP/1.1
Host: www.google.cn
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Cookie: --removed for good--

HTTP/1.1 302 Found
Location: http://www.google.com.hk/url?sa=p&cki=PREF%3DID%3D024bad9e5afabff3:U%3D957ffb38d60fef2f:FF%3D2:LD%3Dzh-CN:TM%3D1269345133:LM%3D1269345324:S%3DokxQi9JZRpNOay9b&q=http://www.google.com.hk/&ust=1269345354859186&usg=AFQjCNGD11Zf8ak_X-V_y6RPXiFMeHqUQg
Cache-Control: private
Content-Type: text/html; charset=UTF-8
Date: Tue, 23 Mar 2010 11:55:24 GMT
Server: gws
Content-Length: 459
X-XSS-Protection: 0

Most of it is pretty boring stuff, but check the Location URL again. I tried hitting the URL a couple of times and it looks like Google is using a very lazy way to keep track of the users redirected from Google china to Google HK.

ust = User Stats?

I looked at the traffic for a few minutes and here are the numbers I got. All of them in pretty sweet increasing order.

1269345163308698
1269345240966267
1269345306123236
1269345354859186
1269345574993411

This could be real or just something I got completely wrong

Setting up a site

Setting up friend connect on my blog was pretty simple. Added two files to my web server, filled up a couple of forms and done.

Adding gadgets

Right now there are only few gadgets available, gadgets are categorized into member gadgets(#2) and social gadgets(#5). The member gadget looks very similar to the MyBlogLog widget.

Anyone having a Google Id, Yahoo! Id, AIM Id or OpenID can connect with a site through the member gadget.

As of now I have added two gadgets(members & wall) to my blog. Not sure if they’re gonna stay here for a long time

Other than adding gadgets, there are more options like moderate posts, members & a very basic graph showing the user activity on the site, all these options are available for site admin only.
As of now friend connect looks very simple with less features and a handful of gadgets. The quality of gadgets will tell how much of an impact friend connect can make.

[tags]google, friend, connect, opensocial, beta, social, networking[/tags]

But why?
Most of the first 7-8 themes I tried out are either too dull or way to bright for my eyes. None of them do a great job at differentiating old & new messages from my inbox. Everything looks the same, what’s the use of all these themes which don’t highlight the difference between unread and read mails.

Anything weird?
Oh yes, but this has nothing to do with the new themes gmail has launched (I guess so).
I noticed that gmail loads eight 8×8 pixel images on the gmail home page. I don’t see those images being used anywhere. The other possible reason I can think of is tracking.
If tracking is all what gmail wants then why not use a 0.04KB (1×1 px) image instead of using a 0.14KB (8x8px) image.

Is gmail b0rked?
Yes it is! A blog post was pending on this one for a long time now.

Try adding a contact to your contacts list in the gmail standard view (with or without chat enabled).
Go to contact’s, click on ‘New Contact’ icon on top left & done.

Here’s the best part.
Now switch to  basic HTML mode (this mode get’s enabled when a uses is on a slow connection by default).
and now try adding a contact to your contacts list.
Go to contacts, and then what? where is the option to add a new contact.
It’s really funny to see that gmail doesn’t have the most basic feature of adding a contact in basic HTML view. FAIL.

Please leave a comment if you figure out a way (or when gmail fixes this) to add contacts in gmail from the basic HTML view.

Gmail get’s away with these small but important features by sticking a ‘BETA’ sticker on it’s logo every time.

[tags]google, mail, gmail, themes, b0rked[/tags]

Download chrome

If you’re looking out for the feature list, you might just go read it here.  I’ll try and list some of the things which didn’t work as expected(at least for me).

Corp URL?

I hit the known product issues URL just to check for any document issues. Bling bling, two redirects and boy there you go, I hit some google corp url.

Collect statistics

Collect statistics option is turned on by default, you might just wanna turn this option off for security reasons.

JavaScript console

The JavaScript console looks neat, but only to know that it doesn’t work as I thought it would. It worked only for the first time I launched chrome.</oops!>

Google gears

Chrome has built in support for gears.

Shortcuts

Enter about:memory in the address bar to see memory used by chrome and other open browsers (if any).
about: will give built information about chrome.

There is a javascript debugger, javascript console and a task manager in the developer section.
With all said, I must say ‘It’s Nice’.

Oh! and this whole new theme change and thingy happened last evening.