Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It’s My (Third) Party, and I’ll Cry if I Want To

It’s My (Third) Party, and I’ll Cry if I Want To

Like it or not, a huge part of modern web development involves the use of third-party providers: fonts, analytics, ads, tracking, and more all have an impact of performance, and can leave us (or, more worryingly, our visitors) susceptible to performance degradation.

In this talk, we’ll take a look at unruly or uninvited (third-)party guests: how to detect them, how to audit them, and how to manage them. We’ll also look at the different tools available to help us stress-test and quantify the overhead these third parties bring, and what that means for users and businesses alike.

Harry Roberts

May 11, 2018

More Decks by Harry Roberts

Other Decks in Technology


  1. It’s My (Third) Party, and I’ll Cry if I Want

    To Harry Roberts • @csswizardry
  2. Hi! I’m Harry Consultant Performance Engineer Leeds, UK @csswizardry

  3. None
  4. None
  5. None
  6. None
  7. None
  8. This is your website… …this is your website on tag

  9. Third Party Performance 1.Understand 2.Audit 3.Discuss 4.Mitigate

  10. Understand

  11. Security

  12. Security Insecure origins; mixed content warnings MitM attacks Compromised third

    parties Bad actors running amok
  13. None
  14. None
  15. “ “YouTube was recently caught displaying ads that covertly leach

    off visitors’ CPUs and electricity to generate digital currency on behalf of anonymous attackers…” — csswz.it/2ruKhN0
  16. At a minimum, pull everything from secure origins.

  17. TLS Everywhere ✔ HTTP/2 ✔ ServiceWorker ✔ Brotli

  18. Delays

  19. Delays On the network between first- and third-parties On third-party

    infrastructure ⏱ Third-party runtime
  20. “ “There is zero performance overhead to using our synchronous

    script [...] our typical response time is around 200 milliseconds”
 — Third-Party Provider
 — Ryan Townsend (csswz.it/2K4w2GB)
  21. “ “The Trainline reduced latency by 0.3 seconds across their

    funnel and customers spent an extra £8.1 million a year.”
  22. “ “For every 100ms decrease in homepage load speed, Mobify’s

    customer base saw a 1.11% lift in session based conversion, amounting to an average annual revenue increase of $376,789.”
  23. “ “[Walmart] Every 100ms improvement also resulted in up to

    a 1% increase in revenue.”
  24. Single Points of Failure (SPoF)

  25. SPoF Worst case scenario What happens when a third party

    is critical… …and it’s down?
  26. None
  27. None
  28. Audit

  29. Overhead and Impact

  30. requestmap.webperf.tools

  31. None
  32. requestmap.webperf.tools /render/[ID]

  33. None
  34. None
  35. $ awk -F',' '$2 != "Target Site" { print $1

    }' cnn.csv Field Separator
 is a comma If the second entry
 is not ‘Target Site’ Print the first entry
  36. None
  37. None
  38. 0s 2.5s 5s 7.5s 10s Load Start Render SpeedIndex Before

  39. 0 75 150 225 300 Requests Before After

  40. 0KB 1,000KB 2,000KB 3,000KB 4,000KB Weight Before After

  41. ! This is very extreme and non-scientific

  42. Slow Origins

  43. “ “What happens if X is running slowly?”

  44. charlesproxy.com

  45. None
  46. Outages

  47. “ “What happens if X is missing entirely?!”

  48. ## # Point third-party domains at WPT’s blackhole server. ## platform.twitter.com connect.facebook.net fonts.googleapis.com Blackhole
  49. None
  50. Missing Files

  51. “ “All your users are non-JS while they’re downloading your

    JS.” —Jake Archibald (csswz.it/2FGKrpW)
  52. ! Don’t optimise for users with
 JavaScript disabled…

  53. i …instead, consider how well your JavaScript fails.

  54. “ “In this particular instance, the T-Mobile JavaScript comment stripper

    appears to be searching for ‘/*’ and ‘*/’ and removing everything in-between. ” — csswz.it/2KE2lNQ
  55. None
  56. None
  57. Runtime Cost

  58. Runtime Cost 1.Run a Performance profile 2.Summary 3.Bottom-Up 4.Group by

  59. None
  60. None
  61. None
  62. Discuss

  63. Necessary Evil

  64. Necessary Evil

  65. Necessary Evil Is it?
 Really? Might it add
 real value?

    They can’t
 All be evil! Tracking scripts
 Are pretty icky Does it help
 users? Would we
 even miss it? What are the
 chances of something
 going wrong? Is the benefit
 greater than the cost?
  66. Vendors

  67. Vendors 1.Form hypotheses 2.Gather data 3.Let them know

  68. Let Them Know 1.Support tickets 2.Account Managers 3.Issues/pull requests 4.Tweets…

  69. None
  70. None
  71. None
  72. None
  73. Internal Teams

  74. Remember our
 CSV file from before?

  75. None
  76. None
  77. None
  78. None
  79. None
  80. ! Ask, don’t tell.

  81. Arrange a Meeting 1.Gather the data 2.Organise a meeting 3.Ask

    questions 4.Learn
  82. “ “Can you talk me through Google Tag Manager?

    does this particular third-party do for us?
 Who is responsible for this service?
 Which services do we use daily?
 Are there any services in here that we don’t recognise?”
  83. csswz.it/2rm29JY

  84. Mitigate

  85. Self-Host

  86. Self-Hosting Third-party assets from a first-party origin Controlled infrastructure Reduced

    network negotiation (DNS, TCP, TLS) Dictate your own caching strategy Preload!
  87. Where possible, self- host any critical assets.

  88. Load Asynchronously

  89. Load Asynchronously Synchronous (blocking) third parties create a SPoF Use

    any provided async method Most providers give an async loader… …be suspicious of any who don’t.
  90. None
  91. None
  92. Resource Hints

  93. Resource Hints Every trip to a new origin carries overhead

    (DNS, TCP, TLS) Deal with this ahead of time for known third-party origins Analytics services, font providers, ad networks, etc.
  94. Font Provider Social Widget Ad Network

  95. {% if page.layout != "feature" %} <link rel="preconnect" href="//cdn.carbonads.com"> <link

    rel="preconnect" href="//srv.carbonads.net"> <link rel="preconnect" href="https://cdn.speedcurve.com"> <link rel="preconnect" href="https://cdn.syndication.twimg.com"> <link rel="preconnect" href="https://platform.twitter.com"> <link rel="preconnect" href="https://syndication.twitter.com"> {% endif %} {% if page.page-class == "page--services page--workshops" %} <link rel="preconnect" href="https://gumroad.com"> {% endif %} <link rel="preconnect" href="https://www.google-analytics.com">
  96. None
  97. None
  98. ! Only warm up
 frequent, significant,
 and known origins.

  99. Content Security Policy (CSP)

  100. Content-Security-Policy: default-src 'self'; img-src imgix.com; script-src www.google-analytics.com

  101. None
  102. Feature Policy

  103. Feature-Policy: autoplay 'none'; geolocation 'self'; camera 'none'; microphone 'none'

  104. None
  105. Subresource Integrity (SRI)

  106. <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/⮐
 NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script>

  107. None
  108. Priority Hints

  109. <script

  110. Restraint

  111. Use as little as possible for as long as possible.

  112. Thank You! @csswizardry [email protected] speakerdeck.com/csswizardry harry.is/for-hire