What are Third-party Components Doing to Your Site's Performance?
Transcript of What are Third-party Components Doing to Your Site's Performance?
![Page 1: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/1.jpg)
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
![Page 2: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/2.jpg)
https://www.flickr.com/photos/leejordan/485457837
![Page 3: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/3.jpg)
Third-party = Infrastructure and code managed by someone else
Guy Podjarny, Velocity Santa Clara, 2014
![Page 4: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/4.jpg)
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)
![Page 5: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/5.jpg)
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
![Page 6: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/6.jpg)
BuiltWith.com
Google Tag Manager
![Page 7: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/7.jpg)
BuiltWith.com
Optimizely
![Page 8: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/8.jpg)
BuiltWith.com
DoubleClick
![Page 9: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/9.jpg)
http://www.webperformancetoday.com/2011/07/14/fourth-party-calls-third-party-content/
It’s not just Third-parties
![Page 10: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/10.jpg)
It’s not just Third-parties
![Page 11: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/11.jpg)
http://gtmetrix.com/reports/www.answers.com/OjLTvGny
It’s not just Third-parties
![Page 12: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/12.jpg)
What gets loaded?
![Page 13: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/13.jpg)
https://www.flickr.com/photos/kiki99/1062744637
Third-parties – a necessary evil?
![Page 14: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/14.jpg)
SPOFs – extreme end of performance range
![Page 15: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/15.jpg)
But what about general performance?
![Page 16: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/16.jpg)
Where did we get our data from?
![Page 17: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/17.jpg)
Challenges of the data
![Page 18: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/18.jpg)
https://www.flickr.com/photos/torek/4444673930
![Page 19: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/19.jpg)
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
![Page 20: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/20.jpg)
What does this mean in practice?
![Page 21: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/21.jpg)
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)
![Page 22: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/22.jpg)
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)
![Page 23: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/23.jpg)
Visible in monitoring data too
![Page 24: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/24.jpg)
And yes… they use a CDN
![Page 25: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/25.jpg)
Audit your Third-parties… …understand what they’re doing
BazaarVoice = 224KB over the wire, 917KB uncompressed
![Page 26: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/26.jpg)
Bazaar Voice
![Page 27: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/27.jpg)
/* 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?
![Page 28: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/28.jpg)
But yet they insert User Timing marks!
User Timing marks
![Page 29: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/29.jpg)
Maximiser inserts second copy of jQuery
![Page 30: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/30.jpg)
Maximiser inserts second copy of jQuery
![Page 31: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/31.jpg)
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
![Page 32: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/32.jpg)
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
![Page 33: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/33.jpg)
Do they perform as well as you?
![Page 34: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/34.jpg)
https://www.flickr.com/photos/eschipul/4160817135
Tag Managers FTW?
![Page 35: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/35.jpg)
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
![Page 36: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/36.jpg)
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
![Page 37: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/37.jpg)
Number of Domains (random sample)
![Page 38: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/38.jpg)
Number of Domains (sites with GTM)
![Page 39: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/39.jpg)
https://www.flickr.com/photos/devos/163903
With great power comes great responsibility
![Page 40: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/40.jpg)
£££
![Page 41: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/41.jpg)
So what did we learn?
![Page 42: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/42.jpg)
http://www.flickr.com/photos/safari_vacation/5961260280
Establish the business value
![Page 43: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/43.jpg)
Load only the tags you need
![Page 44: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/44.jpg)
https://www.flickr.com/photos/mynameisharsha/4345641826
Give them a performance budget
![Page 45: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/45.jpg)
Hold them to it
![Page 46: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/46.jpg)
https://www.flickr.com/photos/retrocactus/9688874898
Understand what happens when they fail (or their performance degrades)
![Page 47: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/47.jpg)
https://www.flickr.com/photos/ejbaurdo/7784419114
Protect your critical path
![Page 48: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/48.jpg)
https://www.flickr.com/photos/jonathancohen/4985041197
We don’t know enough about third-parties
![Page 49: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/49.jpg)
http://thirdpartycontent.org
![Page 50: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/50.jpg)
http://jsmanners.com
![Page 51: What are Third-party Components Doing to Your Site's Performance?](https://reader034.fdocuments.in/reader034/viewer/2022052607/58a2d5981a28abf0458bcd43/html5/thumbnails/51.jpg)
- 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