Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building for performance and resilience
Search
Andy Hume
June 17, 2014
Technology
5
1.2k
Building for performance and resilience
Andy Hume
June 17, 2014
Tweet
Share
More Decks by Andy Hume
See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
andyhume
2
1.2k
Architecting resilient front ends
andyhume
3
880
Guardian Responsive Design, SmashingConf 2013
andyhume
6
660
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
780
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.9k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
290
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
社内お問い合わせBotの仕組みと学び
nish01
1
510
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
560
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
230
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
160
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
Findy Team+のSOC2取得までの道のり
rvirus0817
0
500
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
3
760
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
920
多野優介
tanoyusuke
1
480
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Embracing the Ebb and Flow
colly
88
4.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Rails Girls Zürich Keynote
gr2m
95
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Mobile First: as difficult as doing things right
swwweet
224
10k
Unsuck your backbone
ammeep
671
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
GitHub's CSS Performance
jonrohan
1032
470k
Transcript
BUILDING FOR @andyhume SmashingConf, New York, 2014 PERFORMANCE RESILIENCE Tuesday,
June 17, 14
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Tuesday, June 17, 14
Measure http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14
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
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
Your bosses love a story http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14
Spread the word http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14
What numbers?! http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 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
Tuesday, June 17, 14
Tuesday, June 17, 14
Tuesday, June 17, 14
Tuesday, June 17, 14
Tuesday, June 17, 14
Tuesday, June 17, 14
Tuesday, June 17, 14
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
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
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
Measure and tracking trends http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14
SpeedCurve http://speedcurve.com Tuesday, June 17, 14
SpeedCurve http://speedcurve.com Tuesday, June 17, 14
How to optimize http://www.flickr.com/photos/freefoto/2231356418/ Tuesday, June 17, 14
Web performance 101 http://www.flickr.com/photos/freefoto/2231356418/ Content-Encoding: gzip Cache-Control: max-age=315360000 Tuesday, June
17, 14
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
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp SSL Handshake Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
Optimizing: First byte DNS lookup TCP connect HTTP request Server
time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
Eliminate redirects Just eleminate redirects Flush the document early? Prefetch
DNS? But really, just eleminate redirects Optimizing: First byte Tuesday, June 17, 14
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
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Remote JS Optimizing: Start render HTML parser DOM tree Layout
Paint Render tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
inline script waiting on remote CSS Optimizing: Start render HTML
parser DOM tree Layout Paint Render tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree fetching remote stylesheets Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree Tuesday, June 17, 14
Avoid blocking scripts Optimizing: Start render Tuesday, June 17, 14
Optimizing: Start render <script> var script = document.createElement('script'); script.src =
"app.js"; document.head.appendChild(script); </script> Tuesday, June 17, 14
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
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree HTML pre- parser Tuesday, June 17, 14
Remote JS Optimizing: Start render HTML parser DOM tree Layout
Paint Render tree HTML pre- parser Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree HTML pre- parser Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree HTML pre- parser fetching remote stylesheets Tuesday, June 17, 14
Optimizing: Start render HTML parser DOM tree Layout Paint Render
tree HTML pre- parser Tuesday, June 17, 14
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
Optimizing: Start render <script src="app.js" async defer></script> Tuesday, June 17,
14
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
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
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
gzip compression (of course!) Far-future caching (of course!) Concatenate files
(of course!) Optimizing: Load time fully loaded Tuesday, June 17, 14
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
http://www.flickr.com/photos/vpickering/6824364286/ Resilience Tuesday, June 17, 14
http://www.flickr.com/photos/the_jorr/325224175/ Unreliable Tuesday, June 17, 14
http://www.flickr.com/photos/8040811@N06/3167877765 Progressive enhancement th Tuesday, June 17, 14
The future http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14
Future: HTTP/2 SPDY Tuesday, June 17, 14
Future: HTTP/2 SPDY Multiplexing Cache pushing Tuesday, June 17, 14
Future: ServiceWorker Tuesday, June 17, 14
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
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
Experiment and measure http://www.flickr.com/photos/kayaker1204/4319542459/ Tuesday, June 17, 14
Experiment and measure http://www.flickr.com/photos/kayaker1204/4319542459/ Theorize Experiment, and... Measure Tuesday, June
17, 14
Thank-you! http://lanyrd.com/sdbmhb @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike
cc Tuesday, June 17, 14