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

Building for performance and resilience

Andy Hume
June 17, 2014
Technology
5
1.2k

Building for performance and resilience

Andy Hume

June 17, 2014
Tweet

More Decks by Andy Hume

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

Other Decks in Technology

See All in Technology
Amazon CloudWatchで始める エンドユーザー体験のモニタリング
o11yfes2023
0
180
20250411_HCCJP_AdaptiveCloudUpdates.pdf
sdosamut
1
110
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
190
Spice up your notifications/try!Swift25
noppefoxwolf
2
350
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
7
3.3k
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
140
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
130
より良い開発者体験を実現するために～開発初心者が感じた生成AIの可能性～
masakiokuda
0
120
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
110
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
290
AIで進化するソフトウェアテスト：mablの最新生成AI機能でQAを加速！
mfunaki
0
140
AWS全冠芸人が見た世界 ～資格取得より大切なこと～
masakiokuda
5
5.8k

Featured

See All Featured
Done Done
chrislema
183
16k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k

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