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
130

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
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
290
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
590
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
110
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
160
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
140
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
74
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
110
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
110
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
270

Other Decks in Programming

See All in Programming
39adbc0cddb8c0ea8470c80248e9e71b?s=48 hyodol2513
2
1k
9103dacbfc728d2a583981e7cf854cc4?s=48 fr0gger
2
2.5k
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
5
3.2k
8847086af047cbf895ab3277b59529fe?s=48 andpad
0
340
02ca2dc42e6d88c692a21b18200796a1?s=48 shun_oshidari
6
2.8k
4ccf6c02807d06f043a71435c48ce86a?s=48 eller86
0
570
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
3
160
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
130
0e6b2b5b4861d0e4b136527c0d7d428e?s=48 imk2o
0
180
Ec2fcdc4ea7905b289967a2c4c43e154?s=48 sgeengineer
1
170
D30b39411129795f28140809e9694265?s=48 nori0__
1
480
Dee9a95c0e5483692c54cc5e60e8b09e?s=48 yusuke57
0
120

Featured

See All Featured
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
7
440
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.4k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
12
860
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
117
4.9k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
19
1.3k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k

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