High Performance Social Plugins
Upcoming SlideShare
Loading in...5
×
 

High Performance Social Plugins

on

  • 3,235 views

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

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

Statistics

Views

Total Views
3,235
Slideshare-icon Views on SlideShare
3,172
Embed Views
63

Actions

Likes
10
Downloads
22
Comments
0

4 Embeds 63

http://www.scoop.it 36
https://twitter.com 24
https://si0.twimg.com 2
http://blog.elab.io 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • variframe = document.createElement('iframe');var where = document.getElementsByTagName('head')[0];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('');
  • <!-- hook --><!-- script loader -->');doc.close();}());// asyncinit once loading is donewindow.fbAsyncInit = function() {FB.init({xfbml: true});};

High Performance Social Plugins High Performance Social Plugins Presentation Transcript

  • High-Performance Social Plugins @stoyanstefanov, phpied.com Web Performance Summit Aug 29, 2012
  • // todo• Whats 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?• Cant 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 !IEhttp://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
  • fif1) create iframe 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 3 rd party cooperation because 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 IABhttp://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
  • fif• experimental support in FB JS SDK• [RFC] try it!
  • http://jsbin.com/axibow/1/edit
  • 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• Whats a social plugin?• How does it plug?• How does it work/optimize?
  • Like buttons tasks1. Show up2. 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 XDomainRequest for 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• Whats a social plugin?• How does it plug?• How does it work/optimize?
  • Thank you!