high performance social plugins
TRANSCRIPT
High-Performance Social Plugins
@stoyanstefanov, phpied.com
Web Performance Summit Aug 29, 2012
// todo
• What's a social plugin?
• How does it plug?
• How does it work/optimize?
Plugin?
• is a third-party iframe
• grows sometimes
Plug?
#1 - You write the iframe
#2 - Third party JS writes iframe
#1: u-frame?
• Can't resize
• Some optimisations fail
• Not always advertised
• … but no 3rd party JS
#2: 3rd party JS
• all.js, plusone.js, widgets.js
• <script src="…">
• async JS
<script src="…">
• bad, bad
• blocks everything there is
• never ever
http://www.phpied.com/3po-fail/+ SPOF-O-Matic
Async JS
• dynamic script 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/
unblocking onload
• does it matter?
1. window.onload =
function(){...};
2. FIF/Friendly iFrames/Meebo
fif
1) createiframe
src="js:false"
2) in the frame doc.write a <body onload …
3) …that loads JS
fif (snip)
fif
• unblocks onload (yey! but…)
• more complex
• requires 3rd party cooperationbecause JS now runs in a different window
fif coopBEFORE:
(function() {
// magic with window
// and document
}())
fif coopAFTER:
(function(window) {
var document = window.document;
// magic with window
// and document
}(window.inDapIF ?
parent.window : window))
inDapIF
• you signal to third party you load them in a frame
• defined by IAB
http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
fif
• experimental support in FB JS SDK
• [RFC] try it!
Plug?
#1 - You write the iframe
#2 - Third party JS writes iframe
Plug?
#1 - You write the iframe
#2 - Third party JS writes iframe• load 3rd party JS async
• try FIF
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
// todo
• What's a social plugin?
• How does it plug?
• How does it work/optimize?
Like button's tasks
1. Show up
2. Resize itself (optional)
3. Handle user actions: like, comment
1. Show up
• Fast initial paint
• Single request
• Inline CSS
• Sprite vs. Data URI
• Inline async JS loader
2. Resize
• Inline JS
3. User actions
• Lazy
• Preload JS asap
• But eval JS only if necessary
Single request
Single request
JS preload #fail
• new Image().src
• <object>/<iframe>
• <link type=stylesheet>
• script type="cache/invalid"
• XMLHttpRequest
• script.preload = true
JS preload in Like button
• CORS: .com -> CDN
• XHR2 (and XDomainRequestfor IE8)
• IE6 and 7?
Progressive enhancement
<form><button type="submit">
+ Async JS ("ajaxification")
+ Preload (faster)
lazy evalfunction load() {
if (!preload()) {
return execute();
}
onmouseover = execute;
}
lazy evalfunction execute() {
onmouseover = null;
var js = document.createElement('script');
js.src = FILE;
document.head.appendChild(js);
}
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;
}
// todo
• What's a social plugin?
• How does it plug?
• How does it work/optimize?
Thank you!
