Meebo performance ny_web_performance

Building Fast 3rd-Party Webapps
Lessons learned from the Meebo Bar

Marcus Westin
follow me @marcuswestin

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

On Twitter:
@marcuswestin and @mghunt

The Meebo Bar
A customizable site bar with real-time social interaction

Meebo Bar, a 3rd Party Webapp
JavaScript, CSS, Images & HTML

Interacts with the page
Loads on every page

How do we make it run fast?
How do we make it respectful?

3rd Party Webapps
The Challenge
Do
Load lots of features
Load features fast

Without
Blocking rendering or onload
Affecting User Experience

How?

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

Initializing 3rd Party Webapps
Inline JS <script src=""> Iframe <iframe src="">
easy for publishers to add load an HTML file in an iframe
blocks the page in all Requires HTML file on the
browsers hosting site

XMLHttpRequests Script Tag
Asynchronous, non- append a script tag using
blocking JavaScript to the head of
same-domain in most the document
browsers Commonly accepted,
but...

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 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?

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

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 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) {}

Defer Execution

Lots of stuff happens in a browser while loading a page

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

Defer Execution Example
In-page sharing

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);
O(N)
}
}
function lookupMetadata(el) {
do {
inspectElement(el)
} while(el = el.parentNode) O(M)
}

O(N*M)

Deferred implementation

function initShare() {
document.on('mousedown', function(e) { O(1)
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);
});
}

Page finishes loading

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,
Site Widgets and other sites
site-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 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)

Use Vector Graphics

Vector graphics are supported
in all major browsers

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

With images

Without images

Tools Techniques
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

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!

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

Questions? (+ ping me on twitter)
@marcuswestin

We need better tools for measuring
webapp performance!

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

Browser Cache
New visitors don't have anything cached!

Browsers can automatically clear cache

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

Meebo performance ny_web_performance

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Meebo performance ny_web_performance

Similar to Meebo performance ny_web_performance (20)

Recently uploaded

Recently uploaded (20)

Meebo performance ny_web_performance