Quick Transitions

Today Facebook launched a beta feature it calls ‘Quick Transitions.’ This feature supposedly results in faster load times for Facebook Platform Application canvas pages. It somehow uses Ajax to load them which keeps the browser from having to do a full page refresh to render the Facebook UI elements that surround every canvas page (like the Chat and Application menu, navigation bar, and ads, etc.)

I wanted to see what effect, if any, enabling this feature had on one of our popular Facebook applications, Doorbell. Since this application has over 300k active users a free speed boost sounded just fine with me!

First, to enable the feature go to the Application Settings for your app and click on the Canvas tab. You’ll see a set of two radio buttons at the bottom of the page labeled ‘Quick Transitions.’ Click the ‘On’ button. That’s it. If your application is iframe-based you have to also edit the URLs that govern page transitions. Here’s a shot showing where to turn it on:

Enabling Quick Transitions for a Facebook Application

Yes, But Does it Work?

In a word, no, at least not for me. Could it be the code? Perhaps. We use Facebook’s tab control to navigate between the canvas pages in our application currently. This could be the issue.

Server access logs show that the correct pages are being loaded;  however, the tab for the page never changes nor does its content load. The browser (Firefox, latest) simply sits there with an hourglass. It’s still responsive, but the canvas page content never shows. Noticed that Facebook passed along a few new GET variables as well, but they also appear to be modifying the URL for each tab’s link.

For example, here’s the link to our rankings page:

http://apps.facebook.com/myapp/?page=rankings&_fb_fromhash=xxxxx

The link changes after quick transitions are enabled. Here’s what my server’s access log shows (and it’s serving the content up perfectly: I get a 200/OK status code for it):

myapp/#/myapp/?page=rankings&_fb_fromhash=xxxxx&quickling[version]=xxxxx%3B0&nectar_impid=xxxxxx&nctrct=xxxxx

…and here’s the link that shows up in the browser’s address bar:

http://apps.facebook.com/myapp/#/myapp?page=rankings&_fb_fromhash=xxxxx&_fb_q=1&_fb_qsub=apps.facebook.com

I’d like to get this working to test how big a speed improvement you can expect to see on your canvas page loads. I know the feature is in beta so I’ll keep this post updated with my findings as I get them…