Name That Script!

Name That Script!

7aad555700fb85bf9787067349ac7ba9?s=128

Trent Walton

April 17, 2018
Tweet

Transcript

  1. Name
 That
 Script!

  2. Hi! paravelinc.com

  3. Hi!

  4. Hi!

  5. Area of Responsibility & Expertise

  6. Image Comps

  7. Image Comps Frontend

  8. Image Comps Frontend Performance

  9. Image Comps Frontend Performance A11Y

  10. Image Comps Frontend Performance A11Y RWD

  11. Image Comps Frontend Performance A11Y RWD Design Systems

  12. Image Comps Frontend Performance A11Y RWD Design Systems Command Line

  13. Image Comps Frontend Performance A11Y RWD Design Systems Command Line

    Third-Parties
  14. Control

  15. Prototypes!

  16. Welcome 1 2 3 Next

  17. Welcome 1 2 3 <ul role="tablist"> <li> <a href="#first-tab" role="tab"

    aria- selected="true" aria-controls="first-tab">
  18. Welcome 1 2 3

  19. CSS PNG JS JPG WOFF CSS JPG Shrink-O-Matic W CSS

    JPG WOFF
  20. Buttons Fonts Footer Forms Grid
 Header Navigation Tables Patterns Primary

    Secondary Buttons Use only one primary button per component.
  21. None
  22. Integration!

  23. CMS

  24. Analytics CMS Ad Network

  25. Analytics CMS Ad Network AB Testing Comments E-Comm

  26. Analytics CMS Ad Network AB Testing Comments E-Commerce Trackers Social

    Sign Bus
  27. CSS PNG JS JPG WOFF Analytics Social AB Testing Ad

    Network
  28. Analytics v2.0.1 v2.0.2 Ad Network v2.0.3 AB Testing

  29. Delivering a performant, accessible, responsive, scalable website isn’t enough: I

    also need to consider the impact of third-party scripts.
  30. twitter.com/csswizardry/status/915886339391918083

  31. None
  32. Whose fault is this?

  33. I blame myself.

  34. But, I’ve been learning.

  35. Third-Party Any request made by a webpage coming from an

    external URL
  36. Third-Party Scripts and Services http://trentwalton.com

  37. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Third-Party Scripts and Services

  38. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js https://p.typekit.net/p.css Third-Party Scripts and

    Services
  39. http://trentwalton.com Third-Party Scripts and Services

  40. Third-Party Any request made by a webpage coming from an

    external URL Any resource included with a webpage that the site owner doesn’t explicitly control
  41. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Third-Party Scripts and Services

  42. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js https://evilcorp.com/ssssshhhhh.js Third-Party Scripts and

    Services
  43. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js https://evilcorp.com/ssssshhhhh.js

  44. Time to Research.

  45. Analytics Categories Comments Social Media Advertising

  46. Categories ghostery.com

  47. Categories ghostery.com

  48. Categories Advertising Ad networks, Ad content Comments Disqus, etc. Essential

    Tag managers, fonts, etc. Customer Interaction Live chat, feedback Analytics Google, Chartbeat, etc. AB Testing Maxymiser, Optimizely, etc. Social Media Embeds, sign up, share CDN Cloudflare, AWS, etc.
  49. Itemizing Third-Parties

  50. View Source view-source:http://trentwalton.com <html lang=“en-us”> <head> <link href="https://use.typekit.net/iwu3yfx.css" rel="stylesheet"> <script

    src="//cdnjs.cloudflare.com/jquery.min.js"></script> </head> <body>
  51. View Source view-source:http://trentwalton.com <html lang=“en-us”> <head> <link rel="shortcut icon" href="https://static.nytimes.com/favicon.ico"

    /> <link rel="apple-touch-icon-precomposed" sizes="144×144" href="https://static.nytimes.com/images/icons/ios-ipad-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="114×114" href="https://static.nytimes.com/images/icons/ios-iphone-114x144.png" /> <link rel="apple-touch-icon-precomposed" href="https://static.nytimes.com/images/icons/ios-default-homescreen-57x57.png" /> <meta name="sourceApp" content="nyt-v5" /> <meta id="applicationName" name="applicationName" content="homepage" /> <meta id="foundation-build-id" name="foundation-build-id" content="" /> <link rel="canonical" href="https://www.nytimes.com" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml" /> <link rel="alternate" media="only screen and (max-width: 640px)" href="http://mobile.nytimes.com" /> <link rel="alternate" media="handheld" href="http://mobile.nytimes.com" /> <meta name="robots" content="noarchive,noodp,noydir" /> <meta name="description" content="The New York Times: Find breaking news, multimedia, reviews & opinion on Washington, business, sports, movies, travel, books, jobs, education, real estate, cars & more at nytimes.com." /> <meta name="CG" content="Homepage" /> <meta name="SCG" content="" />
  52. Ghostery

  53. Performance Monitors

  54. Portable, Please

  55. Save as HAR http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Copy

    Save All As Har Open in New Tab Start Performance Analysis
  56. HTTP Archive Format HAR (JSON)

  57. Now What? HAR website.har

  58. har.tech

  59. charlesproxy.com

  60. None
  61. None
  62. Automate this! calendar.perfplanet.com

  63. XLS! CSV! They’re for me!

  64. Analyze Popular Sites

  65. Alexa Top 50 US Sites

  66. Alexa Top 50 US Sites 49

  67. Alexa Top 50 US Sites 49 46

  68. None
  69. Third-Party Requests across top 46 US sites

  70. 213 Third Party Domain URLs * domains, not requests

  71. 22 Average Per Site

  72. Third-party domain # of top 46 sites % of top

    46 sites doubleclick.net 38 82.6% facebook.com 32 69.6% google-analytics.com 27 58.7% googlesyndication.com 25 54.3% googleadservices.com 24 52.2% cloudfront.net 20 43.5% googleapis.com 20 43.5% scorecardresearch.com 18 39.1% 2mdn.net 17 37.0% adnxs.com 17 37.0% fastly.net 17 37.0% akamaihd.net 16 34.8% Third-Party Prevalence https://trentwalton.com/tag/Third-Party/
  73. What’s a Demdex? better.fyi/trackers

  74. What’s a Demdex? better.fyi/trackers

  75. Which types were most popular? Ad (Serving) doubleclick.net 2mdn.net (doubleclick)

    googleadservices.com adnxs.com adsrvr.org Ad (Analytics) demdex.net scorecardresearch.com quantserve.com bluekai.com rubiconproject.com
  76. Remarketing! Spatula Buy Now

  77. Remarketing! Thank you for your purchase

  78. Weather App advertisement Spatula! Shop Now

  79. Alexa Site Third-Party Domains nytimes.com 64 washingtonpost.com 63 Metropcs.mobi 59

    cnn.com 57 ebay.com 49 msn.com 45 microsoft.com 43 wikia.com 42 salesforce.com 40 bestbuy.com 38 imdb.com 37 twitch.tv 37 espn.com 36 wordpress.com 32 Volume Per Site
  80. Which sites had the most? News nytimes.com washingtonpost.com cnn.com msn.com

    espn.com Shopping ebay.com bestbuy.com target.com amazon.com walmart.com
  81. News & Shopping Ads Analytics CDN Ratings Comments Social Feedback

  82. Further Reading trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html

  83. What! Me, biased?

  84. None
  85. None
  86. $ $

  87. Time to listen and learn.

  88. Vector Media Group Matt Weinberg Lee Goldberg

  89. Analytics Ad Network What’s a Tag Manager? AB Testing

  90. Dashboard

  91. Get Snippets

  92. Add Snippets view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script

    Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
  93. Add Tags & Scripts

  94. Pandora’s Box? view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script

    Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
  95. Get Organized view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script

    Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
  96. “An analytics strategy should be part of the initial development

    and design process […]” —Lee Goldberg
  97. CSS PNG JS JPG WOFF Analytics Social AB Testing Ad

    Network
  98. CSS PNG JS JPG WOFF Analytics Social AB Testing Ad

    Network
  99. It’s too easy to add scripts. view-source:http://trentwalton.com <html lang=“en-us”> <head>

    <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
  100. None
  101. “We work towards a global maximum versus a local maximum.

    Small, hyper-focused changes may seem good at the time…
  102. but we have to be mindful of the overall quality

    of the user-experience and integrity of the brand.” —Matt Weinberg
  103. Ads and analytics work together to help our clients. view-source:http://trentwalton.com

    <html lang=“en-us”> <head> <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
  104. Don’t blame the tool.

  105. Take Action!

  106. Establish a Center of Excellence!

  107. 1 Determine value to the business/website 2 Avoid redundant scripts

    and services 3 Fit within established performance budget Define Standards 4 Comply with organizational privacy policy
  108. Styles Components Voice Perf Third-Parties Inventory AB Testing - Optimizely

    300kb WebPage Test Analytics - Chartbeat 73kb WebPage Test Comments - Disqus 120kb WebPage Test Ads - Doubleclick 100kb WebPage Test Ads - Adnxs 80kb WebPage Test Third-Party Standards Our goal is to document and regularly evaluate the value of third-party inclusions, optimizing benefits while minimizing the UX/Performance impact. Document Standards
  109. Analytics Ad Network AB Testing Account For Third-Parties During Prototyping

  110. Audit Third-Parties Third-Party Size Budgeted Issue Optimizely 365kb 200kb Perf

    Budget Maxymizer 190kb Redundant Outbrain 645b 1kb Chartbeat 700b 1kb Analytics - Google 26kb 50kb Ads - Doubleclick 169kb 100kb Perf Budget Ads - Adnxs 80kb 100kb Ads - Rubicon Project 90kb 100kb
  111. Monitor Performance

  112. Make a business case!

  113. 4 Third-Parties 24 HTTP Requests 2 Megabytes Competitor B Competitive

    Analysis Our Site 12 Third-Parties 39 HTTP Requests 1.2 Megabytes 35 Third-Parties 78 HTTP Requests 3 Megabytes Competitor A
  114. Case Studies & Quotes wpostats.com/2017/03/03/bbc-load-abandonment.html

  115. Use Real User Monitoring (RUM) soasta.com/blog/what-if-analysis-predictive-analytics/

  116. “What if my digital property had better performance? How would

    that affect the bottom line of my company?” —Edward Isarevich
  117. webpagetest.org

  118. Get Results

  119. Block Third-Party

  120. None
  121. Compare Results

  122. Plug in Results soasta.com/blog/what-if-analysis-predictive-analytics/

  123. Plug in Results soasta.com/blog/what-if-analysis-predictive-analytics/

  124. Talk it out!

  125. “Everything should have a value, because everything has a cost.”

    —Tim Kadlec
  126. Slides! Links! https://speakerdeck.com/trentwalton

  127. Links From Slides https://twitter.com/csswizardry/status/915886339391918083 https://www.ghostery.com https://calibreapp.com https://speedcurve.com https://www.dareboost.com https://har.tech https://www.charlesproxy.com

    https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet https://trentwalton.com/tag/Third-Party https://better.fyi/trackers https://trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html https://wpostats.com/2017/03/03/bbc-load-abandonment.html https://www.soasta.com/blog/what-if-analysis-predictive-analytics https://www.webpagetest.org
  128. Tools I Use Ghostery Calibre SpeedCurve DareBoost HAR.tech Charles App

  129. People to Follow / Who Helped Andy Davies
 Simon Hearne

    Matt Weinberg Lee Goldberg Harry Roberts Aral Balkan Laura Kalbag Dave Rupert
  130. Thanks! @TrentWalton