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

Building for performance and resilience

Avatar for Andy Hume Andy Hume
June 17, 2014
Technology
5
1.2k

Building for performance and resilience

Avatar for Andy Hume

Andy Hume

June 17, 2014
Tweet

More Decks by Andy Hume

See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
Avatar for Andy Hume andyhume
2
1.2k
Architecting resilient front ends
Avatar for Andy Hume andyhume
3
880
Guardian Responsive Design, SmashingConf 2013
Avatar for Andy Hume andyhume
6
660
Web Fonts as a Progressive Enhancement, Ampersand 2013
Avatar for Andy Hume andyhume
2
780
Anatomy of a responsive page load, WhiskyWeb 2013
Avatar for Andy Hume andyhume
10
1.9k
Breaking News & Breaking Software, SyncConf 2013
Avatar for Andy Hume andyhume
0
290
Anatomy of a responsive page load, Responsive Day Out 2013
Avatar for Andy Hume andyhume
23
3.3k
Responsive Guardian
Avatar for Andy Hume andyhume
21
1.1k
CSS for grown ups: maturing best practises, SXSW 2012
Avatar for Andy Hume andyhume
101
47k

Other Decks in Technology

See All in Technology
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
Avatar for Naoko Shinagawa ratsbane666
0
100
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.8k
LLM時代のパフォーマンスチューニング：MongoDB運用で試したコンテキスト活用の工夫
Avatar for ishikawa-pro ishikawa_pro
0
170
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
7
380k
はじめてのOSS開発からみえたGo言語の強み
Avatar for shibutani shibukazu
4
1k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
500
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
Avatar for sh_fk2 sh_fk2
3
280
データ分析エージェント Socrates の育て方
Avatar for na0 na0
8
2.8k
人工衛星のファームウェアをRustで書く理由
Avatar for KOBA789 koba789
15
8.3k
react-callを使ってダイヤログをいろんなとこで再利用しよう！
Avatar for shinaps shinaps
2
270
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました！ - / How to start Scrum that is not written in the Scrum Guide 2nd
Avatar for TAKAKING22 takaking22
2
210
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
Avatar for oracle4engineer oracle4engineer
PRO
0
180

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

