Protecting your User Experience WhileIntegrating 3rd-party CodePatrick MeenanSoftware Engineer
A simple content page
Feels Like             http://youtu.be/HSbHNIvhOFU
The Social Widget
When the widget is Unavailable                    http://youtu.be/3-zaos02CxI
Because ofThis:                                                                                            HTML      <scri...
Loaded Asynchronously                  http://youtu.be/krin-F65Fd8
Loaded Asynchronously                  http://youtu.be/krin-F65Fd8
And Monitoring Says…• Server Monitoring   Base page responded in 0.160 seconds• Full-Browser Monitoring   Page loaded in...
There’s More!On that one page, all before the main content:                                                               ...
HTTP Archive               http://httparchive.org/trends.php
But I’d Notice….• Globally?   – Social sites tend to be targets for blocking      • platform.twitter.com      • connect.fa...
Back-end vs Front-end Base Page (Back-end)                                      Front-end                        First Paint
High Availability Server Architectures    DNS                                         Read-Only Database          Load Bal...
All for… Base Page (Back-end)
To the Front End!
Async SnippetGood for code with no dependencies (widgets)                                                   HTML  <script>...
Put Scripts at the Bottom• Easy to implement and describe• Delays script loading and execution later than Async at the top...
Protocol-relative URLs• Look strange• Safe across all browsers (for Javascript)                                           ...
Async LoadersHelp for dependency chaining•   Modernizr•   LABjs•   RequireJS•   ControlJS    Modernizr.load([{            ...
HTMLModernizr.load([ {   load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js,   complete: function () {        if...
Well, Almost…Desktop Browser          OnLoad Blocked                     Mobile Browser               OnLoad BlockedChrome...
How are we doing?
WidgetsAsync                  BlockingGoogle Analytics       Google +1 BadgeGoogle +1 Button       Twitter AnywhereTwitter...
Code Libraries (examples)• Jquery: Blocking in the head• Closure Library: Blocking in the head• YUI: Blocking• Dojo: Block...
Ad Providers• Doubleclick: Fully Async available (October 2011)• Adsense: Blocking script, ad itself is async• Others: Ask...
Demonstrating Frontend SPOF
Routing to localhost• Fails FAST! (connections rejected)• Not good for real failure scenarios
You Need a Black Hole      blackhole.webpagetest.org – 72.66.115.13hosts file72.66.115.13 ajax.googleapis.com72.66.115.13 ...
On WebPagetest.orgsetDnsName ajax.googleapis.com blackhole.webpagetest.orgsetDnsName apis.google.com blackhole.webpagetest...
SPOF-O-Matic
In The Chrome Web Store     https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg                    ...
Normal Operation                   Gray circle = Boring/Good
SPOF Detected                Warning indicator =                SPOF Detected
SPOF Details
Amount of page content blocked    Near the top = BADNear the bottom = Better
Whitelisting
Resetting Third Party/White Lists
Turning on Blocking
Blocking Enabled                   Black Hole Enabled
Resources Blocked                    Black Hole Used
Pages in the Wild
News*CNN News Article Page                                                                                     HTML     <s...
Blogs/Content*The Verge Article Page                                                                                    HT...
Political sites*whitehouse.gov                                                                                   HTML     ...
E-Commerce*Newegg Product Page                                                                                    HTML    ...
Homework
Widget Owners• Never EVER provide blocking snippets• All examples should be asynchronous• Do not force HTTPS if it isnt re...
Site Owners• Never load 3rd party resources synchronously   – refuse 3rd party code that doesnt have an async option• Do n...
Live Browsing with SPOF-O-Matic
Thank You!pmeenan@webpagetest.org@patmeenan+Patrick Meenan
Upcoming SlideShare
Loading in …5
×

Google I/O 2012 - Protecting your user experience while integrating 3rd party code

3,962
-1

Published on

The amount of 3rd-party content included on websites is exploding (social sharing buttons, user tracking, advertising, code libraries, etc). Learn tips and techniques for how best to integrate them into your sites without risking a slower user experience or even your sites becoming unavailable.

Video is available here: http://www.youtube.com/watch?v=JB4ulhFFdH4&feature=plcp

Published in: Technology, News & Politics
4 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,962
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
4
Likes
2
Embeds 0
No embeds

No notes for slide

Google I/O 2012 - Protecting your user experience while integrating 3rd party code

  1. 1. Protecting your User Experience WhileIntegrating 3rd-party CodePatrick MeenanSoftware Engineer
  2. 2. A simple content page
  3. 3. Feels Like http://youtu.be/HSbHNIvhOFU
  4. 4. The Social Widget
  5. 5. When the widget is Unavailable http://youtu.be/3-zaos02CxI
  6. 6. Because ofThis: HTML <script src=‘https://apis.google.com/js/plusone.js’></script >Instead of: HTML <script> (function() { var po = document.createElement(‘script’); po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script> http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
  7. 7. Loaded Asynchronously http://youtu.be/krin-F65Fd8
  8. 8. Loaded Asynchronously http://youtu.be/krin-F65Fd8
  9. 9. And Monitoring Says…• Server Monitoring Base page responded in 0.160 seconds• Full-Browser Monitoring Page loaded in 25 seconds• Analytics Page Views Loaded and executed asynchronously• Real User Monitoring Performance Reporting No data if user bailed before onLoad
  10. 10. There’s More!On that one page, all before the main content: HTML <script src=‘http://code.jquery.com/jquery-1.7.1.min.js’></script> <script src=‘http://scripts.verticalacuity.com/vat/mon/vt.js’></script> <script src=‘http://ak.sail-horizon.com/scout/v1.js’></script> <script src=‘//cdn.optimizely.com/js/xxxxx.js’></script> <script src=‘https://platform.twitter.com/anywhere.js’></script> <script src=‘http://www.reddit.com/static/button/button1.js’></script> <script src=‘http://widgets.digg.com/buttons.js’></script> <script src=‘//assets.pinterest.com/js/pinit.js’></script> <script src=‘//platform.linkedin.com/in.js’></script> 10
  11. 11. HTTP Archive http://httparchive.org/trends.php
  12. 12. But I’d Notice….• Globally? – Social sites tend to be targets for blocking • platform.twitter.com • connect.facebook.net • apis.google.com – HTTPS as well• In an Enterprise? – Corporate policies
  13. 13. Back-end vs Front-end Base Page (Back-end) Front-end First Paint
  14. 14. High Availability Server Architectures DNS Read-Only Database Load Balancers App Servers Site 1 Database Master Site 2
  15. 15. All for… Base Page (Back-end)
  16. 16. To the Front End!
  17. 17. Async SnippetGood for code with no dependencies (widgets) HTML <script> (function() { var po = document.createElement(‘script’); po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script> 17
  18. 18. Put Scripts at the Bottom• Easy to implement and describe• Delays script loading and execution later than Async at the top HTML … <scriptsrc=‘//assets.pinterest.com/js/pinit.js’></script></body> 18
  19. 19. Protocol-relative URLs• Look strange• Safe across all browsers (for Javascript) HTML//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.jsInstead of:https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js 19
  20. 20. Async LoadersHelp for dependency chaining• Modernizr• LABjs• RequireJS• ControlJS Modernizr.load([{ HTML load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js, }, { load: needs-jQuery.js }]); 20
  21. 21. HTMLModernizr.load([ { load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js, complete: function () { if ( !window.jQuery ) { Modernizr.load(js/libs/jquery-1.7.1.min.js); } } }, { load: needs-jQuery.js} ]); 21
  22. 22. Well, Almost…Desktop Browser OnLoad Blocked Mobile Browser OnLoad BlockedChrome Yes Android 2.x NoFirefox Yes Android 4.x YesInternet Explorer 9- No Chrome Mobile YesInternet Explorer 10 Yes iOS 4 NoSafari 5+ Yes iOS 5 YesOpera Yes IE Mobile 9 No http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBjrq90MDA 22
  23. 23. How are we doing?
  24. 24. WidgetsAsync BlockingGoogle Analytics Google +1 BadgeGoogle +1 Button Twitter AnywhereTwitter Tweet Button Facebook Channel File ExampleFacebook Like Button Pinterest (end of body)Digg Reditt AddThis ShareThis
  25. 25. Code Libraries (examples)• Jquery: Blocking in the head• Closure Library: Blocking in the head• YUI: Blocking• Dojo: Blocking in the head• Moo Tools: Blocking in the head• Google jsapi: Blocking (default, Async available)
  26. 26. Ad Providers• Doubleclick: Fully Async available (October 2011)• Adsense: Blocking script, ad itself is async• Others: Ask – iFrame solutions are async
  27. 27. Demonstrating Frontend SPOF
  28. 28. Routing to localhost• Fails FAST! (connections rejected)• Not good for real failure scenarios
  29. 29. You Need a Black Hole blackhole.webpagetest.org – 72.66.115.13hosts file72.66.115.13 ajax.googleapis.com72.66.115.13 apis.google.com72.66.115.13 www.google-analytics.com72.66.115.13 connect.facebook.net72.66.115.13 platform.twitter.com... Courtesy NASA/JPL-Caltech. 29
  30. 30. On WebPagetest.orgsetDnsName ajax.googleapis.com blackhole.webpagetest.orgsetDnsName apis.google.com blackhole.webpagetest.orgsetDnsName www.google-analytics.com blackhole.webpagetest.orgsetDnsName connect.facebook.net blackhole.webpagetest.orgsetDnsName platform.twitter.com blackhole.webpagetest.orgnavigate your.url.com http://www.webpagetest.org/ 30
  31. 31. SPOF-O-Matic
  32. 32. In The Chrome Web Store https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg https://github.com/pmeenan/spof-o-matic
  33. 33. Normal Operation Gray circle = Boring/Good
  34. 34. SPOF Detected Warning indicator = SPOF Detected
  35. 35. SPOF Details
  36. 36. Amount of page content blocked Near the top = BADNear the bottom = Better
  37. 37. Whitelisting
  38. 38. Resetting Third Party/White Lists
  39. 39. Turning on Blocking
  40. 40. Blocking Enabled Black Hole Enabled
  41. 41. Resources Blocked Black Hole Used
  42. 42. Pages in the Wild
  43. 43. News*CNN News Article Page HTML <script src=‘http://cache-02.cleanprint.net/cpf/cleanprint?key=cnn’> <script src=‘http://connect.facebook.net/en_US/all.js’>today.msnbc.msn.com HTML <script src=‘http://www.polls.newsvine.com/_elliott/jenga’> <script src=‘http://amch.questionmarket.com/…/randm.js’> <script src=‘http://use.typekit.com/kjy8rxx.js’>ABC News Main Page HTML <script src=‘http://connect.facebook.net/en_US/all.js’> *As of May 2012 43
  44. 44. Blogs/Content*The Verge Article Page HTML <script src=‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’> <script src=‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery- ui.min.js’>CBS Sports Article Page <script src=‘http://tags.crwdcntrl.net/c/1198/cc_af.js’> HTML <script src=‘//platform.twitter.com/widgets.js’>Tumblr HTML <script src=‘https://www.google.com/recaptcha/api/js/recaptcha_ajax.js’>Cnet.com HTML <script src=‘http://html5shim.googlecode.com/svn/trunk/html5.js’> *As of May 2012 44
  45. 45. Political sites*whitehouse.gov HTML <script src=‘https://www.google.com/recaptcha/api/js/recaptcha_ajax.js’> <script src=‘https://s7.addthis.com/js/250/addthis_widget.js’>democrats.org HTML <script src=‘https://use.typekit.com/wym0ldn.js’>gop.com HTML <script src=‘http://tags.crwdcntrl.net/c/546/cc.js’> *As of May 2012 45
  46. 46. E-Commerce*Newegg Product Page HTML <script src=‘http://assets.pinterest.com/js/pinit.js’>Best Buy Product Page HTML <script src=‘http://bestbuy.ugc.bazaarvoice.com/static/3545w/bvapi.js’> <script src=‘http://platform.twitter.com/widgets.js’>Target HTML <script src=‘http://media.richrelevance.com/rrserver/js/1.0/p13n.js’>Redbox HTML <script src=‘http://connect.facebook.net/en_US/all.js#xfbml=1’> *As of May 2012 46
  47. 47. Homework
  48. 48. Widget Owners• Never EVER provide blocking snippets• All examples should be asynchronous• Do not force HTTPS if it isnt required• Where possible, allow for sites to self-host any critical code
  49. 49. Site Owners• Never load 3rd party resources synchronously – refuse 3rd party code that doesnt have an async option• Do not rely on onload for important functionality• Make sure your monitoring has aggressive time limits (under 20 seconds)• Make sure your real user monitoring has an aggressive timeout• Track real user failures by region
  50. 50. Live Browsing with SPOF-O-Matic
  51. 51. Thank You!pmeenan@webpagetest.org@patmeenan+Patrick Meenan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×