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
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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  6. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  10. “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 full-size slide


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

    View full-size slide


  12. “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 full-size slide


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

    View full-size slide

  14. Single Points of Failure (SPoF)

    View full-size slide

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

    View full-size slide

  16. Overhead and Impact

    View full-size slide

  17. requestmap.webperf.tools

    View full-size slide

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

    View full-size slide

  19. $ 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 full-size slide

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

    View full-size slide

  21. 0
    75
    150
    225
    300
    Requests
    Before After

    View full-size slide

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

    View full-size slide

  23. !
    This is very extreme
    and non-scientific

    View full-size slide

  24. Slow Origins

    View full-size slide


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

    View full-size slide

  26. charlesproxy.com

    View full-size slide


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

    View full-size slide

  28. ##
    # 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 full-size slide

  29. Missing Files

    View full-size slide


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

    View full-size slide

  31. !
    Don’t optimise for
    users with

    JavaScript disabled…

    View full-size slide

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

    View full-size slide


  33. “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 full-size slide

  34. Runtime Cost

    View full-size slide

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

    View full-size slide

  36. Necessary Evil

    View full-size slide

  37. Necessary Evil

    View full-size slide

  38. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Internal Teams

    View full-size slide

  42. Remember our

    CSV file from before?

    View full-size slide

  43. !
    Ask, don’t tell.

    View full-size slide

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

    View full-size slide


  45. “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 full-size slide

  46. csswz.it/2rm29JY

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. Load Asynchronously

    View full-size slide

  50. 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 full-size slide

  51. Resource Hints

    View full-size slide

  52. 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 full-size slide

  53. Font Provider
    Social Widget
    Ad Network

    View full-size slide

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






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

    {% endif %}

    View full-size slide

  55. !
    Only warm up

    frequent, significant,

    and known origins.

    View full-size slide

  56. Content Security Policy (CSP)

    View full-size slide

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

    View full-size slide

  58. Feature Policy

    View full-size slide

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

    View full-size slide

  60. Subresource Integrity (SRI)

    View full-size slide

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

    NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">

    View full-size slide

  62. Priority Hints

    View full-size slide

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

    importance="low">


    View full-size slide

  64. Use as little as possible
    for as long as possible.

    View full-size slide

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

    View full-size slide