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.

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

May 11, 2018
Tweet

Transcript

  1. 1.

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

    To Harry Roberts • @csswizardry
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 11.
  8. 13.
  9. 14.
  10. 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
  11. 18.
  12. 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)
  13. 21.

    “ “The Trainline reduced latency by 0.3 seconds across their

    funnel and customers spent an extra £8.1 million a year.”
  14. 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.”
  15. 25.
  16. 26.
  17. 27.
  18. 28.
  19. 31.
  20. 33.
  21. 34.
  22. 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)
  23. 36.
  24. 37.
  25. 45.
  26. 46.
  27. 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
  28. 49.
  29. 51.

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

    JS.” —Jake Archibald (csswz.it/2FGKrpW)
  30. 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
  31. 55.
  32. 56.
  33. 59.
  34. 60.
  35. 61.
  36. 62.
  37. 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?
  38. 66.
  39. 69.
  40. 70.
  41. 71.
  42. 72.
  43. 75.
  44. 76.
  45. 77.
  46. 78.
  47. 79.
  48. 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?”
  49. 84.
  50. 85.
  51. 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!
  52. 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.
  53. 90.
  54. 91.
  55. 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.
  56. 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">
  57. 96.
  58. 97.
  59. 101.
  60. 104.
  61. 107.
  62. 110.