What are Third-party Components Doing to Your Site's Performance?

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


http://gtmetrix.com/reports/www.answers.com/OjLTvGny


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 @[email protected]

@Andy @AndyDavies @[email protected]

What are Third-party Components Doing to Your Site's Performance?

Documents