"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Meebo performance ny_web_performance
1. 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
2. The Meebo Bar
A customizable site bar with real-time social interaction
3. 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?
4. 3rd Party Webapps
The Challenge
Do
Load lots of features
Load features fast
Without
Blocking rendering or onload
Affecting User Experience
How?
5. 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
6. 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...
7. 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
8. 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?
9. 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
11. 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) {}
18. 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)
19. 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
20. 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.
21. Modularize & Lazy Load
Also applies to
images and CSS!
Careful:
Loading images can create
a lot of HTTP requests
22. 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)
23. Use Vector Graphics
Vector graphics are supported
in all major browsers
Firefox 3+
Opera 9.5+
IE 6+
Safari 3+
Chrome
25. 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
26. 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!
27. 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
28.
29.
30. We need better tools for measuring
webapp performance!
Need to accurately determine the
impact of a webapp on a website
31. 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