$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Harry Roberts

Other Decks in Technology

Transcript

  1. It’s My (Third) Party,
    and I’ll Cry if I Want To
    Harry Roberts • @csswizardry

    View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. This is your website…
    …this is your website
    on tag managers.

    View Slide

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

    View Slide

  10. Understand

    View Slide

  11. Security

    View Slide

  12. Security
    Insecure origins; mixed content warnings
    MitM attacks
    Compromised third parties
    Bad actors running amok

    View Slide

  13. View Slide

  14. View Slide


  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

    View Slide

  16. At a minimum, pull everything
    from secure origins.

    View Slide

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

    View Slide

  18. Delays

    View Slide

  19. Delays
    On the network between first- and third-parties
    On third-party infrastructure
    ⏱ Third-party runtime

    View Slide


  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)

    View Slide


  21. “The Trainline reduced latency by 0.3 seconds
    across their funnel and customers spent an
    extra £8.1 million a year.”

    View Slide


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

    View Slide


  23. “[Walmart] Every 100ms improvement also
    resulted in up to a 1% increase in revenue.”

    View Slide

  24. Single Points of Failure (SPoF)

    View Slide

  25. SPoF
    Worst case scenario
    What happens when a third party is critical…
    …and it’s down?

    View Slide

  26. View Slide

  27. View Slide

  28. Audit

    View Slide

  29. Overhead and Impact

    View Slide

  30. requestmap.webperf.tools

    View Slide

  31. View Slide

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

    View Slide

  33. View Slide

  34. View Slide

  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

    (Domain)

    View Slide

  36. View Slide

  37. View Slide

  38. 0s
    2.5s
    5s
    7.5s
    10s
    Load Start Render SpeedIndex
    Before After

    View Slide

  39. 0
    75
    150
    225
    300
    Requests
    Before After

    View Slide

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

    View Slide

  41. !
    This is very extreme
    and non-scientific

    View Slide

  42. Slow Origins

    View Slide


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

    View Slide

  44. charlesproxy.com

    View Slide

  45. View Slide

  46. Outages

    View Slide


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

    View Slide

  48. ##
    # Point third-party domains at WPT’s blackhole server.
    ##
    72.66.115.13 platform.twitter.com
    72.66.115.13 connect.facebook.net
    72.66.115.13 fonts.googleapis.com
    Blackhole

    Server

    View Slide

  49. View Slide

  50. Missing Files

    View Slide


  51. “All your users are non-JS while they’re
    downloading your JS.”
    —Jake Archibald (csswz.it/2FGKrpW)

    View Slide

  52. !
    Don’t optimise for
    users with

    JavaScript disabled…

    View Slide

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

    View Slide


  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

    View Slide

  55. View Slide

  56. View Slide

  57. Runtime Cost

    View Slide

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

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. Discuss

    View Slide

  63. Necessary Evil

    View Slide

  64. Necessary Evil

    View Slide

  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?

    View Slide

  66. Vendors

    View Slide

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

    View Slide

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

    View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. Internal Teams

    View Slide

  74. Remember our

    CSV file from before?

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. !
    Ask, don’t tell.

    View Slide

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

    View Slide


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

    What 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?”

    View Slide

  83. csswz.it/2rm29JY

    View Slide

  84. Mitigate

    View Slide

  85. Self-Host

    View Slide

  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!

    View Slide

  87. Where possible, self-
    host any critical assets.

    View Slide

  88. Load Asynchronously

    View Slide

  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.

    View Slide

  90. View Slide

  91. View Slide

  92. Resource Hints

    View Slide

  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.

    View Slide

  94. Font Provider
    Social Widget
    Ad Network

    View Slide

  95. {% if page.layout != "feature" %}






    {% endif %}
    {% if page.page-class == "page--services page--workshops" %}

    {% endif %}

    View Slide

  96. View Slide

  97. View Slide

  98. !
    Only warm up

    frequent, significant,

    and known origins.

    View Slide

  99. Content Security Policy (CSP)

    View Slide

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

    View Slide

  101. View Slide

  102. Feature Policy

    View Slide

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

    View Slide

  104. View Slide

  105. Subresource Integrity (SRI)

    View Slide

  106. src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/⮐

    NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">

    View Slide

  107. View Slide

  108. Priority Hints

    View Slide

  109. src="https://third-party.com/ads.js"

    importance="low">


    View Slide

  110. Restraint

    View Slide

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

    View Slide

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

    View Slide