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

Building a Fast Website Against All Odds

Ryan Townsend
May 08, 2018
Programming
2
240

Building a Fast Website Against All Odds

Code Europe, Kraków 2018

Ryan Townsend

May 08, 2018
Tweet

More Decks by Ryan Townsend

See All by Ryan Townsend
Chaperones and curfews – We Love Speed 2019
ryantownsend
0
440
Chaperones and Curfews: Minimising 3rd Party Impact
ryantownsend
1
770
Building Fast Websites Against All Odds – Making Software 2018
ryantownsend
1
200
Building Fast Websites Against All Odds - Leeds JS 2018
ryantownsend
1
270
Beyond The Buzzwords - Microservices and Event-Driven Architecture
ryantownsend
0
250
Building Fast Websites Against All Odds - MerseyCode 2018
ryantownsend
0
84
Building Fast Websites Against All Odds - Tinel Meetup 2018
ryantownsend
0
110
Building Fast Websites Against All Odds
ryantownsend
0
120
Building Fast Websites Against All Odds
ryantownsend
0
360

Other Decks in Programming

See All in Programming
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
120
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
260
Gradle build: The time is now
nonews
1
460
OSSから学んだPR Descriptionの書き方
fugakkbn
4
130
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
530
Zynq MP SoC で楽しむエッジコンピューティング ～RTLプログラミングのススメ～
ryuz88
0
350
AWSにおける標的型Bot対策
hacomono
0
410
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
120
2023年にクル（かもしれない）通信ミドルウェア技術（仮）
s_hosoai
0
200
Jetpack Compose 完全に理解した
mkeeda
1
460
WordPress（再）入門 - 基礎知識・環境編
oleindesign
1
130

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
Into the Great Unknown - MozCon
thekraken
2
290
How to Ace a Technical Interview
jacobian
270
21k
Six Lessons from altMBA
skipperchong
15
2.3k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Bootstrapping a Software Product
garrettdimon
299
110k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Scaling GitHub
holman
453
140k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k

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='[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>

  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