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

You Don't Need Permission to Build Fast Websites

F085bf2092cb300bac787cc5bc65d301?s=47 Ryan Townsend
May 23, 2018
Programming
0
140

You Don't Need Permission to Build Fast Websites

infoShare, Gdansk 2018

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

May 23, 2018
Tweet

More Decks by Ryan Townsend

See All by Ryan Townsend
Chaperones and curfews – We Love Speed 2019
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
410
Chaperones and Curfews: Minimising 3rd Party Impact
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
730
Building Fast Websites Against All Odds – Making Software 2018
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
190
Building Fast Websites Against All Odds - Leeds JS 2018
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
250
Beyond The Buzzwords - Microservices and Event-Driven Architecture
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
240
Building Fast Websites Against All Odds - MerseyCode 2018
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
81
Building Fast Websites Against All Odds - Tinel Meetup 2018
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
110
Building Fast Websites Against All Odds
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
120
Building Fast Websites Against All Odds
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
320

Other Decks in Programming

See All in Programming
ふんわり理解するcontext
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
1
180
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
1
140
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
490
How to Test Your Compose UI (Droidcon Berlin 2022)
E8168a08862631072b2e82e7b662dc07?s=48 stewemetal
1
130
Amazon SageMakerでImagenを動かして猫画像生成してみた
5426a03f740cd61fa5e0d4bfdb7a6cc8?s=48 hotoke_neko
0
110
SRE NEXT 2022に学ぶこれからのSREキャリア
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
2
390
SAM × Dockerでサーバーレス開発が超捗った話
Cd029ecf0f2e807120fcf05161ce84b8?s=48 yu_yukk_y
1
360
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
190
FullStack eXchange, July 2022
6f3ec7315ad0715ae2a5f89a52877218?s=48 brucel
0
200
Pythonによる開発をアップデートするライブラリの紹介
4b46b5f1acab7f5a64c0036c1fc39f31?s=48 daikikatsuragawa
1
600
夕食断食にTRY!/for-lt-12th
82492720940b57cec5072e190213ba3a?s=48 pachikuriii
0
240
VIMRC 2022
E76db8a47bdae9ef76629ecb366483ed?s=48 achimnol
0
130

Featured

See All Featured
Become a Pro
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
3
910
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
334
37k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.7k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.3k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.2k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
131
21k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
60
3.9k

