velocity eu 2012 - third party scripts and you
DESCRIPTION
Presentation on 3rd-party scripts as Single Points of Failure from Velocity Europe 2012TRANSCRIPT
![Page 2: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/2.jpg)
The Performance Golden Rule
www.flickr.com/photos/oreillyconf/6326167731/
80-90% of the end-user
response time is spent on the
frontend*
* http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
![Page 3: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/3.jpg)
Torbit Insight Real-User Data
http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
…1,000 sites representing 6.7
billion pageviews…
…average 7% of load time is spent on the
backend compared to a whopping 93% on
the frontend.
![Page 4: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/4.jpg)
Base Page
4
Time to First Byte
Actual back-end Time!
![Page 5: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/elsie/4742380987/
We can fix that!
![Page 6: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/6.jpg)
Social Widgets back-end API
Call directly from your back-end
Returns HTML to be injected directly into your page
- echo file_get_contents(“http://social.patrickmeenan.com/gplus/?cookies=...”);
Implementation details:
- Synchronous and blocking
- Do not cache the results
- If you need to set a timeout, make sure it is at least 20 seconds, 45 preferred
- Include all cookies sent from the client
- May return javascript and set cookies
![Page 7: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/7.jpg)
This Google guy is a complete nutter #velocityconf
Wow, to think I used to respect @patmeenan #velocityconf
![Page 8: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/8.jpg)
But, that’s EXACTLY what this does…
<script src=‘……’></script>
![Page 9: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/9.jpg)
The Victim
![Page 10: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/10.jpg)
http://youtu.be/HSbHNIvhOFU
![Page 11: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/11.jpg)
When the widget is unavailable…
![Page 12: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/12.jpg)
http://youtu.be/3-zaos02CxI
![Page 13: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/13.jpg)
Because of
<script src=‘https://apis.google.com/js/plusone.js’></script>
This:
<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>
Instead of:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
<script src=‘https://apis.google.com/js/plusone.js’ async defer></script>
Or Even:
![Page 14: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/14.jpg)
• Server MonitoringBase page responded in 0.160 seconds
• Full-Browser MonitoringPage loaded in 25 seconds
• Analytics Page ViewsLoaded and executed asynchronously
• Real User Monitoring Performance ReportingNo data if user bailed before onLoad
And Monitoring Says…
![Page 15: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/15.jpg)
Loaded Asynchronously
http://youtu.be/krin-F65Fd8
![Page 16: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/16.jpg)
Loaded Asynchronously
http://youtu.be/krin-F65Fd8
![Page 17: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/17.jpg)
There’s More!
<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>
On that one page, all before the main content:
![Page 18: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/18.jpg)
Watch out for Fonts!
<link rel=“stylesheet” type=“text/css” href=‘http://fonts.googleapis.com/css?family=…’>
![Page 19: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/19.jpg)
And Tag Management
http://memegenerator.net/instance/27291297
![Page 20: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/20.jpg)
HTTP Archive
http://httparchive.org/trends.php
![Page 21: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/21.jpg)
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
![Page 22: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/22.jpg)
Site 2
Site 1
Load Balancers
High Availability Server Architectures
DNS
App Servers
Read-Only Database
Database Master
![Page 23: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/23.jpg)
All for…
Base Page(Back-end)
![Page 24: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/24.jpg)
There are a LOT of requests!
http://httparchive.org/trends.php
![Page 25: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/25.jpg)
To the Front End!http://memegenerator.net/instance/27291692
![Page 26: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/26.jpg)
Async SnippetGood for code with no dependencies (widgets)
<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>
![Page 27: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/27.jpg)
Simple Async Snippet
<script src=‘https://apis.google.com/js/plusone.js’ async defer></script>
Easy to implement and describe
Slightly slower on IE than insertBefore()
![Page 28: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/28.jpg)
• Easy to implement and describe
• Delays script loading and execution later than Async at the top
Put Scripts at the Bottom
… <script src=‘//assets.pinterest.com/js/pinit.js’></script></body>
![Page 29: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/29.jpg)
• Look strange
• Safe across all browsers (for Javascript)
Protocol-relative URLs
//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Instead of:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
![Page 30: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/30.jpg)
• Modernizr
• LABjs
• RequireJS
• ControlJS
Help for dependency chaining
Async Loaders
Modernizr.load([{ load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', }, { load: 'needs-jQuery.js'}]);
![Page 31: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/31.jpg)
Modernizr.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'} ]);
![Page 32: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/32.jpg)
WebFont Loader https://developers.google.com/webfonts/docs/webfont_loader
Graceful fallback on failure
Potential for unstyled content while loading
![Page 33: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/33.jpg)
Well, Almost…
http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBjrq90MDA
Desktop Browser OnLoad Blocked
Chrome Yes
Firefox Yes
Internet Explorer 9- No
Internet Explorer 10 Yes
Safari 5+ Yes
Opera Yes
Mobile Browser OnLoad Blocked
Android 2.x No
Android 4.x+ Yes
Chrome Mobile Yes
iOS 4 No
iOS 5+ Yes
IE Mobile 9 No
![Page 34: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/34.jpg)
How are we doing?http://www.flickr.com/photos/phobia/2308371224/
![Page 35: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/35.jpg)
Widgets
Async Blocking
Google Analytics Google +1 Badge
Google +1 Button Twitter Anywhere
Twitter Tweet Button Facebook Channel File Example
Facebook Like Button Pinterest (end of body)
Digg Reditt
AddThis
ShareThis
![Page 36: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/36.jpg)
• Closure Library: Blocking in the head• Dojo: Blocking in the head• Google jsapi: Blocking (default, Async available)• Jquery: Blocking in the head• Moo Tools: Blocking in the head• YUI: Blocking
Code Libraries (examples)
![Page 37: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/37.jpg)
• Doubleclick: Fully Async available (October 2011)
• Adsense: Blocking script, ad itself is async
• Others: Ask – iFrame solutions are async
Ad Providers
![Page 38: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/38.jpg)
Fonts
• Fontdeck: Blocking in the head
• Fonts.com: Blocking in the head
• Google: Blocking in the head
• Typekit: Blocking in the head
• Webtype: Blocking in the head
• Loader works across all providers
![Page 39: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/39.jpg)
Bonus Points
<script src=‘http://html5shim.googlecode.com/svn/trunk/html5.js’>
Minimal/No CachingNo gzipNo CDNAnd wow, the trust!
![Page 40: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/40.jpg)
http://memegenerator.net/instance/27291866
![Page 41: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/41.jpg)
• Fails FAST! (connections rejected)
• Not good for real failure scenarios
Routing to localhost
![Page 42: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/42.jpg)
You Need a Black Hole
blackhole.webpagetest.org – 72.66.115.13
Courtesy NASA/JPL-Caltech.
hosts file72.66.115.13 ajax.googleapis.com 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com ...
![Page 43: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/43.jpg)
On WebPagetest.org
ajax.googleapis.comapis.google.comwww.google-analytics.comconnect.facebook.netplatform.twitter.com
http://www.webpagetest.org/
![Page 44: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/44.jpg)
SPOF-O-Matic
https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg
https://github.com/pmeenan/spof-o-matic
![Page 45: Velocity EU 2012 - Third party scripts and you](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a1e77b4c905825d8b5607/html5/thumbnails/45.jpg)
http://memegenerator.net/instance/27293101