Your SlideShare is downloading. ×
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Google I/O 2012 - Protecting your user experience while integrating 3rd party code
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,685

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 …

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,685
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
4
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Protecting your User Experience WhileIntegrating 3rd-party CodePatrick MeenanSoftware Engineer
  • 2. A simple content page
  • 3. Feels Like http://youtu.be/HSbHNIvhOFU
  • 4. The Social Widget
  • 5. When the widget is Unavailable http://youtu.be/3-zaos02CxI
  • 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. Loaded Asynchronously http://youtu.be/krin-F65Fd8
  • 8. Loaded Asynchronously http://youtu.be/krin-F65Fd8
  • 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. 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. HTTP Archive http://httparchive.org/trends.php
  • 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. Back-end vs Front-end Base Page (Back-end) Front-end First Paint
  • 14. High Availability Server Architectures DNS Read-Only Database Load Balancers App Servers Site 1 Database Master Site 2
  • 15. All for… Base Page (Back-end)
  • 16. To the Front End!
  • 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. 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. 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. 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. 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. 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. How are we doing?
  • 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. 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. Ad Providers• Doubleclick: Fully Async available (October 2011)• Adsense: Blocking script, ad itself is async• Others: Ask – iFrame solutions are async
  • 27. Demonstrating Frontend SPOF
  • 28. Routing to localhost• Fails FAST! (connections rejected)• Not good for real failure scenarios
  • 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. 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. SPOF-O-Matic
  • 32. In The Chrome Web Store https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg https://github.com/pmeenan/spof-o-matic
  • 33. Normal Operation Gray circle = Boring/Good
  • 34. SPOF Detected Warning indicator = SPOF Detected
  • 35. SPOF Details
  • 36. Amount of page content blocked Near the top = BADNear the bottom = Better
  • 37. Whitelisting
  • 38. Resetting Third Party/White Lists
  • 39. Turning on Blocking
  • 40. Blocking Enabled Black Hole Enabled
  • 41. Resources Blocked Black Hole Used
  • 42. Pages in the Wild
  • 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. 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. 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. 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. Homework
  • 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. 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. Live Browsing with SPOF-O-Matic
  • 51. Thank You!pmeenan@webpagetest.org@patmeenan+Patrick Meenan

×