Transcript

  1. infoShare, Gdansk 2018 You don’t need permission to build fast

    websites Photo by Emil Vilsek on Unsplash

  2. Who am I? Ryan Townsend CTO, SHIFT – @ryantownsend

  3. None

  4. Performance is pretty important… ‘Why Fast Matters’ by @csswizardry –

    https://bit.ly/2kiVDAz

  5. Traffic x Conversion Rate x AOV =

  6. Performance = Traffic

  7. “The result of rebuilding our pages for performance led to

    [...] a 15 percent increase in SEO traffic” – Pinterest Source – https://bit.ly/2ICPv4Z

  8. “[…] starting in July 2018, page speed will be a

    ranking factor for mobile searches.” – Google Source – https://bit.ly/2Dt5Plz

  9. Performance = Conversion

  10. “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” – Mobify Source – https://bit.ly/2s0FDHS

  11. “Similarly, for every 100ms decrease in checkout page load speed,

    Mobify's customers saw a 1.55% lift in session based conversion, amounting to an average annual revenue increase of $526,147” – Mobify Source – https://bit.ly/2s0FDHS

  12. Performance = AOV

  13. +9.6% pages/session

  14. +8.7% AOV

  15. Performance x Performance x Performance =

  16. But it’s not that easy…

  17. Who believes performance is important to the user experience? Who

    actively wants to build faster websites? Who feels their clients or business don’t value performance as much as they should?

  18. Selling performance can be tricky

  19. Smithsonian Institution Neg. 83-14878. “It's easier to ask forgiveness than

    it is to get permission.” – Grace Hopper

  20. You don’t need permission to build fast websites

  21. Before we start optimising…

  22. Monitor & Measure

  23. Understand your users and build for the future

  24. The Slowest Site in the World

  25. github.com/ryantownsend/slowest-site-in-the-world

  26. None
  27. None
  28. None

  29. Initial Results? •Start render: 6.4s •SpeedIndex: 12717 •Interactive: 4.4s •Bandwidth:

    2,594 KB
  30. None
  31. None

  32. Connection

  33. You can’t control your infrastructure without permission, but you can

    check features are enabled: •GZIP / Brotli •OCSP for SSL •HTTP/2 •Connection: keep-alive

  34. <head>

  35. Correct Order 1. <meta> character encoding / viewport 2. <title>

    3. Resource hints 4. Inline <script> 5. External stylesheet 6. Inline <style> 7. External <script> 8. Anything else, e.g. other meta tags Source – @csswizardry

  36. Resource Hints •DNS Prefetch •Preconnect (CDN, 3rd parties) •Prefetch •Preload

    (CSS @imports, @font-face etc)
  37. None
  38. None
  39. None

  40. Results?

  41. Start Render SpeedIndex Interactive Bandwidth (-1.8s) (+184) (-0.1s) (no change)

    Value: $6,782,202 / year Value based on Modify case study

  42. Images

  43. Foreground vs Background

  44. <img src=“image.jpg” /> background-image: url(image.jpg) vs

  45. None
  46. None

  47. Lazy-load Beneath the Fold

  48. None

  49. Source – medium.com

  50. Source – medium.com

  51. Serve Appropriate Sizes

  52. None

  53. Serve Appropriate Formats

  54. None
  55. None
  56. None

  57. https://www.xnview.com/en/

  58. None
  59. None

  60. <picture> <!--[if IE 9]><video style="display: none;><![endif]--> <source srcset='hero@1600w.jxr 1600w, ...'

    type='image/vnd.ms-photo' /> <source srcset='hero@1600w.jp2 1600w, ...' type='image/jp2' /> <source srcset='hero@1600w.webp 1600w, ...' type='image/webp' /> <!--[if IE 9]></video><![endif]--> <img srcset=' hero@1600w.jpg 1600w, hero@1400w.jpg 1400w, hero@1200w.jpg 1200w, ...' src='hero@400w.jpg' alt='Hero Image' /> </picture>

  61. Results?

  62. Start Render SpeedIndex Interactive Bandwidth (-1.7s) (-6948) (-0.1s) (-2,224KB) Value:

    $6,405,413 / year Value based on Modify case study

  63. https://images.guide/

  64. CSS

  65. Remove @import

  66. Inline (Critical) CSS

  67. Asynchronous below-the-fold CSS

  68. Results?

  69. Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-348) (-0.2s) (no change)

    Value: $376,789 / year Value based on Modify case study

  70. Start Render SpeedIndex Interactive Bandwidth (-90.1s) (-∞) (-0.2s) (no change)

    Value: $339,486,889 / year Value based on Modify case study

  71. Start Render SpeedIndex Interactive Bandwidth (-90.1s) (-87630) (-0.2s) (no change)

    Value: $38,754 / hour Value based on Modify case study

  72. JavaScript

  73. Sync vs Async vs Defer

  74. Don’t let third parties control your performance or uptime

  75. https://cdnjs.cloudflare.com/ajax/ libs/jquery/3.3.1/jquery.min.js

  76. Source – https://bit.ly/2ij5XIt

  77. Bundling & Tree-shaking

  78. Results?

  79. Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-691) (-2.2s) (-5KB) Value:

    $376,789 / year Value based on Modify case study

  80. Webfonts

  81. Self-host

  82. WOFF2

  83. None

  84. font-display: swap / optional

  85. None

  86. unicode-range

  87. /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight:

    400; src: local('Montserrat Regular'), local(‘Montserrat-Regular'), url(/fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }

  88. Results?

  89. Start Render SpeedIndex Interactive Bandwidth (-1.8s) (-258) (-0.1s) (no change)

    Value: $6,782,202 / year Value based on Modify case study

  90. Show me the money…

  91. Start Render SpeedIndex Interactive Bandwidth (-3.8s) (-8486) (-2.1s) (-2,229KB) Value:

    $14,317,982 / year Value based on Modify case study

  92. Original Optimised

  93. Low-hanging fruit can have immense impact on performance

  94. Bonus Point!

  95. Service Workers

  96. None

  97. •Network control •Offline support •Progressive Web Apps (PWAs) •stale-while-revalidate /

    stale-while-error •Protect against 3rd party slow-downs

  98. 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 { event.respondWith(Promise.race([ timeout(2000), fetch(event.request) ])); });

  99. Free eBook available – https://bit.ly/2BNcPZN

  100. Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend