Downloaded 30 times
![fif
• experimental support in FB JS
SDK
• [RFC] try it!](https://image.slidesharecdn.com/high-performance-social-plugins-120829113941-phpapp01/75/High-Performance-Social-Plugins-19-2048.jpg)
Uploaded byStoyan Stefanov
High Performance Social Plugins
Social plugins are third-party iframes that allow users to interact with social features like liking or sharing content. They can be plugged in two main ways: 1) by writing the iframe directly or 2) by loading third-party JavaScript that generates the iframe. The third-party JavaScript should be loaded asynchronously to avoid blocking the page load. Once loaded, the social plugin needs to show up quickly with a single request, resize itself if needed, and handle user interactions like likes in a lazy manner by preloading JavaScript but not evaluating it until an interaction occurs.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to High Performance Social Plugins
High Performance Social Plugins
- 1. High-Performance Social Plugins @stoyanstefanov, phpied.com Web Performance Summit Aug 29, 2012
- 2. // todo • What'sa social plugin? • How does it plug? • How does it work/optimize?
- 3. Plugin? • is athird-party iframe • grows sometimes
- 4. Plug? #1 - Youwrite the iframe #2 - Third party JS writes iframe
- 8. #1: u-frame? • Can'tresize • Some optimisations fail • Not always advertised • … but no 3rd party JS
- 9. #2: 3rd party JS • all.js, plusone.js, widgets.js • <script src="…"> • async JS
- 10. <script src="…"> • bad,bad • blocks everything there is • never ever http://www.phpied.com/3po-fail/ + SPOF-O-Matic
- 11. Async JS • dynamicscript node • not as short • mostly default now • only blocks onload in !IE http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/ http://www.phpied.com/social-button-bffs/
- 12. unblocking onload • doesit matter? 1. window.onload = function(){...}; 2. FIF/Friendly iFrames/Meebo
- 13. fif 1) create iframe src="js:false" 2) in the frame doc.write a <body onload … 3) …that loads JS
- 14.
- 15. fif • unblocks onload(yey! but…) • more complex • requires 3 rd party cooperation because JS now runs in a different window
- 16. fif coop BEFORE: (function() { // magic with window // and document }())
- 17. fif coop AFTER: (function(window) { var document = window.document; // magic with window // and document }(window.inDapIF ? parent.window : window))
- 18. inDapIF • you signalto third party you load them in a frame • defined by IAB http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
- 19. fif • experimental supportin FB JS SDK • [RFC] try it!
- 20.
- 21. Plug? #1 - Youwrite the iframe #2 - Third party JS writes iframe
- 22. Plug? #1 - Youwrite the iframe #2 - Third party JS writes iframe • load 3rd party JS async • try FIF
- 23. Plug? #1 - Youwrite the iframe • FIF too? http://jsbin.com/uyepoj/1/edit #2 - Third party JS writes iframe • load 3rd party JS async • try FIF
- 25. // todo • What'sa social plugin? • How does it plug? • How does it work/optimize?
- 26. Like button's tasks 1.Show up 2. Resize itself (optional) 3. Handle user actions: like, comment
- 27. 1. Show up •Fast initial paint • Single request • Inline CSS • Sprite vs. Data URI • Inline async JS loader
- 28.
- 29. 3. User actions •Lazy • Preload JS asap • But eval JS only if necessary
- 30.
- 31.
- 32. JS preload #fail •new Image().src • <object>/<iframe> • <link type=stylesheet> • script type="cache/invalid" • XMLHttpRequest • script.preload = true
- 33. JS preload inLike button • CORS: .com -> CDN • XHR2 (and XDomainRequest for IE8) • IE6 and 7?
- 34. Progressive enhancement <form><button type="submit"> + Async JS ("ajaxification") + Preload (faster)
- 35. lazy eval function load(){ if (!preload()) { return execute(); } onmouseover = execute; }
- 36. lazy eval function execute(){ onmouseover = null; var js = document.createElement('script'); js.src = FILE; document.head.appendChild(js); }
- 37. lazy eval function 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; }
- 38. // todo • What'sa social plugin? • How does it plug? • How does it work/optimize?
- 39.
Editor's Notes
- #15 variframe = document.createElement('iframe');var where = document.getElementsByTagName('head')[0];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'varjs = document.createElement(\\'script\\');'+ 'js.src = \\'http://example.org/js.js\\';'+ 'document.body.appendChild(js);">');
- #21 <!-- hook --><div id="fb-root"></div><!-- script loader --><script>(function() {varurl = '//connect.facebook.net/en_US/all.js';variframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";iframe.src = "javascript:false";var where = document.getElementById('fb-root');where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'window.inDapIF = true;' + 'varjs = document.createElement(\\'script\\');'+ 'js.src = \\''+ url +'\\';'+ 'document.body.appendChild(js);">');doc.close();}());// asyncinit once loading is donewindow.fbAsyncInit = function() {FB.init({xfbml: true});};</script><!-- one like button --><fb:likehref="http://phpied.com"/>