Meebo performance ny_web_performance

Building Fast 3rd-Party Webapps

(a replay from O'Reilly Velocity conference 24 June 2010)

On Twitter: @marcuswestin and @mghunt

Lessons learned from the Meebo Bar

Marcus Westinfollow me @marcuswestin

The Meebo BarA customizable site bar with real-time social interaction

Meebo Bar, a 3rd Party Webapp

How do we make it run fast?

Loads on every pageInteracts with the page

JavaScript, CSS, Images & HTML

How do we make it respectful?

3rd Party WebappsThe Challenge

DoLoad lots of featuresLoad features fast

WithoutBlocking rendering or onloadAffecting User Experience

How?

Meebo Bar embed codeexecutes in ~10ms

no blocking network requestsno dependency on our server

less than 1200 charactersgzips to about 700 bytesembedded directly in page HTML or JSexecutes even if our servers are not reachable

Initializing 3rd Party Webapps

Script Tagappend a script tag using JavaScript to the head of the documentCommonly accepted, but...

Inline JS <script src="">easy for publishers to addblocks the page in all browsers

XMLHttpRequestsAsynchronous, non-blockingsame-domain in most browsers

Iframe <iframe src="">load an HTML file in an iframeRequires HTML file on the hosting site

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

Don't block the page!

Script Tag Appendcan block scripts in Firefox!

blocks other scripts in Firefoxscripts execute in orderall 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?

Iframed JS

1. Iframes load HTML, not JS2. Cross iframe communication

is same-domain only (non-HTML5 browsers)

3. Window onload event fires after all iframes load

Iframed JS - the solution var iframe = document.createElement('iframe'), doc = iframe.contentWindow.document; doc.open().write( '<script>function loadJS() { ... }</script>' + '<body onload="loadJS()">') doc.close()

More About Iframesiframe creation overhead?

Creating one DOM nodeChrome < 1msFirefox, Safari ~1msIE ~5ms

Sandboxed JavaScript

3rd party code will not break webpage codeWebpage code will not break 3rd party code!

for (var i in x) {}

Defer Execution

Defer Execution

Lots of stuff happens in a browser while loading a page

Then, relatively little happens... Take advantage of this!

Defer Execution ExampleIn-page sharing




Naive implementationfunction 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)

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

Modularize & Lazy Loadusers don't need all features immediately

1-1 Messagingconnect to all the

IM networks Broadcastingpublishers send new

content to usersSocial Networkingreceive updates aboutyour friends' activities Sharing

share site content to Facebook, Twitter, Buzz,

and other sitesSite Widgetssite-specific widgets:

videos, menus, navigation tools, etc.

Modularize & Lazy Load

Also applies to images and CSS!

Careful:Loading images can create

a lot of HTTP requests

Loading ImagesSpriting and preloading is hardStill creates additional HTTP requestsDifficult to automate

Embed images into CSS insteadDataURIs and MHTML filesDetails on the Meebo devblog (http://mee.bo/cssimages)

Use Vector Graphics

Vector graphics are supported in all major browsers

Firefox 3+Opera 9.5+IE 6+Safari 3+Chrome

Without images

With images

How to initialize a webappAsynchronous & non-blocking

Defer ExecutionMinimize impact when loadingCSS and ImagesCrush, Combine, Avoid Perceived PerformanceTesting and psychology

Tools Techniques

Perceived PerformanceQuick 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!

Questions? (+ ping me on twitter)

@marcuswestin

HighlightsAlways compress and minify contentUse an IFrame to load the main script payloadDefer execution until neededDefer content download until neededRemove HTTP requests by combining content

Embed images into CSSUse vector graphics

We need better tools for measuring webapp performance!

Need to accurately determine the impact of a webapp on a website

Browser CacheNew visitors don't have anything cached!

Browsers can automatically clear cache

Yahoo! YUI study:40-60% of Yahoo!'s users have an empty cache20% of all page views have an empty cache

Technology

Meebo performance ny_web_performance