Successfully reported this slideshow.
Your SlideShare is downloading. ×

Meebo performance ny_web_performance

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 31 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Meebo performance ny_web_performance (20)

Advertisement

Recently uploaded (20)

Meebo performance ny_web_performance

  1. 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. 2. The Meebo Bar A customizable site bar with real-time social interaction
  3. 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. 4. 3rd Party Webapps The Challenge Do Load lots of features Load features fast Without Blocking rendering or onload Affecting User Experience How?
  5. 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. 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. 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. 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. 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
  10. 10. 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()
  11. 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) {}
  12. 12. Defer Execution
  13. 13. Defer Execution Lots of stuff happens in a browser while loading a page Then, relatively little happens... Take advantage of this!
  14. 14. Defer Execution Example In-page sharing
  15. 15. Defer Execution Example In-page sharing
  16. 16. Defer Execution Example In-page sharing
  17. 17. Defer Execution Example In-page sharing
  18. 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. 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. 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. 21. Modularize & Lazy Load Also applies to images and CSS! Careful: Loading images can create a lot of HTTP requests
  22. 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. 23. Use Vector Graphics Vector graphics are supported in all major browsers Firefox 3+ Opera 9.5+ IE 6+ Safari 3+ Chrome
  24. 24. With images Without images
  25. 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. 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. 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. 28. We need better tools for measuring webapp performance! Need to accurately determine the impact of a webapp on a website
  29. 29. 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

×