2. Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June 2010 marcus@meebo-inc.com martinh@meebo-inc.com 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 o Defer Execution Minimize impact when loading CSS and Images Crush, Combine, Avoid Perceived Performance Testing and psychology ToolsTechniques

7. Meebo Bar embed code executes in ~10ms o no blocking network requests o 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 easy for publishers to add blocks the page in all browsers XMLHttpRequests Asynchronous, non- blocking same-domain in most browsers Iframe 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 1.Iframes load HTML, not JS 2.Cross iframe communication is same-domain only (non-HTML5 browsers) 3.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(' ') doc.close()

13. More About Iframes iframe creation overhead? Creating one DOM node o Chrome < 1ms o Firefox, Safari ~1ms o 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. 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

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? marcus@meebo-inc.com martinh@meebo-inc.com 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 o Embed images into CSS o Use vector graphics