2. Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June 2010 [email_address] [email_address] Lessons learned from the Meebo Bar Martin Hunt and Marcus Westin
3. The Meebo Bar A customizable site bar with real-time social interaction
4.
5.
6.
7.
8. Initializing 3rd Party Webapps Script Tag append a script tag using JavaScript to the head of the document Commonly accepted, but... Inline JS <script src=""> easy for publishers to add blocks the page in all browsers XMLHttpRequests Asynchronous, non-blocking same-domain in most browsers Iframe <iframe src=""> load an HTML file in an iframe Requires HTML file on the hosting site
9.
10.
11.
12. Iframed JS - the solution var iframe = document . createElement ( 'iframe' ), doc = iframe.contentWindow. document; doc. open (). write ( '<body onload="appendScriptTag()">' ) doc. close ()
24. Loading Images Spriting and preloading is hard Still creates additional HTTP requests Difficult to automate Embed images into CSS instead DataURIs and MHTML files Details on the Meebo devblog (http://mee.bo/cssimages)
25.
26.
27.
28.
29.
30.
Editor's Notes
MARCUS Martin & Marcus We're here from Meebo commonly known as meebo.com today: Meebo is better known for the Meebo Bar
MARCUS What is the Meebo Bar? Well, if you have a site, then you can add the Meebo Bar to your site and gain a number of features, such as social IM, sharing, ad revenue and more. The Meebo Bar launched almost 2 years ago. Since then we've gone through 9 major iterations, and will soon be releasing Version 10. It will be the most technically advanced and best performing version of the bar as of yet. Since it's launch, the Meebo Bar has grown to more than 6000 websites and reaches more than 130 Million people every month The Meebo Bar lives inside of the hosting site. Because of its vast reach, it is crucial that the Meebo Bar does not slow down the site that it is on. If it does, than we slow down a significant portion of the web.
MARCUS The Meebo Bar is a 3PWA. With 3PWA we mean javascript, css, images and HTML loaded onto a stie from a third party provider. 3PWAs commonly interact with the page, and often load on every page The question is then how do we make it run fast? How do we make it respectful of its hosting environment?
MARCUS More specifically, the challenge is to Load lots of features Load those features fast Without Blocking rendering or onload and Without affecting the user experience in a negative way. How can we do that? Martin knows alot about how we can do that
MARTIN You're already familiar with some tools - CDN - GZIP - PNG Crush We'll cover some tools & techniques you're probably not familiar with Traditional 3rd Party Web App loading blocks - this is bad Defer code execution to not affect load time Optimize graphics and reduce image network requests Finally, we'll talk about deferring
MARTIN Meebo Embed Code
MARTIN Concerns Blocking page rendering Blocking network traffic Execute quickly and return control of the browser Only one piece of JS can run at a time! Should not depend on your servers
MARTIN http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
MARTIN Concerns Blocking page rendering Blocking network traffic
why might you not want to use an iframe? there are several problems that you might notice
Out sample code for Loading asynchronous and nonblocking javascript same-domain iframe with access to parent page without blocking parent onload
MARTIN iframe creation times are insignificant iframes guarantee sandboxing of your javascript
MARCUS Lots of things happen in browser during load Parse, DOM, Layout, Render Then, realtively little happens As 3PWA developers we should take advantage of this! Let's look at an example
MARCUS Any page with the Meebo Bar can have its videos, images and links made sharable by drag and drop. This means that when the page loads...
MARCUS This means that when the page loads, the Meebo Bar scans the page for images, videos and links, and make them sharable When the user hovers...
MARCUS When the user hovers over a sharable image, we display a drop shadow to indicate that this image is sharable by drag and drop On mouse down...
MARCUS On mouse down, we display the Meebo Share UI, which allows the user to share the image to a number of social networks and any buddy in the buddy list. For each sharable item, Meebo infers the title, thumbnail and URL from the page. We allow for the site to specify these attributes on any parent node of a sharable element. Let's look at a naive implementation of this functionality
MARCUS In this implementation, we loop over all elements that should be made sharable, look up the metadata for that element, and attach a mousedown event handler to that element lookupMetadata in turn climbs the DOM of the sharable element and inspects all parent nodes for metadata. Now, we want elements on the page to be made sharable right away, so we run this during page load. A complex page can easily have tens of images and hundreds of links. Processing them all during loading of the page becomes noticable on all web browsers. Formally, the runtime of this approach is O(N * M), where N is the number of sharable elements and M is the number of ancestors of the sharable elements. Using the concept of deferred execution, we can do better.
MARCUS The key to the concept of deferring is do as little as possible up front, and delay as much of the execution until as late as possible. In this example, we attach a single mousedown event handler to the entire document. Now, whenever the user does a mousedown, we check to see if the element the user moused down on is a sharable element. If it is, then go ahead and infer the metadata, and attach the remaining event handlers required for the drag and drop share UI This way we can go ahead and set up sharing right away during load without interfearing with the loading of the page. Formally, the runtime of this algorithm is constant on load, and linear when the user mouses down on a sharable elements. Both are unnoticable in all browsers.
MARCUS That's a lot of code! And CSS and images! Break them down by features and load the code when the user needs it
MARTIN
MARTIN
MARTIN SVG & MHTML Meebo Bar - Chrome - Gradients - Drop shadow - No Images!
MARTIN (overview slide)
MARTIN We need better tools for measuring webapp performance!
![Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June 2010 [email_address] [email_address] Lessons learned from the Meebo Bar Martin Hunt and Marcus Westin](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)