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

Building a Fast Website Against All Odds

Building a Fast Website Against All Odds

Code Europe, Kraków 2018

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

May 08, 2018
Tweet

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