Post on 14-Feb-2017
transcript
https://www.flickr.com/photos/drurydrama/8730391383
What are Third-party Components Doing to Your Site’s Performance? Andy Davies & Simon Hearne, NCC Performance Day 2015
https://www.flickr.com/photos/leejordan/485457837
Third-party = Infrastructure and code managed by someone else
Guy Podjarny, Velocity Santa Clara, 2014
Types of Third-parties
Revenue Attribution Analytics
Personalisation (inc device detection) AB & MV Testing
Advertising Critical content (inc font foundries)
Product images Value added content (comments, reviews)
Making more and more Third-party requests
Percentile
HTTP Archive Jan 2011 to Nov 2014
0
20
40
60
80
100
120
140
160
180
Req
uest
s 95th
90th
75th
50th
BuiltWith.com
Google Tag Manager
BuiltWith.com
Optimizely
BuiltWith.com
DoubleClick
http://www.webperformancetoday.com/2011/07/14/fourth-party-calls-third-party-content/
It’s not just Third-parties
It’s not just Third-parties
http://gtmetrix.com/reports/www.answers.com/OjLTvGny
It’s not just Third-parties
What gets loaded?
https://www.flickr.com/photos/kiki99/1062744637
Third-parties – a necessary evil?
SPOFs – extreme end of performance range
But what about general performance?
Where did we get our data from?
Challenges of the data
https://www.flickr.com/photos/torek/4444673930
How does MVT impact user experience?
0.00%
0.50%
1.00%
1.50%
2.00%
2.50%
100
300
500
700
900
1100
13
00
1500
17
00
1900
21
00
2300
25
00
2700
29
00
3100
33
00
3500
37
00
3900
41
00
4300
45
00
4700
49
00
5100
53
00
5500
57
00
5900
61
00
6300
65
00
6700
69
00
7100
73
00
7500
77
00
7900
81
00
8300
85
00
8700
89
00
9100
93
00
9500
97
00
9900
M
ore
Speed Index
Percentage Tests With AB
Percentage Tests Without AB
What does this mean in practice?
Maxymiser’s performance
0
50
100
150
200
250
11/10/2014 00:00 16/10/2014 00:00 21/10/2014 00:00 26/10/2014 00:00 31/10/2014 00:00 05/11/2014 00:00 10/11/2014 00:00
Firs
t Dat
a Ti
me
(ms)
Maxymiser’s performance
0
50
100
150
200
250
11/10/2014 00:00 16/10/2014 00:00 21/10/2014 00:00 26/10/2014 00:00 31/10/2014 00:00 05/11/2014 00:00 10/11/2014 00:00
Firs
t Dat
a Ti
me
(ms)
Visible in monitoring data too
And yes… they use a CDN
Audit your Third-parties… …understand what they’re doing
BazaarVoice = 224KB over the wire, 917KB uncompressed
Bazaar Voice
/* RequireJS ------------------------------------------------- MIT (c) 2010-2011, The Dojo Foundation All Rights Reserved. jQuery.js ------------------------------------------------- MIT (c) 2009 John Resig Backbone Underscore.js ------------------------------------------------- MIT (c) 2009-2011 Jeremy Ashkenas, DocumentCloud Inc. Handlebars.js ------------------------------------------------ MIT (c) Yehuda Katz json2.js ------------------------------------------------ Public Domain. NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. Lawnchair ------------------------------------------------ MIT (c) 2009, 2010, 2011 Brian LeRoux easyXDM ------------------------------------------------ MIT (c) 2009-2011, Øyvind Sean Kinsey Moment.js ------------------------------------------------ MIT (c) Tim R Wood Boilerplate-Boilerplate ------------------------------------------------ MIT (c) 2011 - Adam Sontag Cohorts ------------------------------------------------ MIT (c) 2010 James Yu parseUri 1.2.2 ------------------------------------------------ MIT (c) Steven Levithan <stevenlevithan.com> FitText.js 1.1 ------------------------------------------------ WTFPL (c) 2011 Dave Rupert http://daverupert.com usertiming.js ------------------------------------------------ MIT (c) 2013 Nic Jansma http://nicj.net asEvented ------------------------------------------------ MIT (c) 2012, Michal Kuklis */
RequireJS jQuery.js Backbone Underscore.js Handlebars.js json2.js Lawnchair easyXDM Moment.js Boilerplate-Boilerplate Cohorts parseUri 1.2.2 FitText.js 1.1 WTFPL usertiming.js asEvented
What’s in the bundle?
But yet they insert User Timing marks!
User Timing marks
Maximiser inserts second copy of jQuery
Maximiser inserts second copy of jQuery
function _et_vm_ct()\n{\n\t\n\treturn true;\n}\n\t\nfunction et_vm_reload()\n{\n\tif(etVM instanceof ETVMRecorder)\n\t\tetVM.restartRecorder();\n}\n\t\netVM \x3d new ETVMRecorder(\x27t9boHV\x27, \x27www.etracker.de/vm\x27, 0);var et_optInActive \x3d false;\nvar et_doEvents \x3d false;\n\nfunction et_getDeliveryHash()\n{\n\treturn \x27dYKEZ5wR3amdR8e2fXsGrg\x3d\x3d\x27;\n}\n\nfunction et_escape(param)\n{\n\treturn encodeURIComponent(param);\n}\n\nfunction et_console(message)\n{\n\tif(typeof(console) !\x3d \x27undefined\x27 \x26\x26 typeof(console) !\x3d \x27unknown\x27)\n\t{\n\t\tconsole.log(message);\n\t}\n}\n\nfunction et_debug(param)\n{\t\n}\n\nfunction et_addEvent(e, t, f, u) \n{\n\tif (e.addEventListener) {\n\t\te.addEventListener(t, f, u);\n\t\treturn 1;\n\t}\n\telse if (e.attachEvent) {\n\t\tvar r \x3d e.attachEvent(\x27on\x27 + t, f);\n\t\treturn r;\n\t}\n\telse \n\t\te[\x27on\x27 + t] \x3d f;\n}\n\nfunction et_random(value)\n{\n\tif(value \x3e\x3d Math.round(Math.random()*100))\n\t\treturn true;\n\telse\n\t\treturn false;\n}\n\nfunction et_md5(a){function b(a,b){var c\x3da[0],h\x3da[1],i\x3da[2],j\x3da[3];c\x3dd(c,h,i,j,b[0],7,-680876936);j\x3dd(j,c,h,i,b[1],
But it’s not always easy
function _et_vm_ct()\n{\n\t\n\treturn true;\n}\n\t\nfunction et_vm_reload()\n{\n\tif(etVM instanceof ETVMRecorder)\n\t\tetVM.restartRecorder();\n}\n\t\netVM \x3d new ETVMRecorder(\x27t9boHV\x27, \x27www.etracker.de/vm\x27, 0);var et_optInActive \x3d false;\nvar et_doEvents \x3d false;\n\nfunction et_getDeliveryHash()\n{\n\treturn \x27dYKEZ5wR3amdR8e2fXsGrg\x3d\x3d\x27;\n}\n\nfunction et_escape(param)\n{\n\treturn encodeURIComponent(param);\n}\n\nfunction et_console(message)\n{\n\tif(typeof(console) !\x3d \x27undefined\x27 \x26\x26 typeof(console) !\x3d \x27unknown\x27)\n\t{\n\t\tconsole.log(message);\n\t}\n}\n\nfunction et_debug(param)\n{\t\n}\n\nfunction et_addEvent(e, t, f, u) \n{\n\tif (e.addEventListener) {\n\t\te.addEventListener(t, f, u);\n\t\treturn 1;\n\t}\n\telse if (e.attachEvent) {\n\t\tvar r \x3d e.attachEvent(\x27on\x27 + t, f);\n\t\treturn r;\n\t}\n\telse \n\t\te[\x27on\x27 + t] \x3d f;\n}\n\nfunction et_random(value)\n{\n\tif(value \x3e\x3d Math.round(Math.random()*100))\n\t\treturn true;\n\telse\n\t\treturn false;\n}\n\nfunction et_md5(a){function b(a,b){var c\x3da[0],h\x3da[1],i\x3da[2],j\x3da[3];c\x3dd(c,h,i,j,b[0],7,-680876936);j\x3dd(j,c,h,i,b[1],
But it’s not always easy
Do they perform as well as you?
https://www.flickr.com/photos/eschipul/4160817135
Tag Managers FTW?
Or are they a new problem?
0
50
100
150
200
250
300
350
No Tag Management
GTM Ensighten QuBit TagMan AdobeDTM Tealium BrightTag
Med
ian
# of
Obj
ects
/ Pa
ge
Or are they a new problem ?
3500
4000
4500
5000
5500
6000
No Tag Management
GTM Ensighten QuBit TagMan AdobeDTM Tealium BrightTag
Spee
d In
dex
Number of Domains (random sample)
Number of Domains (sites with GTM)
https://www.flickr.com/photos/devos/163903
With great power comes great responsibility
£££
So what did we learn?
http://www.flickr.com/photos/safari_vacation/5961260280
Establish the business value
Load only the tags you need
https://www.flickr.com/photos/mynameisharsha/4345641826
Give them a performance budget
Hold them to it
https://www.flickr.com/photos/retrocactus/9688874898
Understand what happens when they fail (or their performance degrades)
https://www.flickr.com/photos/ejbaurdo/7784419114
Protect your critical path
https://www.flickr.com/photos/jonathancohen/4985041197
We don’t know enough about third-parties
http://thirdpartycontent.org
http://jsmanners.com
- Establish the business value
- Load only the tags you need
- Set performance budgets for third-parties
… and police them
- Understand what happens when third-parties fail
… and protect against it
- Share your experiences
Thank You! @Simon @SimonHearne @simon.hearne@nccgroup.com
@Andy @AndyDavies @andy.davies@nccgroup.com