Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High Performance Social Plugins

4,522 views

Published on

slides from http://environmentsforhumans.com/2012/web-performance-summit/

Published in: Technology, Business
  • Be the first to comment

High Performance Social Plugins

  1. 1. High-Performance Social Plugins @stoyanstefanov, phpied.com Web Performance Summit Aug 29, 2012
  2. 2. // todo• Whats a social plugin?• How does it plug?• How does it work/optimize?
  3. 3. Plugin?• is a third-party iframe• grows sometimes
  4. 4. Plug?#1 - You write the iframe#2 - Third party JS writes iframe
  5. 5. #1: u-frame?• Cant resize• Some optimisations fail• Not always advertised• … but no 3rd party JS
  6. 6. #2: 3rd party JS• all.js, plusone.js, widgets.js• <script src="…">• async JS
  7. 7. <script src="…">• bad, bad• blocks everything there is• never ever http://www.phpied.com/3po-fail/ + SPOF-O-Matic
  8. 8. Async JS• dynamic script node• not as short• mostly default now• only blocks onload in !IEhttp://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/http://www.phpied.com/social-button-bffs/
  9. 9. unblocking onload• does it matter?1. window.onload = function(){...};2. FIF/Friendly iFrames/Meebo
  10. 10. fif1) create iframe src="js:false"2) in the frame doc.write a <body onload …3) …that loads JS
  11. 11. fif (snip)
  12. 12. fif• unblocks onload (yey! but…)• more complex• requires 3 rd party cooperation because JS now runs in a different window
  13. 13. fif coopBEFORE:(function() { // magic with window // and document}())
  14. 14. fif coopAFTER:(function(window) { var document = window.document; // magic with window // and document}(window.inDapIF ? parent.window : window))
  15. 15. inDapIF• you signal to third party you load them in a frame• defined by IABhttp://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
  16. 16. fif• experimental support in FB JS SDK• [RFC] try it!
  17. 17. http://jsbin.com/axibow/1/edit
  18. 18. Plug?#1 - You write the iframe#2 - Third party JS writes iframe
  19. 19. Plug?#1 - You write the iframe#2 - Third party JS writes iframe • load 3rd party JS async • try FIF
  20. 20. Plug?#1 - You write the iframe • FIF too? http://jsbin.com/uyepoj/1/edit#2 - Third party JS writes iframe • load 3rd party JS async • try FIF
  21. 21. // todo• Whats a social plugin?• How does it plug?• How does it work/optimize?
  22. 22. Like buttons tasks1. Show up2. Resize itself (optional)3. Handle user actions: like, comment
  23. 23. 1. Show up• Fast initial paint• Single request• Inline CSS• Sprite vs. Data URI• Inline async JS loader
  24. 24. 2. Resize• Inline JS
  25. 25. 3. User actions• Lazy• Preload JS asap• But eval JS only if necessary
  26. 26. Single request
  27. 27. Single request
  28. 28. JS preload #fail• new Image().src• <object>/<iframe>• <link type=stylesheet>• script type="cache/invalid"• XMLHttpRequest• script.preload = true
  29. 29. JS preload in Like button• CORS: .com -> CDN• XHR2 (and XDomainRequest for IE8)• IE6 and 7?
  30. 30. Progressive enhancement<form><button type="submit"> + Async JS ("ajaxification") + Preload (faster)
  31. 31. lazy evalfunction load() { if (!preload()) { return execute(); } onmouseover = execute;}
  32. 32. lazy evalfunction execute() { onmouseover = null; var js = document.createElement(script); js.src = FILE; document.head.appendChild(js);}
  33. 33. lazy evalfunction preload() { var xhr; if (typeof XDomainRequest !== undefined) { // IE8 xhr = new XDomainRequest(); } else if (typeof XMLHttpRequest !== undefined) { xhr = new XMLHttpRequest(); if (!("withCredentials" in xhr)) { return; // sorry, XHR2 needed } } else { return; // give up } xhr.open("GET", FILE, true); xhr.send(null); return true;}
  34. 34. // todo• Whats a social plugin?• How does it plug?• How does it work/optimize?
  35. 35. Thank you!

×