Download - Meebo performance ny_web_performance
![Page 1: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/1.jpg)
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
![Page 2: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/2.jpg)
The Meebo BarA customizable site bar with real-time social interaction
![Page 3: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/3.jpg)
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?
![Page 4: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/4.jpg)
3rd Party WebappsThe Challenge
DoLoad lots of featuresLoad features fast
WithoutBlocking rendering or onloadAffecting User Experience
How?
![Page 5: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/5.jpg)
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
![Page 6: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/6.jpg)
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
![Page 7: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/7.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
![Page 8: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/8.jpg)
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?
![Page 9: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/9.jpg)
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
![Page 10: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/10.jpg)
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()
![Page 11: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/11.jpg)
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) {}
![Page 12: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/12.jpg)
Defer Execution
![Page 13: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/13.jpg)
Defer Execution
Lots of stuff happens in a browser while loading a page
Then, relatively little happens... Take advantage of this!
![Page 14: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/14.jpg)
Defer Execution ExampleIn-page sharing
![Page 15: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/15.jpg)
Defer Execution ExampleIn-page sharing
![Page 16: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/16.jpg)
Defer Execution ExampleIn-page sharing
![Page 17: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/17.jpg)
Defer Execution ExampleIn-page sharing
![Page 18: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/18.jpg)
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)
![Page 19: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/19.jpg)
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
![Page 20: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/20.jpg)
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.
![Page 21: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/21.jpg)
Modularize & Lazy Load
Also applies to images and CSS!
Careful:Loading images can create
a lot of HTTP requests
![Page 22: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/22.jpg)
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)
![Page 23: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/23.jpg)
Use Vector Graphics
Vector graphics are supported in all major browsers
Firefox 3+Opera 9.5+IE 6+Safari 3+Chrome
![Page 24: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/24.jpg)
Without images
With images
![Page 25: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/25.jpg)
How to initialize a webappAsynchronous & non-blocking
Defer ExecutionMinimize impact when loadingCSS and ImagesCrush, Combine, Avoid Perceived PerformanceTesting and psychology
Tools Techniques
![Page 26: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/26.jpg)
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!
![Page 27: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/27.jpg)
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
![Page 28: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/28.jpg)
![Page 29: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/29.jpg)
![Page 30: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/30.jpg)
We need better tools for measuring webapp performance!
Need to accurately determine the impact of a webapp on a website
![Page 31: Meebo performance ny_web_performance](https://reader033.vdocuments.us/reader033/viewer/2022051617/55a3d32c1a28ab106a8b476b/html5/thumbnails/31.jpg)
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