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

Chaperones and curfews – We Love Speed 2019

F085bf2092cb300bac787cc5bc65d301?s=47 Ryan Townsend
September 20, 2019
Programming
0
280

Chaperones and curfews – We Love Speed 2019

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

September 20, 2019
Tweet

More Decks by Ryan Townsend

See All by Ryan Townsend
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
570
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
110
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
150
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
130
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
71
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
110
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
110
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
250
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
130

Other Decks in Programming

See All in Programming
8c870088e1f657062e661fdaf5ce6ec3?s=48 nauleyco
0
210
22e056dcb79e14363e844f1e57986325?s=48 aratayokoyama
0
210
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
270
A7a5efde86e0137d32a93d8609b7a022?s=48 yumcyawiz
4
640
027cabf82b6860498e5107f500bed48f?s=48 nanimonodemonai
2
1.4k
Aa97a6ad2c4c8422f5580f4f9d5b5744?s=48 dulltz
0
520
9ed92fc8760bf8b6ea2a034022052b42?s=48 takaram
1
1.2k
C90bac78c0fb61105cfd8239767f903d?s=48 o0h
PRO
1
1.5k
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
2
3k
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho525
0
140
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
1.3k
Fa54d97af93719f9aa82873de3acb3b3?s=48 decoc
1
340

Featured

See All Featured
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
52
3.4k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
200
20k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
499
130k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
368
42k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.8k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
17
1.8k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.6k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
310
21k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
35k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
39
2.3k

Transcript

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

    on Unsplash

  2. Who am I? Ryan Townsend @ryantownsend

  3. None
  4. None

  5. • What are third parties? • Why are they problematic?

    • Why use them at all? • What can I do to mitigate against their impact?

  6. What are third parties?

  7. Any infrastructure or service on a separate origin that you

    don’t control

  8. Why are third parties a problem?

  9. Rewind back to Velocity 2011…

  10. None
  11. None

  12. The web lived happily ever after.

  13. Except it didn’t.

  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

  15. Source: Steve Souders / HTTP Archive

  16. Source: Yottaa Average # of 3rd Parties (eComm) 2015 2016

    2017 2018 85 60 37 15

  17. “Can I bring a +1?”

  18. requestmap.webperf.tools

  19. But it’s not just the volume…

  20. “There is zero performance overhead to using our synchronous script

    […] our typical response time is around 200ms” – Popular Third Party Provider

  21. Source: Steve Souders / HTTP Archive

  22. And it’s not just the network…

  23. Continual JavaScript execution 1 second

  24. “Third party script execution is the majority chunk of the

    web today” – Patrick Hulce, Lighthouse

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

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

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

  28. • Inaccurate development & QA experience • Unable to perform

    commit/build-time linting • Governance processes in the hands of the 3rd party

  29. Why use third parties?

  30. None
  31. None
  32. None

  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

  34. So, what can we do?

  35. Identify your third parties

  36. requestmap.webperf.tools

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

  38. None

  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)

  40. Consider your loading strategy

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

  42. Can you load it on user behaviour?

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

  44. 2. How critical is it?

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

  46. 3. Do we need ALL of it?

  47. None

  48. • Check for GZIP/Brotli compression • Subset fonts • Centralise

    data capture (e.g. Segment) • Disable loading libraries

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

  50. Check for image transformation

  51. Avoid tech debt

  52. Optimise your 3rd party scripts

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

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

  55. None

  56. “But what about the flicker!?”

  57. Curfew

  58. font-display: fallback

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

    next
  60. None
  61. None
  62. None

  63. <head> <script> function showBody() { document.body.style.display = 'block'; } setTimeout(showBody,

    3000) </script> <script src="https://myadprovider.com/" onload="showBody()" onerror="showBody()" importance="high" async> </script> </head> <body style="display:none"> ... </body> when the script loads/fails: show the body hide the whole body after 3 seconds: show the body regardless
  64. None

  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

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

  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 *

  68. What about changes?

  69. None

  70. Dual-phase loading

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

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

  73. 6. Can we preconnect or preload?

  74. • DNS Prefetch • Preconnect • Preload • Prefetch •

    Prerender (Nostate Prefetch) Check out: Harry Roberts – More Than You Ever Wanted To Know About Resource Hints
  75. None

  76. Choose your friends

  77. None
  78. None

  79. The Windows 95 launch really got out of hand

  80. None

  81. Protect your site from 3rd parties

  82. None

  83. Kill Switch

  84. Feature-Policy

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

  86. Protect your site from your company

  87. Tag Managers

  88. It’s all our fault

  89. • Embed manually and maintain a clear release runway •

    Migrate long-term scripts to core site • Server-side tag management

  90. TWO TAG MANAGERS?

  91. None
  92. None

  93. Remember you have leverage

  94. Everybody wins…

  95. “Huge props to WordAds for reducing their impact from ~2.5s

    to ~200ms on average!” – Patrick Hulce, Lighthouse

  96. 32,000 sites benefitted.

  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

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