1.
https://www.flickr.com/photos/9422878@N08/6884612488
AB Testing, Ads & other 3rd-Party Tags
@AndyDavies · London WebPerf · Mar ‘18

2.
Infrastructure and code
managed by someone else
Third-party =
Guy Podjarny, Velocity Santa Clara, 2014

3.
We’re including more and more of them
0
25
50
75
100
125
150
175
200
225
01-Jan-13 01-Jul-13 01-Jan-14 01-Jul-14 01-Jan-15 01-Jul-15 01-Jan-16 01-Jul-16 01-Jan-17 01-Jul-17 01-Jan-1
50th 75th 90th 95th HTTPArchive Jan ’13 to Jan ‘18Percentile

4.
Well… we’ve got plenty of choice!

5.
And we’re told they’re going to make us more money
www.flickr.com/photos/59937401@N07/5856660723

6.
EVERYTHING SHOULD
HAVE VALUE, BECAUSE
EVERYTHING HAS A COST
Tim Kadlec

7.
How can we measure their cost?
1. Test a page in WebPageTest
2. Repeat with selected 3rd-Parties blocked
3. Compare the two results

8.
Requests to
be blocked

9.
Use the filmstrip view to compare visual experience

10.
Use the filmstrip view to compare visual experience

11.
Feed the timings into RUM to understand the business impact
Conversions
(At least three RUM products support ‘What-If’ type analysis)

12.
MedianPageLoadTime(s)
0
2
4
6
8
10
12
14
W
eek
0
W
eek
1
W
eek
2
W
eek
3
W
eek
5
W
eek
5
Android
iOS
3rd-Parties really can cost you money…

13.
MedianPageLoadTime(s)
0
2
4
6
8
10
12
14
W
eek
0
W
eek
1
W
eek
2
W
eek
3
W
eek
5
W
eek
5
Android
iOSRemoved BazaarVoice
for Android visitors
3rd-Parties really can cost you money…

14.
-4s

15.
£+26%

16.
Understand how 3rd-parties affect your key milestones
Working? Useful? Usable?
What’s happening here? Or here?

17.
Analysing activity before firstMeaningfulPaint

18.
To get a broader picture of performance…
1. Grab Chrome timelines from HTTPArchive
e.g. https://storage.googleapis.com/httparchive/traces-android-
Dec_15_2017/171215_7X_FFG2.json.gz
2. Analyse with modified version of Jean-Pierre
Vincent’s 3rd-party-cpu-abuser
https://github.com/andydavies/3rd-party-cpu-abuser
3. Aggregate the results

19.
Top 13 CPU consumers before firstMeaningfulPaint - HTTPArchive rank < 5000

20.
Let’s look at testing, using Optimizely as an example
https://www.flickr.com/photos/pinkangelbabe/427255017

21.
Optimizely’s cost varies by implementation
0
1.25
2.5
3.75
5
Duration of script execution before firstMeaningfulPaint (ms)
0 500 1000 1500 2000 2500
Optimizely
(n=110)
Circle size = number occurrences

22.
On the critical rendering path

23.
On the critical rendering path

24.
On the critical rendering path

25.
Improving performance
Reducing number of
• URL Matches
• Experiments
• Plugins (Widgets)
reduces snippet size, download and execution times
Removing jQuery from the bundle and using your own (if you
already have it) can shrink bundle further

26.
Add metrics from Optimizely to Analytics or RUM?
optimizely.get("state").getActiveExperimentIds().length
Some products have documented APIs, why not extract key
metrics and send them to analytics or RUM?
Number of experiments in snippet:
Number of experiments active for this page view:
Object.keys(optimizely.get('data').experiments).length

27.
Use Performance APIs to build a picture
Resource Timing
• When was script requested, how long did it take to fetch, was it
cached?
User Timing
• When did the initial script execute, how long did it take?
LongTasks
• Were there any script elements that took longer that 50ms?

28.
Make sure tests are equivalent from a performance viewpoint
Some things seen in the the wild:
• One variant redirected to a new page, the other didn’t
• Optimised vs unoptimised images
(Can be good reasons why tests can’t be equivalent)

29.
Could you do it server-side or or at CDN level?
https://www.flickr.com/photos/kewl/8475764430

30.
Know how to turn it off in an emergency
https://www.flickr.com/photos/chrysics/4365802409

31.
-150ms
-300ms

32.
£+5%

33.
https://www.flickr.com/photos/gviciano/3128575291
What if I told you…

34.
https://www.flickr.com/photos/gviciano/3128575291
a script loaded async, and even
injected after page load can delay a
page rendering?
…

35.
What was the first request in this navigation?

36.
Request #61

