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

Building for performance and resilience

Ded01cdab114abe4ec13511e4c25b9bb?s=47 Andy Hume
June 17, 2014
Technology
5
830

Building for performance and resilience

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

June 17, 2014
Tweet

More Decks by Andy Hume

See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
3
850
Architecting resilient front ends
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
4
540
Guardian Responsive Design, SmashingConf 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
6
400
Web Fonts as a Progressive Enhancement, Ampersand 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
2
590
Anatomy of a responsive page load, WhiskyWeb 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
10
1.4k
Breaking News & Breaking Software, SyncConf 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
0
110
Anatomy of a responsive page load, Responsive Day Out 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
23
3.1k
Responsive Guardian
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
21
780
CSS for grown ups: maturing best practises, SXSW 2012
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
102
46k

Other Decks in Technology

See All in Technology
YAMLを書くだけで構築できる分散ストレージ
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
PRO
0
190
AWS CLI入門_20220513
1642254df0e7560327cda4ddc071397e?s=48 suzakiyoshito
0
3.9k
Agile and Requirement : アジャイルな要件定義について考える
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
PRO
9
2.9k
SRE_チーム立ち上げから1年_気づいたら_SRE_っぽくない仕事まで貢献しちゃってる説
B35fa97f982d550e358a8c689c3f0fef?s=48 bitkey
PRO
0
2.2k
SRENEXT2022 組織にSREを実装していくまでの道のり
9cd2d753636f4849c881ccf2381228ee?s=48 marnie0301
1
430
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
0b238801605070def81a98cfe8061aee?s=48 shonansurvivors
3
2.9k
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
08672189228a165c14ed8d896f9a4d3a?s=48 akitok_
5
1.7k
220521_SFN_品質文化試論と『LEADING QUALITY』/220521_SFN_Essay_of_Quality_Culture_and_LEADING_QUALITY
C8cde92274f0ca1ff9b046673d4f2d29?s=48 mkwrd
0
250
New Features in C# 10/11
1c3658db58f755e44fc1a70255c08ff7?s=48 chack411
0
950
新規ゲームのリリース(開発)前からのSRE活動
B276b9088550bc522536ab9d471aeebe?s=48 tmkoikee
1
260
ソフトウェアテストで参考にしている67のモノ #scrumniigata / 67 things for software testing
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
PRO
1
470
A1A会社紹介資料-2022-05-20
154d77627bc95f4eb226c722023b5168?s=48 a1a
2
1.1k

Featured

See All Featured
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
19
1.4k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.3k
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
410k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k

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