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

Building a Fast Website Against All Odds

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

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
300
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
600
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
120
F085bf2092cb300bac787cc5bc65d301?s=48 ryantownsend
1
170
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
A93d5da318eccb590724323cbc80f649?s=48 kodetr
0
180
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
2
120
A581cbb76555d4854d3264a16fed5d13?s=48 daiki_0816
0
230
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
1
4.6k
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
710
588a291ce25b07e836ae5df8911eaf18?s=48 tdak
0
230
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
12
4.5k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
220
9103dacbfc728d2a583981e7cf854cc4?s=48 fr0gger
2
3k
C655ad8165b97ea420bd8a33c62e7895?s=48 pco2699
0
120
13f3313ae1ec1d9b3ed76ccbd746291b?s=48 takuyaa
5
520
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
40
30k

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
54
4.3k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
777
200k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
16
4.6k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
680
Ecdea9b9714877b86cee08458f085481?s=48 trallard
16
880
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
40
4.7k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
330
16k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
96
14k
78b475797a14c84799063c7cd073962f?s=48 holman
462
280k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
146
20k

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