High Performance Social Plugins

3,953 views

Published on

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

Published in: Technology, Business
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,953
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
28
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • 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);">');
  • <!-- 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"/>
  • 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!

    ×