Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018

221 views

Published on

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

Published in: Internet
  • Be the first to comment

AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018

  1. 1. https://www.flickr.com/photos/9422878@N08/6884612488 AB Testing, Ads & other 3rd-Party Tags @AndyDavies · London WebPerf · Mar ‘18
  2. 2. Infrastructure and code managed by someone else Third-party = Guy Podjarny, Velocity Santa Clara, 2014
  3. 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. 4. Well… we’ve got plenty of choice!
  5. 5. And we’re told they’re going to make us more money www.flickr.com/photos/59937401@N07/5856660723
  6. 6. EVERYTHING SHOULD HAVE VALUE, BECAUSE EVERYTHING HAS A COST Tim Kadlec
  7. 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. 8. Requests to be blocked
  9. 9. Use the filmstrip view to compare visual experience
  10. 10. Use the filmstrip view to compare visual experience
  11. 11. Feed the timings into RUM to understand the business impact Conversions (At least three RUM products support ‘What-If’ type analysis)
  12. 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. 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. 14. -4s
  15. 15. £+26%
  16. 16. Understand how 3rd-parties affect your key milestones Working? Useful? Usable? What’s happening here? Or here?
  17. 17. Analysing activity before firstMeaningfulPaint
  18. 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. 19. Top 13 CPU consumers before firstMeaningfulPaint - HTTPArchive rank < 5000
  20. 20. Let’s look at testing, using Optimizely as an example https://www.flickr.com/photos/pinkangelbabe/427255017
  21. 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. 22. On the critical rendering path
  23. 23. On the critical rendering path
  24. 24. On the critical rendering path
  25. 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. 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. 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. 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. 29. Could you do it server-side or or at CDN level? https://www.flickr.com/photos/kewl/8475764430
  30. 30. Know how to turn it off in an emergency https://www.flickr.com/photos/chrysics/4365802409
  31. 31. -150ms -300ms
  32. 32. £+5%
  33. 33. https://www.flickr.com/photos/gviciano/3128575291 What if I told you…
  34. 34. https://www.flickr.com/photos/gviciano/3128575291 a script loaded async, and even injected after page load can delay a page rendering? …
  35. 35. What was the first request in this navigation?
  36. 36. Request #61
  37. 37. ¯_( )_/¯
  38. 38. beforeUnload event took 400ms to execute! cloning DOM triggered extra network requests
  39. 39. beforeUnload event handlers took over 1,800ms to execute!!!
  40. 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. 41. Not always easy to spot these delays https://www.flickr.com/photos/fernandosanchez/2441716057
  42. 42. Navigation Timing API excludes beforeUnload Prompt for unload App Cache DNS TCP Request Response Processing onLoadRedirect unload Before Unload navigation start
  43. 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. 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. 45. DevTools?
  46. 46. https://www.flickr.com/photos/wnieke/4078161933
  47. 47. Do you include adverts? https://www.flickr.com/photos/helldini/6190516041
  48. 48. https://news.sky.com/story/hackers-behind-a-billion-dodgy-web-adverts-11219278
  49. 49. https://blog.trendmicro.com/trendlabs-security-intelligence/malvertising-campaign-abuses-googles-doubleclick-to-deliver-cryptocurrency-miners
  50. 50. https://discuss.httparchive.org/t/the-performance-impact-of-cryptocurrency-mining-on-the-web/1126/8
  51. 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. 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. 53. And we wonder why people use adblockers?
  54. 54. https://www.iab.com/newadportfolio/ Advertisers are trying to improve quality
  55. 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. 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. 57. https://www.flickr.com/photos/tedmurphy/2875827736/
  58. 58. TagManagers… A blessing or a curse? https://www.flickr.com/photos/jdhancock/9004372146
  59. 59. Makes it really easy to add new tags https://www.flickr.com/photos/lantzilla/29842854
  60. 60. Makes it easy to remove them too! https://www.flickr.com/photos/alesimages/4215559895
  61. 61. Provides a shared source of truth and audit trail https://www.flickr.com/photos/tim_ellis/3919090513
  62. 62. Help control loading order https://www.flickr.com/photos/rusty_clark/32889333561
  63. 63. Ultimately it’s about finding the balance https://www.flickr.com/photos/gilgamesh/183037111
  64. 64. VALUE COST EVERYTHING SHOULD HAVE VALUE, BECAUSE EVERYTHING HAS A COST Tim Kadlec
  65. 65. Understand the COST Establish the VALUEVALUE COST
  66. 66. https://www.flickr.com/photos/basheertome/4762529213
  67. 67. Thanks! @AndyDavies www.slideshare.net/andydavies

×