Pro Yearly is on sale from $80 to $50! »

Building a Fast Website Against All Odds

F085bf2092cb300bac787cc5bc65d301?s=47 Ryan Townsend
May 08, 2018
Programming
2
200

Building a Fast Website Against All Odds

Code Europe, Kraków 2018

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

May 08, 2018
Tweet

More Decks by Ryan Townsend

See All by Ryan Townsend
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
0
280
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
560
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

Other Decks in Programming

See All in Programming
D6fcc16462fbe93673342da3ff5d8121?s=48 xhochy
0
120
4ae5ae2c4411d41bd8c7e75830ed313d?s=48 myamagishi
1
210
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
1
130
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
1
320
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
1
1.3k
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
250
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
290
37b01da9150c1e789f35771b06d36890?s=48 morimorihoge
4
490
64c1a3841da6d254ac11d9d842e04ce4?s=48 dalinaum
1
530
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
0
100
Fed4c6cfec7502b771e12f08f8d5ec6d?s=48 okajun35
0
610
9e9eb825c69d719f2d3c32bdd3bc971e?s=48 atp
1
190

Featured

See All Featured
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k
79acae287842acf29084005533a7fb3b?s=48 hursman
105
9.2k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
258
11k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.3k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
268
16k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
358
62k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
14
1.4k

Transcript

  1. Code Europe, Krakow 2018 Building a Fast Website Against All

    Odds Photo by Emil Vilsek on Unsplash

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

  3. None

  4. Performance is pretty important… https://www.youtube.com/watch?v=fsrZ5nJ883E

  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 https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7#6f31

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

    ranking factor for mobile searches.” – Google https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

  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 http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html

  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 http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html

  12. Performance = AOV

  13. +8.7% AOV

  14. +9.6% pages/session

  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 has faced challenges getting sign-off for budget or changes in order to improve and value performance?

  18. Selling performance can be tricky

  19. “It's easier to ask forgiveness than it is to get

    permission.” – Grace Hopper

  20. Smithsonian Institution Neg. 83-14878.

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

  22. Before we start optimising…

  23. Monitor & Measure

  24. Understand your users and build for the future

  25. The Slowest Site in the World

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

  27. None
  28. None
  29. None

  30. Initial Results? •Start render: 6.4s •SpeedIndex: 12717 •DOM Interactive: 4.4s

    •Bandwidth: 2,594 KB
  31. None

  32. Connection

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

    check features are enabled: •Compression: GZIP, Brotli •OCSP for SSL •HTTP/2, QUIC •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 Harry Roberts – @csswizardry

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

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

  39. Results? Start Render SpeedIndex DOM Interactive Bandwidth (-1.8s) (+184) (-0.1s)

    (no change)

  40. Images

  41. Foreground vs Background

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

  43. None
  44. None

  45. Lazy-load Beneath the Fold

  46. None
  47. None

  48. Serve Appropriate Sizes

  49. None

  50. Serve Appropriate Formats

  51. None
  52. None
  53. None

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

  55. None
  56. None

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

  58. Results? Start Render SpeedIndex DOM Interactive Bandwidth (-1.7s) (-6948) (-0.1s)

    (-2,224KB)

  59. https://images.guide/

  60. JavaScript

  61. https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

  62. Sync vs Async vs Defer

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

  64. Bundling & Tree-shaking

  65. Results? Start Render SpeedIndex DOM Interactive Bandwidth (-0.1s) (-691) (-2.2s)

    (-5KB)

  66. CSS

  67. Remove @import

  68. Inline (Critical) CSS

  69. Asynchronous below-the-fold CSS

  70. Results? Start Render SpeedIndex DOM Interactive Bandwidth (-0.1s) (-348) (-0.2s)

    (no change)

  71. Webfonts

  72. Self-host

  73. WOFF2

  74. None

  75. font-display: swap / optional

  76. None

  77. unicode-range

  78. /* 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; }

  79. Results? Start Render SpeedIndex DOM Interactive Bandwidth (-1.8s) (-258) (-0.1s)

    (no change)

  80. Show me the money…

  81. Final Results? Start Render SpeedIndex DOM Interactive Bandwidth (-3.8s) (-8486)

    (-2.1s) (-2,229KB)

  82. Original Optimised

  83. Bonus Point!

  84. Service Workers

  85. None

  86. •Network control •Offline support •Progressive Web Apps (PWAs) •Protect against

    3rd party slow-downs

  87. 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) ])); });

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

  89. Thoughts on AMP

  90. •Restricted HTML: limited AMP elements •Restricted JS: no custom JS

    allowed •Restricted CSS: inlined, 50kb max •No repaint: fixed element sizing •No desktop: mobile-only •Shown within Google’s branding •Stale-while-revalidate: minimum 15 seconds refresh

  91. It’s gonna get expensive

  92. Why don’t we just build fast sites in the first

    place?

  93. But the carousel!

  94. “[…] we now feel ready to take the next step

    and work to support more instant-loading content not based on AMP technology in areas of Google Search designed for this, like the Top Stories carousel” – AMP Project @ Google https://www.ampproject.org/latest/blog/standardizing-lessons-learned-from-amp/

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