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

Building Fast Websites Against All Odds

Ryan Townsend
May 26, 2018
Programming
0
700

Building Fast Websites Against All Odds

DevDay, Berlin 2018

Ryan Townsend

May 26, 2018
Tweet

More Decks by Ryan Townsend

See All by Ryan Townsend
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
230
The Unbearable Weight of Massive JavaScript – performance.now()
ryantownsend
0
3.4k
Chaperones and Curfews: Minimising 3rd Party Impact
ryantownsend
1
1.2k
Beyond The Buzzwords - Microservices and Event-Driven Architecture
ryantownsend
0
420
Don't Panic! How to launch a large-scale website confidently and successfully
ryantownsend
1
220
Have your cake and eat it: an introduction to event-driven architecture
ryantownsend
1
280
Introduction to event-driven architectures with Apache Kafka on Heroku
ryantownsend
2
490
How to launch a large-scale website confidently and successfully
ryantownsend
2
270

Other Decks in Programming

See All in Programming
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！
maroon1st
0
450
これが俺の”自分戦略” プロセスを楽しんでいこう！ - Developers CAREER Boost 2024
niftycorp
PRO
0
190
103 Early Hints
sugi_0000
1
220
MCP with Cloudflare Workers
yusukebe
2
220
From Translations to Multi Dimension Entities
alexanderschranz
2
130
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
200
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
250
良いユニットテストを書こう
mototakatsu
4
1.7k
快速入門可觀測性
blueswen
0
320
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
120

Featured

See All Featured
Become a Pro
speakerdeck
PRO
26
5k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Producing Creativity
orderedlist
PRO
341
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Unsuck your backbone
ammeep
669
57k
Optimising Largest Contentful Paint
csswizardry
33
3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Cost Of JavaScript in 2023
addyosmani
45
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Statistics for Hackers
jakevdp
796
220k
Gamification - CAS2011
davidbonilla
80
5.1k

Transcript

  1. DevDay, Berlin 2018 Building fast websites 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… ‘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. Selling performance can be tricky

  18. “Can you implement AMP?”

  19. •Replica of your site •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 •Extra QA effort

  20. It’s gonna get expensive

  21. “But the carousel!”

  22. None

  23. “[…] 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 Source – https://bit.ly/2JakbtC

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

    place?

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

    it is to get permission.” – Grace Hopper

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

  27. The Slowest Site in the World

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

  29. None

  30. https:/ /www.webpagetest.org/easy

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

    2,594 KB
  32. None

  33. 1. Connection 2. <head> 3. CSS 4. Webfonts 5. JavaScript

    6. Images

  34. Connection

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

  36. <head>

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

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

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

  40. Progressive-enhancement, solid support

  41. Progressive-enhancement, solid support

  42. Results?

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

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

  44. CSS

  45. Remove @import

  46. Inline (Critical) CSS

  47. Asynchronous below-the-fold CSS

  48. Results?

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

    Value: $376,789 / year Value based on Mobify case study (ideal conditions)

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

    Value: $339,486,889 / year Value based on Mobify case study (Google Fonts offline)

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

    Value: $38,754 / hour Value based on Mobify case study (Google Fonts offline)

  52. Webfonts

  53. Self-host

  54. font-display: swap / optional

  55. Progressive-enhancement, average support

  56. WOFF2

  57. Solid support, WOFF1 for IE9-IE11

  58. unicode-range (bundling for web fonts)

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

  60. Results?

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

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

  62. JavaScript

  63. Sync vs Async vs Defer still valuable! to be avoided!

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

  65. https://cdnjs.cloudflare.com/ajax/ libs/jquery/3.3.1/jquery.min.js (to be avoided!)

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

  67. Bundling & Tree-shaking

  68. Results?

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

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

  70. Images

  71. Foreground vs Background

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

  73. Hero loaded after lower-priority product images

  74. Corrected by using a foreground <img>

  75. Lazy-load Beneath the Fold

  76. None
  77. None

  78. Source – medium.com Low-Quality Image Preview (LQIP)

  79. Source – medium.com Low-Quality Image Preview (LQIP)

  80. Serve Appropriate Sizes

  81. Latest version of all the major browsers

  82. Serve Appropriate Formats

  83. Blink-based browsers only

  84. Safari only

  85. IE/Edge only

  86. <picture> <!--[if IE 9]><video style="display: none;><![endif]--> <source srcset='[email protected] 1600w, ...'

    type='image/vnd.ms-photo' /> <source srcset='[email protected] 1600w, ...' type='image/jp2' /> <source srcset='[email protected] 1600w, ...' type='image/webp' /> <!--[if IE 9]></video><![endif]--> <img srcset=' [email protected] 1600w, [email protected] 1400w, [email protected] 1200w, ...' src='[email protected]' alt='Hero Image' /> </picture> our different formats our different sizes fallback to JPEG with an old-school <img> ‘src’

  87. Results?

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

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

  89. https://images.guide/

  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 Mobify case study

  92. Original Optimised https://bit.ly/2IViWzf

  93. What about Dev Day 2018?

  94. Start Render SpeedIndex Interactive Bandwidth (-1.7s) (-2335) (-5.2s) (-3,105KB) Value:

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

  95. 323,000 tickets

  96. https://bit.ly/2L6LW3T

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

  98. Bonus Point!

  99. Service Workers

  100. Latest version of all the major browsers

  101. •Progressive enhancement •Network control •Offline support •Progressive Web Apps (PWAs)

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

  102. 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([ fetch(event.request), timeout(2000) ])); }); attempt the request force a 2-second timeout

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