Chaperones and Curfews: Minimising 3rd Party Impact

Talk given at PerfMatters 2019 – https://perfmattersconf.com

Every year websites get heavier – but the majority of growth isn’t coming from code written at the organisations running them... it’s coming from 3rd parties.

Long gone are the days when it was viable to build everything internally, but their impact on performance is already getting a little out-of-hand. We don’t want to be the fun police throwing everyone out, but we can start to moderate the party.

In this talk we won’t be looking to remove 3rd parties altogether – nobody likes having their toys taken away; instead we’ll be taking the practical approach of accepting that 3rd parties aren’t going anywhere and look at what strategies we can employ for maintaining performance and safeguarding against slowdowns, outages and abuse.

Transcript

1. Chaperones and curfews
   Minimising 3rd party impact
   Photo by Spenser on Unsplash
   

   View Slide

2. Who am I?
   Ryan Townsend
   @ryantownsend
   

   View Slide

3. View Slide

4. View Slide

5. • What are third parties?
   • Why are they problematic?
   • Why use them at all?
   • What can I do to mitigate against their impact?
   

   View Slide

6. What are third parties?
   

   View Slide

7. Any infrastructure or service on a
   separate origin that you don’t control
   

   View Slide

8. Why are third parties a problem?
   

   View Slide

9. Rewind back to Velocity 2011…
   

   View Slide

10. View Slide

11. View Slide

12. The web lived happily ever after.
    

    View Slide

13. Except it didn’t.
    

    View Slide

14. • Social media buttons
    • Tag managers
    • Ads
    • A/B testing tools
    • Personalisation
    • Analytics & Event Capture
    • Independent Customer Reviews
    • Retargeting
    • Affiliate trackers
    • Live chat
    • Hosted webfonts
    • Comment platforms
    • Videos
    • Developer Utilities
    

    View Slide

15. Source: Steve Souders / HTTP Archive
    

    View Slide

16. Source: Yottaa
    Average # of 3rd Parties
    2015 2016 2017 2018
    85
    60
    37
    15
    

    View Slide

17. “Can I bring a +1?”
    

    View Slide

18. requestmap.webperf.tools
    

    View Slide

19. But it’s not just the volume…
    

    View Slide

20. “There is zero performance overhead to
    using our synchronous script […] our
    typical response time is around 200ms”
    – Popular Third Party Provider
    

    View Slide

21. Source: Steve Souders / HTTP Archive
    

    View Slide

22. And it’s not just the network…
    

    View Slide

23. Continual JavaScript execution
    1 second
    

    View Slide

24. “Third party script execution is the
    majority chunk of the web today”
    – Patrick Hulce, Lighthouse
    

    View Slide

25. The average execution time per
    third-party is 225ms
    

    View Slide

26. 85 third-parties x 225ms = 19s
    

    View Slide

27. It’s not even just the visitors
    who are affected…
    

    View Slide

28. • Inaccurate development & QA experience
    • Unable to perform commit/build-time linting
    • Governance processes in the hands of the 3rd party
    

    View Slide

29. Why use third parties?
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. • You can’t build it all yourself
    • You shouldn’t build it all yourself
    • You’re hacking around technical limitations
    • You’re hacking around organisational limitations
    

    View Slide

34. So, what can we do?
    

    View Slide

35. Identify your third parties
    

    View Slide

36. requestmap.webperf.tools
    

    View Slide

37. Long-running JavaScript
    Large payloads
    webpagetest.org/easy
    

    View Slide

38. View Slide

39. • It’s My (Third) Party and I’ll Cry If I Want To

    Harry Roberts (@csswizardry)
    • AB Testing, Ads & Other 3rd Party Tags

    Andy Davies (@andydavies)
    • Performance Audit (Live)

    Tim Kadlec (@tkadlec)
    • Raiders of the Fast Start

    Katie Sylor-Miller (@ksylor)
    

    View Slide

40. Consider your loading strategy
    

    View Slide

41. 1. Where/when do you need to load it?
    

    View Slide

42. 2. How critical is it?
    

    View Slide

