Talk at Smashing Conf - 7th Feb 2018 (Video - https://vimeo.com/254703766) Explores some of the issues that 3rd-party tags introduce when we add them to our sites, some ways of measuring the impact, and challenges we still have

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

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

6. 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

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

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

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

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

11. Requests to
be blocked

12. Use the filmstrip view to compare visual experience

13. Use the filmstrip view to compare visual experience

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

15. 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…

16. 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…

17. -4s

18. £+26%

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

20. Analysing activity before firstMeaningfulPaint

23. 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

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

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

26. 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

27. On the critical rendering path

28. On the critical rendering path

29. On the critical rendering path

30. 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

31. 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

32. 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?

33. 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)

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

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

36. -150ms
-300ms

37. £+5%

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

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

40. What was the first request in this navigation?

42. Request #61

43. ¯_( )_/¯

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

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

46. 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)

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

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

49. 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

50. 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')

51. DevTools?

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

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

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

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

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

57. 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.”

58. “…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

59. And we wonder why
people use adblockers?

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

61. 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

62. 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

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

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

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

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

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

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

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

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

71. Understand the COST
Establish the VALUEVALUE
COST

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

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