Building Fast 3rd-Party Webapps   Lessons learned from the Meebo Bar                     Marcus Westin                foll...
The Meebo BarA 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 pa...
3rd Party Webapps        The ChallengeDo  Load lots of features  Load features fastWithout  Blocking rendering or onload  ...
Meebo Bar embed codeexecutes in ~10ms   no blocking network requests   no dependency on our serverless than 1200 character...
Initializing 3rd Party WebappsInline JS <script src="">    Iframe <iframe src="">easy for publishers to add   load an HTML...
Accepted script loading codevar head = document.getElementsByTagName(head)[0],el = document.createElement(script);el.src =...
Dont block the page!Script Tag Appendcan block scripts in Firefox!blocks other scripts in Firefox   scripts execute in ord...
Iframed JS1. Iframes load HTML, not JS2. Cross iframe communication   is same-domain only (non-   HTML5 browsers)3. Window...
Iframed JS - the solutionvar iframe = document.createElement(iframe),  doc = iframe.contentWindow.document;doc.open().writ...
More About Iframesiframe creation overhead?  Creating one DOM node      Chrome < 1ms      Firefox, Safari ~1ms      IE ~5m...
Defer Execution
Defer ExecutionLots of stuff happens in a browser while loading a pageThen, relatively little happens... Take advantage of...
Defer Execution Example    In-page sharing
Defer Execution Example    In-page sharing
Defer Execution Example    In-page sharing
Defer Execution Example    In-page sharing
Naive implementationfunction makeSharable(elements) {  for (var i=0; i < elements.length; i++) {    var element = elements...
Deferred implementationfunction initShare() {  document.on(mousedown, function(e) {                  O(1)     var el = e.t...
Modularize & Lazy Load         users dont need all features immediately    1-1 Messaging    connect to all the      IM net...
Modularize & Lazy Load        Also applies to       images and CSS!              Careful:   Loading images can create     ...
Loading ImagesSpriting and preloading is hardStill creates additional HTTP requestsDifficult to automateEmbed images into ...
Use Vector GraphicsVector graphics are supportedin all major browsers   Firefox 3+   Opera 9.5+   IE 6+   Safari 3+   Chrome
With imagesWithout images
Tools   Techniques        How to initialize a webapp        Asynchronous & non-blocking        Defer Execution        Mini...
Perceived Performance   Quick loading content on a   slow page appears to be the   cause of the slow page   Delaying inter...
HighlightsAlways compress and minify contentUse an IFrame to load the main script payloadDefer execution until neededDefer...
We need better tools for measuringwebapp performance!Need to accurately determine theimpact of a webapp on a website
Browser CacheNew visitors dont have anything cached!Browsers can automatically clear cacheYahoo! YUI study:  40-60% of Yah...
Meebo performance ny_web_performance
Meebo performance ny_web_performance
Upcoming SlideShare
Loading in …5
×

Meebo performance ny_web_performance

3,071 views

Published on

Slides from the NY Web Performance meetup in December, a repeat presentation of the Velocity 2010 talk

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,071
On SlideShare
0
From Embeds
0
Number of Embeds
400
Actions
Shares
0
Downloads
13
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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 OReilly Velocity conference 24 June 2010) On Twitter: @marcuswestin and @mghunt
  2. 2. The Meebo BarA 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 ChallengeDo Load lots of features Load features fastWithout Blocking rendering or onload Affecting User Experience How?
  5. 5. Meebo Bar embed codeexecutes in ~10ms no blocking network requests no dependency on our serverless than 1200 charactersgzips to about 700 bytesembedded directly in page HTML or JSexecutes even if our servers are not reachable
  6. 6. Initializing 3rd Party WebappsInline JS <script src=""> Iframe <iframe src="">easy for publishers to add load an HTML file in an iframeblocks the page in all Requires HTML file on thebrowsers hosting siteXMLHttpRequests Script TagAsynchronous, non- append a script tag usingblocking JavaScript to the head ofsame-domain in most the documentbrowsers Commonly accepted, but...
  7. 7. Accepted script loading codevar head = document.getElementsByTagName(head)[0],el = document.createElement(script);el.src = "http://www.myDom.ain/myScript.js"; head.appendChild(el);good: cross domain (were 3rd party content!)good: doesnt block network traffic
  8. 8. Dont block the page!Script Tag Appendcan 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 browsersare there alternative nonblockingmethods?
  9. 9. Iframed JS1. Iframes load HTML, not JS2. Cross iframe communication is same-domain only (non- HTML5 browsers)3. Window onload event fires after all iframes load
  10. 10. Iframed JS - the solutionvar iframe = document.createElement(iframe), doc = iframe.contentWindow.document;doc.open().write( <script>function loadJS() { ... }</script> + <body onload="loadJS()">)doc.close()
  11. 11. More About Iframesiframe creation overhead? Creating one DOM node Chrome < 1ms Firefox, Safari ~1ms IE ~5msSandboxed 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 ExecutionLots of stuff happens in a browser while loading a pageThen, 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 implementationfunction 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 implementationfunction 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 dont 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 ImagesSpriting and preloading is hardStill creates additional HTTP requestsDifficult to automateEmbed images into CSS insteadDataURIs and MHTML filesDetails on the Meebo devblog (http://mee.bo/cssimages)
  23. 23. Use Vector GraphicsVector graphics are supportedin all major browsers Firefox 3+ Opera 9.5+ IE 6+ Safari 3+ Chrome
  24. 24. With imagesWithout 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. 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 CSS Use vector graphics Questions? (+ ping me on twitter) @marcuswestin
  28. 28. We need better tools for measuringwebapp performance!Need to accurately determine theimpact of a webapp on a website
  29. 29. Browser CacheNew visitors dont have anything cached!Browsers can automatically clear cacheYahoo! YUI study: 40-60% of Yahoo!s users have an empty cache 20% of all page views have an empty cache

×