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.

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
     csswizardry@gmail.com
     speakerdeck.com/csswizardry
     harry.is/for-hire
     

     View Slide