![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](https://image.slidesharecdn.com/buildingfastwebappsfastlessonsfromcreatingthemeebobarpresentation-110105155402-phpapp02/85/Building-fast-webapps-fast-Velocity-2010-2-320.jpg)
![Accepted script loading code var head = document . getElementsByTagName ( 'head' )[ 0 ], el = document . createElement ( 'script' ); el. src = "http://www.myDom.ain/myScript.js" ; head. appendChild (el); good: cross domain (we're 3rd party content!) good: doesn't block network traffic](https://image.slidesharecdn.com/buildingfastwebappsfastlessonsfromcreatingthemeebobarpresentation-110105155402-phpapp02/85/Building-fast-webapps-fast-Velocity-2010-9-320.jpg)
![Naive implementation function makeSharable(elements) { for (var i=0; i < elements.length; i++) { var element = elements[i]; var metadata = lookupMetadata(element); element.on('mousedown', startDrag, metadata); } } function lookupMetadata(el) { do { inspectElement(el) } while(el = el.parentNode) } O(N) O(M) O(N*M)](https://image.slidesharecdn.com/buildingfastwebappsfastlessonsfromcreatingthemeebobarpresentation-110105155402-phpapp02/85/Building-fast-webapps-fast-Velocity-2010-20-320.jpg)
![Questions? [email_address] [email_address] Highlights Always compress and minify content Use an IFrame to load the main script payload Defer execution until needed Defer content download until needed Remove HTTP requests by combining content Embed images into CSS Use vector graphics](https://image.slidesharecdn.com/buildingfastwebappsfastlessonsfromcreatingthemeebobarpresentation-110105155402-phpapp02/85/Building-fast-webapps-fast-Velocity-2010-29-320.jpg)
Building fast webapps, fast - Velocity 2010
- 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. Meebo Bar, a 3rd Party Webapp How do we make it run fast? Loads on every page Interacts with the page JavaScript, CSS, Images & HTML How do we make it respectful?
- 5. 3rd Party Webapps The Challenge Do Load lots of features Load features fast Without Blocking rendering or onload Affecting User Experience How?
- 6. 3rd Party Webapps: How? How to initialize a webapp Asynchronous & non-blocking Defer Execution Minimize impact when loading CSS and Images Crush, Combine, Avoid Perceived Performance Testing and psychology Tools Techniques
- 7. Meebo Bar embed code executes in ~10ms no blocking network requests no dependency on our server less than 1200 characters gzips to about 700 bytes embedded directly in page HTML or JS executes even if our servers are not reachable
- 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. Accepted script loading code var head = document . getElementsByTagName ( 'head' )[ 0 ], el = document . createElement ( 'script' ); el. src = "http://www.myDom.ain/myScript.js" ; head. appendChild (el); good: cross domain (we're 3rd party content!) good: doesn't block network traffic
- 10. Don't block the page! Script Tag Append can block scripts in Firefox! blocks other scripts in Firefox scripts execute in order all scripts on the page block until the appended script downloads and executes (defer attribute supported in FF3.5+) blocks onload event in all browsers are there alternative nonblocking methods?
- 11. Iframed JS Iframes load HTML, not JS Cross iframe communication is same-domain only (non-HTML5 browsers) Window onload event fires after all iframes load
- 12. Iframed JS - the solution var iframe = document . createElement ( 'iframe' ), doc = iframe.contentWindow. document; doc. open (). write ( '<body onload="appendScriptTag()">' ) doc. close ()
- 13. More About Iframes iframe creation overhead? Creating one DOM node Chrome < 1ms Firefox, Safari ~1ms IE ~5ms Sandboxed JavaScript 3rd party code will not break webpage code Webpage code will not break 3rd party code! for (var i in x) {}
- 14. Defer Execution
- 15. Defer Execution Lots of stuff happens in a browser while loading a page Then, relatively little happens... Take advantage of this!
- 16. Defer Execution Example In-page sharing
- 17. Defer Execution Example In-page sharing
- 18. Defer Execution Example In-page sharing
- 19. Defer Execution Example In-page sharing
- 20. Naive implementation function makeSharable(elements) { for (var i=0; i < elements.length; i++) { var element = elements[i]; var metadata = lookupMetadata(element); element.on('mousedown', startDrag, metadata); } } function lookupMetadata(el) { do { inspectElement(el) } while(el = el.parentNode) } O(N) O(M) O(N*M)
- 21. Deferred implementation function initShare() { document.on('mousedown' , function(e) { var el = e.target || e.srcElement if (!el.getAttribute('meeboSharable')) { return; } var metadata = lookupMetadata(el); document.on('mousemove' , handleDrag, metadata); document.on('mouseup', stopDrag, metadata); }); } O(1) Page finishes loading
- 22. Modularize & Lazy Load users don't need all features immediately 1-1 Messaging connect to all the IM networks Broadcasting publishers send new content to users Social Networking receive updates about your friends' activities Sharing share site content to Facebook, Twitter, Buzz, and other sites Site Widgets site-specific widgets: videos, menus, navigation tools, etc.
- 23. Modularize & Lazy Load Also applies to images and CSS! Careful: Loading images can create a lot of HTTP requests
- 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. Use Vector Graphics Vector graphics are supported in all major browsers Firefox 3+ Opera 9.5+ IE 6+ Safari 3+ Chrome
- 26. Without images With images
- 27. Tools - use them! Preprocess if possible if multiple clients are doing the exact same task, run it on the server generate content offline Compilers Closure Compiler Profilers DynaTrace (IE) Speed tracer (Chrome) Firebug (FF) Safari 5/WebKit
- 28. Perceived Performance Quick loading content on a slow page appears to be the cause of the slow page Delaying interface drawing can look slow or broken Do not forget: Even asynchronous loading slows down a page. Keep payloads minimal and always monitor performance!
- 29. Questions? [email_address] [email_address] Highlights Always compress and minify content Use an IFrame to load the main script payload Defer execution until needed Defer content download until needed Remove HTTP requests by combining content Embed images into CSS Use vector graphics
Editor's Notes
- #3: MARCUS Martin & Marcus We're here from Meebo commonly known as meebo.com today: Meebo is better known for the Meebo Bar
- #4: 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.
- #5: 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?
- #6: 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
- #7: 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
- #8: MARTIN Meebo Embed Code
- #9: 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
- #10: MARTIN http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
- #11: MARTIN Concerns Blocking page rendering Blocking network traffic
- #12: why might you not want to use an iframe? there are several problems that you might notice
- #13: Out sample code for Loading asynchronous and nonblocking javascript same-domain iframe with access to parent page without blocking parent onload
- #14: MARTIN iframe creation times are insignificant iframes guarantee sandboxing of your javascript
- #16: 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
- #17: 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...
- #18: 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...
- #19: 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...
- #20: 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
- #21: 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.
- #22: 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.
- #23: 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
- #25: MARTIN
- #26: MARTIN
- #27: MARTIN SVG & MHTML Meebo Bar - Chrome - Gradients - Drop shadow - No Images!
- #28: MARTIN (overview slide)
- #29: MARTIN We need better tools for measuring webapp performance!
- #30: MARTIN