Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chaperones and curfews – We Love Speed 2019

Ryan Townsend
September 20, 2019

Chaperones and curfews – We Love Speed 2019

Ryan Townsend

September 20, 2019
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

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 (eComm)
    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. Can you load it on user behaviour?

    View Slide

  43. Load reviews on user action
    -8s blocking JavaScript execution

    View Slide

  44. 2. How critical is it?

    View Slide

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

    View Slide

  46. 3. Do we need ALL of it?

    View Slide

  47. View Slide

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

    View Slide

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

    View Slide

  50. Check for image transformation

    View Slide

  51. Avoid tech debt

    View Slide

  52. Optimise your 3rd party scripts

    View Slide

  53. A/B test implementation
    +20s JavaScript execution

    View Slide

  54. 4. Can you load it asynchronously or defer it?

    View Slide

  55. View Slide

  56. “But what about the flicker!?”

    View Slide

  57. Curfew

    View Slide

  58. font-display: fallback

    View Slide

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

    View Slide

  60. View Slide

  61. View Slide

  62. View Slide


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

  64. View Slide

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

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

    View Slide

  67. • 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

  68. What about changes?

    View Slide

  69. View Slide

  70. Dual-phase loading

    View Slide

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

    View Slide

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

    View Slide

  73. 6. Can we preconnect or preload?

    View Slide

  74. • DNS Prefetch
    • Preconnect
    • Preload
    • Prefetch
    • Prerender (Nostate Prefetch)
    Check out: Harry Roberts – More Than You Ever Wanted To Know About Resource Hints

    View Slide

  75. View Slide

  76. Choose your friends

    View Slide

  77. View Slide

  78. View Slide

  79. The Windows 95 launch
    really got out of hand

    View Slide

  80. View Slide

  81. Protect your site from 3rd parties

    View Slide

  82. View Slide

  83. Kill Switch

    View Slide

  84. Feature-Policy

    View Slide

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

    View Slide

  86. Protect your site from your company

    View Slide

  87. Tag Managers

    View Slide

  88. It’s all our fault

    View Slide

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

    View Slide

  90. TWO TAG MANAGERS?

    View Slide

  91. View Slide

  92. View Slide

  93. Remember you have leverage

    View Slide

  94. Everybody wins…

    View Slide

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

    View Slide

  96. 32,000 sites benefitted.

    View Slide

  97. • 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

  98. Thank you!
    Ryan Townsend
    CTO, SHIFT – @ryantownsend
    twnsnd.com/welovespeed

    View Slide