43. Progressive enhancement isn’t just for
    first-party JavaScript
    

    View Slide

44. 3. Do we need ALL of it?
    

    View Slide

45. View Slide

46. • Check for GZIP/Brotli compression
    • Subset fonts
    • Centralise data capture (e.g. Segment)
    • Disable loading libraries
    

    View Slide

47. You can’t all bring jQuery as your +1!
    

    View Slide

48. Check for image transformation
    

    View Slide

49. Avoid tech debt
    

    View Slide

50. Optimise your 3rd party scripts
    

    View Slide

51. 4. Can you load it asynchronously / deferred?
    

    View Slide

52. View Slide

53. “But what about the flicker!?”
    

    View Slide

54. Curfew
    

    View Slide

55. font-display: fallback
    

    View Slide

56. Implement this one NASTY trick… you’ll never
    believe what happened next
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. 
    <br/>function showBody() {<br/>document.body.style.display = 'block';<br/>}<br/>setTimeout(showBody, 3000)<br/>
    onload="showBody()"
    onerror="showBody()"
    importance="high"
    async>
    
    
    
    ...
    
    when the script loads/fails: show the body
    hide the whole body
    after 3 seconds: show the body regardless
    

    View Slide

61. View Slide

62. function timeout(delay){
    return new Promise(function(resolve, reject) {
    setTimeout(function() {
    resolve(new Response('', {
    status: 408,
    statusText: 'Request timed out.'
    }))
    }, delay)
    })
    }
    self.addEventListener('fetch', function(event) {
    // if the request is not for example.com, serve requests normally
    if (!event.request.url.includes('example.com')) {
    return
    }
    return event.respondWith(caches.match(event.request).then(function(response) {
    return response || Promise.race([
    timeout(2000),
    fetch(event.request)
    ])
    }))
    })
    attempt the request
    force a 2-second timeout
    service-worker-timeout.twnsnd.com
    

    View Slide

63. 5. Can you self-host the resources?
    

    View Slide

64. • No DNS lookup
    • No connection setup
    • No SSL negotiation
    • “Better” HTTP/2 prioritisation
    • You can fingerprint and use far-future expiry
    • Plays nicer with Content-Security-Policies *
    

    View Slide

65. What about changes?
    

    View Slide

66. View Slide

67. Dual-phase loading
    

    View Slide

68. https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec
    

    View Slide

69. https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec
    

    View Slide

70. 6. Can we preconnect or preload?
    

    View Slide

71. Choose your friends
    

    View Slide

72. View Slide

73. View Slide

74. The Windows 95 launch
    really got out of hand
    

    View Slide

75. View Slide

76. Protect your site from 3rd parties
    

    View Slide

77. View Slide

78. Kill Switch
    

    View Slide

79. Feature-Policy
    

    View Slide

80. sync-xhr, document-write, legacy-image-formats,
    max-downscaling-image, unsized-media,
    image-compression, font-display-late-swap,
    lazyload, unoptimized-images
    

    View Slide

81. Protect your site from your company
    

    View Slide

82. Tag Managers
    

    View Slide

83. It’s all our fault
    

    View Slide

84. • Embed manually and maintain a clear release runway
    • Migrate long-term scripts to core site
    • Server-side tag management
    

    View Slide

85. TWO TAG MANAGERS?
    

    View Slide

86. View Slide

87. View Slide

88. Remember you have leverage
    

    View Slide

89. Everybody wins…
    

    View Slide

90. “Huge props to WordAds for reducing their
    impact from ~2.5s to ~200ms on average!”
    – Patrick Hulce, Lighthouse
    

    View Slide

91. 32,000 sites benefitted.
    

    View Slide

92. • You don’t make friends taking toys away
    • Understand really how your third parties are used
    • Work with what you’ve got and optimise
    • Assume third parties will burn you
    • Protect yourself
    • Work with them for the better of the whole web
    

    View Slide

93. Thank you!
    Ryan Townsend
    CTO, SHIFT – @ryantownsend
    twnsnd.com/perfmatters
    

    View Slide