Transcript

  1. BUILDING FOR @andyhume SmashingConf, New York, 2014 PERFORMANCE RESILIENCE Tuesday,

    June 17, 14

  2. WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14

  3. WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14

  4. WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14

  5. WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14

  6. WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14

  7. WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14

  8. Measure http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  9. Measure http://www.flickr.com/photos/kayaker1204/4319542459/ We have a median page load me of

    seven seconds, and our primary compe tor has a median page load me of three seconds. Tell a story Tuesday, June 17, 14

  10. Measure http://www.flickr.com/photos/kayaker1204/4319542459/ Page load mes increased by 25% when we

    added feature x. Tell a story Tuesday, June 17, 14

  11. Your bosses love a story http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  12. Spread the word http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  13. What numbers?! http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  14. What numbers?! http://www.flickr.com/photos/kayaker1204/4319542459/ Page load time? Total download size? Start

    render time? Time to first byte? Response time? Total HTTP requests? Document load time? Tuesday, June 17, 14

  15. Tuesday, June 17, 14

  16. Tuesday, June 17, 14

  17. Tuesday, June 17, 14

  18. Tuesday, June 17, 14

  19. Tuesday, June 17, 14

  20. Tuesday, June 17, 14

  21. Tuesday, June 17, 14

  22. Load Time First Byte Start Render Fully Loaded Speed Index

    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  23. Load Time First Byte Start Render Fully Loaded Speed Index

    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  24. Load Time First Byte Start Render Fully Loaded Speed Index

    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  25. Measure and tracking trends http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  26. SpeedCurve http://speedcurve.com Tuesday, June 17, 14

  27. SpeedCurve http://speedcurve.com Tuesday, June 17, 14

  28. How to optimize http://www.flickr.com/photos/freefoto/2231356418/ Tuesday, June 17, 14

  29. Web performance 101 http://www.flickr.com/photos/freefoto/2231356418/ Content-Encoding: gzip Cache-Control: max-age=315360000 Tuesday, June

    17, 14

  30. Optimizing: First byte http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte Start Render

    Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  31. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp Tuesday, June 17, 14

  32. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp Tuesday, June 17, 14

  33. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp Tuesday, June 17, 14

  34. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp Tuesday, June 17, 14

  35. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp SSL Handshake Tuesday, June 17, 14

  36. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

  37. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

  38. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

  39. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

  40. Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

  41. Eliminate redirects Just eleminate redirects Flush the document early? Prefetch

    DNS? But really, just eleminate redirects Optimizing: First byte Tuesday, June 17, 14

  42. Optimizing: Start render http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte Start Render

    Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  43. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  44. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  45. Remote JS Optimizing: Start render HTML parser DOM tree Layout

    Paint Render tree Tuesday, June 17, 14

  46. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  47. inline script waiting on remote CSS Optimizing: Start render HTML

    parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

  48. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  49. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  50. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree fetching remote stylesheets Tuesday, June 17, 14

  51. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  52. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  53. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  54. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree Tuesday, June 17, 14

  55. Avoid blocking scripts Optimizing: Start render Tuesday, June 17, 14

  56. Optimizing: Start render <script> var script = document.createElement('script'); script.src =

    "app.js"; document.head.appendChild(script); </script> Tuesday, June 17, 14

  57. Optimizing: Start render <script> var script = document.createElement('script'); script.src =

    "app.js"; document.head.appendChild(script); </script> BREAKS THE PRE-PARSER! Tuesday, June 17, 14

  58. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser Tuesday, June 17, 14

  59. Remote JS Optimizing: Start render HTML parser DOM tree Layout

    Paint Render tree HTML pre- parser Tuesday, June 17, 14

  60. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser Tuesday, June 17, 14

  61. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser fetching remote stylesheets Tuesday, June 17, 14

  62. Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser Tuesday, June 17, 14

  63. Optimizing: Start render <script> var script = document.createElement('script'); script.src =

    "app.js"; document.head.appendChild(script); </script> BREAKS THE PRE-PARSER! Tuesday, June 17, 14

  64. Optimizing: Start render <script src="app.js" async defer></script> Tuesday, June 17,

    14

  65. Avoid blocking scripts Optimizing: Start render Move script elements to

    end of <body> Or... add async attribute to script elements Inline critical CSS Tuesday, June 17, 14

  66. Avoid blocking scripts Optimizing: Start render Move script elements to

    end of <body> Or... add async attribute to script elements Inline critical CSS https://github.com/pocketjoso/penthouse Tuesday, June 17, 14

  67. Optimizing: Load time fully loaded http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte

    Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  68. gzip compression (of course!) Far-future caching (of course!) Concatenate files

    (of course!) Optimizing: Load time fully loaded Tuesday, June 17, 14

  69. Optimizing: Speed Index http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte Start Render

    Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

  70. http://www.flickr.com/photos/vpickering/6824364286/ Resilience Tuesday, June 17, 14

  71. http://www.flickr.com/photos/the_jorr/325224175/ Unreliable Tuesday, June 17, 14

  72. http://www.flickr.com/photos/8040811@N06/3167877765 Progressive enhancement th Tuesday, June 17, 14

  73. The future http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  74. Future: HTTP/2 SPDY Tuesday, June 17, 14

  75. Future: HTTP/2 SPDY Multiplexing Cache pushing Tuesday, June 17, 14

  76. Future: ServiceWorker Tuesday, June 17, 14

  77. Future: ServiceWorker this.addEventListener('fetch', function (e) { if (e.request.url.host === 'guardian.co.uk')

    { e.forwardTo('http://theguardian.com'); } } (Possibly not possible) Tuesday, June 17, 14

  78. Future: ServiceWorker this.addEventListener('fetch', function (e) { if (window.innerWidth > 500)

    { e.forwardTo(e.request.url + '?width=large'); } } (Possibly not possible) Tuesday, June 17, 14

  79. Experiment and measure http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14

  80. Experiment and measure http://www.flickr.com/photos/kayaker1204/4319542459/ Theorize Experiment, and... Measure Tuesday, June

    17, 14

  81. Thank-you! http://lanyrd.com/sdbmhb @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike

    cc Tuesday, June 17, 14