Third-Party Content

The weak link in your chain?

Simon Hearne - Principle Engineer @ Akamai

#perfmatters conf 2018


Bad people
doing horrible things
to good sites

The modern web workflow 101

make something ๐Ÿค“

test it ๐Ÿ‘

ship it ๐Ÿ˜Ž


put tags on it ๐Ÿ˜ณ

AMP got something right ๐Ÿ™„

What i've learned in 5 years

we seem to have less control than ever

The "business" ๐Ÿ‘ฉโ€โœˆ๏ธ

Tags serve business goals

  • Measurement & Analytics
  • Ads & Retargeting
  • "Optimization" & Testing
  • Comments & Live Chat
  • Tag Management

The money  ๐Ÿ’ต

โ€œWe know that Optimizely slows down the site, but it will get us $750k increased revenue this yearโ€

Holiday website, UK

The it's not my job  ๐Ÿคทโ€

โ€œWe suspect it slows the site down, we havenโ€™t tested it. Marketing says itโ€™s critical to their latest TV campaign so thereโ€™s no point arguingโ€

Budget airline, UK

The tag manager  ๐Ÿ•ด

โ€œAll the tags go through the tag manager, so they should be fine.โ€

Clicks-and-mortar store, UK

but what about the



PS: Availability Heuristic 101 ๐Ÿค”

PS: Availability Heuristic 101 ๐Ÿค”

  • Remember when Facebook went down?
  • Remember when Disqus went down?
  • Remember when Maxymiser went down?
  • Remember when Dyn went down?
  • left-pad ๐Ÿ˜ž

Risk 1:

Malicious code injection ๐Ÿ‘น

How much of your code has vulnerabilities?


It happens to the biggest players

Internet 'Service' Providers

Content Delivery Networks

Content Delivery Networks

Unintentional data collection

website tracking is a "security disaster waiting to happen"

Risk 2:

Availability ๐Ÿ“‰

Do they fail gracefully?


Do they fail gracefully?


Are they using a CDN?

(& is it as good as yours?)

What is their SLA for availability?

(& is it as good as yours?)

Availability to the user

  • Government / geo blocking
  • Ad blocking
  • Tracker blocking
  • Random crap

Risk 3:

Code Quality ๐Ÿ”Ž

XSS Vulnerabilites

XSS Vulnerabilites

	class='vdb_player vdb_565ec775e4b092ebc9685ce853180f5de4b066208a63279a'
	vdb_params='m.pub_id=606413&m.url=' - alert(1) - '-alert(1)-'>

Different release schedules

<script src="//" async></script>
How do you know when it changes?

Just plain thoughtless

Risk 4:

Performance ๐Ÿš€

Self-policing isn't good enough

... the X Web Reference Snippet was available ... and the download time over HTTP did not exceed 500 ms.
Snippet is sampled every minute from a variety of U.S. locations.

Tools aren't equal

The web is variable

Top 250 resources from HTTP Archive

The web is variable

Top 250 resources from Akamai mPulse

Resource Timing is the hero we need

Resource Timing is the hero we need

not without Timing-Allow-Origin ๐Ÿ™ˆ

Resource Timing won't save us

๐Ÿ™ˆ no redirect information

๐Ÿ™ˆ limited data on 72% of third-party content

๐Ÿ™ˆ only the first 150 requests *

๐Ÿ™ˆ no data on old iDevices

๐Ÿ™ˆ no data for cross-origin iframes
* limit can be increased per pageview

Risk 4:

Performance ๐Ÿš€

(for real this time)

CPU is our biggest bottleneck โณ

Who's policing the third-parties?

Variable CPU time

on synthetic agents!

The most frustrating perf bug, ever

Who watches the watchmen?

Risk 4:

Performance ๐Ÿš€

(part III)

delaying onload

keeping the radio awake

We have little control
over which are used

But there are things we can do...

Stage 1:

Find out what's there

Synthetic Testing (webpagetest)

Synthetic Testing (webpagetest)

Bonus: Third-party categorization |

Real User Monitoring ๐Ÿฅƒ

Akamai mPulse

Stage 2:

Determine the impact

Synthetic Testing (webpagetest)

Synthetic Testing (made easy)

Synthetic Testing (made easy)

Resource Impact from Synthetics ๐Ÿค–

Resource Impact from Synthetics ๐Ÿค–

Resource Impact from RUM

Advertising Partners

Partner 1 = ~400ms slower than partner 2

Migrating all ads = 220ms faster page load

Additional revenue ~= $12,000 per month

Large US publishing company

LongTasks API

Bonus: determine the value!

"Everything should have a value,
because everything has a cost"

Tim Kadlec - freelance #webperf god

Stage 3:

Measure them and Report on them

Content Security Policy ๐Ÿ‘ฎโ€


	"csp-report": {
		"document-uri": "",
		"referrer": "",
		"violated-directive": "style-src",
		"effective-directive": "style-src",
		"original-policy": "",
		"disposition": "enforce",
		"blocked-uri": "inline",
		"line-number": 4,
		"column-number": 3,
		"source-file": "",
		"status-code": 0,
		"script-sample": ""

Synthetic Testing ๐Ÿค–

RUM ๐Ÿฅƒ

The best way to monitor resources,
even with its limitations

๐Ÿฅƒ Waterfalls

Akamai mPulse

Stage 4:

Defend ourselves ๐Ÿคผโ€

Content Security Policy ๐Ÿ‘ฎโ€๏ธ

Content Security Policy ๐Ÿ‘ฎโ€๏ธ

CSP Strict-Dynamic

Content Security Policy ๐Ÿ‘ฎโ€๏ธ

๐Ÿ‘ CryptoJacking

๐Ÿ‘ XSS

๐Ÿ‘Ž Maintenance

Sub-resource Integrity ๐Ÿ”



Sub-resource Integrity ๐Ÿ”

๐Ÿ‘ Malicious Code

๐Ÿ‘ Untested Changes

๐Ÿ‘Ž Maintenance

โญ๏ธ Signature-based Restrictions...*

Service Worker ๐Ÿ’ช

function timeout(delay) {
	return new Promise(function(resolve, reject) {
			resolve(new Response('', {
				status: 408,
				statusText: 'Request timed out.'
		}, delay);

self.addEventListener('fetch', function(event) {
	// Only fetch JavaScript files for now
	if (/\.js$/.test(event.request.url)) {
		event.respondWith(Promise.race([timeout(2000), fetch(event.request.url)]));
	} else {

Service Worker ๐Ÿ’ช

๐Ÿ‘ CDN / Network outages

๐Ÿ‘Ž Not on first pageview

๐Ÿ‘Ž Maintenance

๐Ÿ‘Ž You can break your site

Self-hosting / Proxying โ˜”๏ธ

Self-hosting / Proxying โ˜”๏ธ

Self-hosting / Proxying โ˜”๏ธ

Self-hosting / Proxying โ˜”๏ธ

๐Ÿ‘ CDN / Network outages

๐Ÿ‘ Shared TCP connection

๐Ÿ‘Ž Maintenance

Stage 5:

Have a third-party policy ๐Ÿ’ผ

  • What does it do?
  • Who uses it?
  • Whatโ€™s the risk to the site?
  • How do you remove it?

Share with other teams! ๐Ÿ—ฃ

Third-party content may be a weak link

But it's here to stay

Five things you can do today:

  • Know what's there
  • Measure them
  • Have a solid defense
  • Share the data
  • Have third-party policy

Further reading

Thank you,
good luck!

๐Ÿšดโ€ @SimonHearne