37.
¯_( )_/¯

38.
beforeUnload event
took 400ms to execute!
cloning DOM triggered
extra network requests

39.
beforeUnload event
handlers took over
1,800ms to execute!!!

40.
The examples aren’t isolated cases
0
3
6
9
12
15
Duration of beforeUnload event handlers (s)
0.0 0.5 1.0 1.5 2.0 2.5 3.0
Moat Ads
(n=481)
TeaLeaf
(n=271)

41.
Not always easy to spot these delays
https://www.flickr.com/photos/fernandosanchez/2441716057

42.
Navigation Timing API excludes beforeUnload
Prompt
for
unload
App
Cache
DNS TCP Request Response Processing onLoadRedirect
unload
Before
Unload
navigation start

43.
Instrument addEventListener?
!(function() {
const callbacks = []
window.addEventListener = (function(_addEventListener){
_addEventListener.call(window, 'beforeunload', function(){
const args = Array.prototype.slice.call(arguments)
let total = -1 * performance.now()
callbacks.forEach(function(callback) {
callback.apply(undefined, args)
})
total += performance.now()
console.info(`total: ${total}`)
})
return function() {
if (arguments[0] === 'beforeunload') {
callbacks.push(arguments[1])
return
}
_addEventListener.apply(this, arguments)
}
})(window.addEventListener)
})() This is just a sketch of an idea - don’t deploy it without improvements!
https://gist.github.com/cvazac/de18cf4d045b01d179d8fdc2902d4997

44.
WebPageTest?
1. WebPageTest script
navigate https://www.game.co.uk/
navigate https://www.game.co.uk/
2. Download Timeline for
step #2
3. Pipe through jq cat timeline.json | jq -r '[.[] |
select(.name=="EventDispatch"
and .args.data.type=="beforeunload")
| .dur] | add / 1000')

45.
DevTools?

46.
https://www.flickr.com/photos/wnieke/4078161933

47.
Do you include adverts?
https://www.flickr.com/photos/helldini/6190516041

48.
https://news.sky.com/story/hackers-behind-a-billion-dodgy-web-adverts-11219278

49.
https://blog.trendmicro.com/trendlabs-security-intelligence/malvertising-campaign-abuses-googles-doubleclick-to-deliver-cryptocurrency-miners

50.
https://discuss.httparchive.org/t/the-performance-impact-of-cryptocurrency-mining-on-the-web/1126/8

51.
https://www.adlightning.com/ad-quality-report
“…41% of the ads tracked exceeded the industry-approved
maximum. Nearly 10% of the ads were larger than 5MB.
Some ads are as large as 30 MBs.”
“…average number of network requests and tracking scripts
per ad was 56:
3.7x greater than the maximum suggested by the IAB.”

52.
“…one third (32%) of the ads were overly processor-
intensive.
The study also found it common for processor-intensive ads,
often video ads, to consume more than 3 seconds of CPU
time to render a single ad within the user’s browser.”
4% of video ads were in Flash format and 19% of in-banner
video ads were auto-play.
https://www.adlightning.com/ad-quality-report

53.
And we wonder why
people use adblockers?

54.
https://www.iab.com/newadportfolio/
Advertisers are trying to improve quality

55.
Performance APIs can help to build a picture (within limits)
Resource Timing
• What was requested and when, how long did it take to fetch, was it
cached?
LongTasks
• Were there any script elements that took longer that 50ms?
But there are still plenty of blind spots

56.
Can some of the security features of the web help?
Content-Security-Policy
Sub-resource Integrity
offer some hope, but tried using them to help a client police ads
last year with limited sucess

57.
https://www.flickr.com/photos/tedmurphy/2875827736/

58.
TagManagers… A blessing or a curse?
https://www.flickr.com/photos/jdhancock/9004372146

59.
Makes it really easy to add new tags
https://www.flickr.com/photos/lantzilla/29842854

60.
Makes it easy to remove them too!
https://www.flickr.com/photos/alesimages/4215559895

61.
Provides a shared source of truth and audit trail
https://www.flickr.com/photos/tim_ellis/3919090513

62.
Help control loading order
https://www.flickr.com/photos/rusty_clark/32889333561

63.
Ultimately it’s about finding the balance
https://www.flickr.com/photos/gilgamesh/183037111

64.
VALUE
COST
EVERYTHING SHOULD
HAVE VALUE, BECAUSE
EVERYTHING HAS A COST
Tim Kadlec

65.
Understand the COST
Establish the VALUEVALUE
COST

66.
https://www.flickr.com/photos/basheertome/4762529213

67.
Thanks!
@AndyDavies
www.slideshare.net/andydavies