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
Anatomy of a responsive page load, WhiskyWeb 2013
Search
Andy Hume
April 12, 2013
Technology
10
1.9k
Anatomy of a responsive page load, WhiskyWeb 2013
Longer version of performance talk for WhiskyWeb II in Edinburgh.
Andy Hume
April 12, 2013
Tweet
Share
More Decks by Andy Hume
See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
andyhume
2
1.2k
Building for performance and resilience
andyhume
5
1.2k
Architecting resilient front ends
andyhume
3
870
Guardian Responsive Design, SmashingConf 2013
andyhume
6
660
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
780
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
はじめての転職講座/The Guide of First Career Change
kwappa
5
4.5k
o11yツールを乗り換えた話
tak0x00
2
1.7k
20250818_KGX・One Hokkaidoコラボイベント
tohgeyukihiro
0
120
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
4
130
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
5
2.7k
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
470
EKS Pod Identity における推移的な session tags
z63d
1
170
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
290
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
190
Observability for LLM Application lifecycle
ivry_presentationmaterials
1
170
datadog-distribution-of-opentelemetry-collector-intro
tetsuya28
0
170
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
For a Future-Friendly Web
brad_frost
179
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A better future with KSS
kneath
239
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Transcript
PAGE LOAD Andy Hume THE ANATOMY OF A WhiskyWeb II,
2013 RESPONSIVE Friday, 12 April 13
Text Friday, 12 April 13
Friday, 12 April 13
http://www.flickr.com/photos/freefoto/2231356418/ Performance Friday, 12 April 13
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Friday, 12 April 13
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Friday, 12 April 13
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Friday, 12 April 13
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Friday, 12 April 13
WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Friday, 12 April 13
WHY CARE? Speed Profit http://goo.gl/JNRPt Friday, 12 April 13
WHY CARE? Speed Profit http://goo.gl/JNRPt Speed high search ranking http://goo.gl/XhVfk
Friday, 12 April 13
http://www.flickr.com/photos/teosaurio/7509743298/ Lazy Friday, 12 April 13
Friday, 12 April 13
http://www.flickr.com/photos/teosaurio/7509743298/ The web has bitten us Friday, 12 April 13
page load time PERFORMANCE bandwidth battery life server capacity fast
interface reliability Friday, 12 April 13
page load time PERFORMANCE page load time bandwidth battery life
server capacity fast interface reliability Friday, 12 April 13
RESPONSE TIME Server-side response time? End-user response time? Time to
last byte? ALWAYS DEFINE IT Friday, 12 April 13
TIME TO FIRST BYTE Request to start of response Normally
HTML Nothing displayed yet Includes network latency Includes server-side Friday, 12 April 13
START RENDER Content begins to display Doesn’t mean it’s useful
content Things can still block afterwards Friday, 12 April 13
LOAD TIME Full page loaded Scripts, images, etc... Site might
be usable before this Friday, 12 April 13
RANGE OF METRICS Time to first byte Start render time
Load time KNOW WHICH ONE Friday, 12 April 13
http://webpagetest.org webpagetest.org Friday, 12 April 13
WEBPAGETEST.ORG 0.1930 Friday, 12 April 13
WEBPAGETEST.ORG 0.1930 Friday, 12 April 13
WEBPAGETEST.ORG 0.1930 Friday, 12 April 13
WEBPAGETEST.ORG 0.1930 Friday, 12 April 13
WEBPAGETEST.ORG iPhone 4 / iOS 5.1 0.1930 Friday, 12 April
13
WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms
RTT) 0.1930 Friday, 12 April 13
WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms
RTT) Dulles, Virginia 0.1930 Friday, 12 April 13
WEBPAGETEST.ORG Friday, 12 April 13
WEBPAGETEST.ORG Friday, 12 April 13
WEBPAGETEST.ORG Friday, 12 April 13
WEBPAGETEST.ORG Friday, 12 April 13
WEBPAGETEST.ORG Friday, 12 April 13
Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13
Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13
Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13
Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13
Content Enhancement Leftovers Friday, 12 April 13
Content Enhancement Leftovers Friday, 12 April 13
Content Enhancement Leftovers Friday, 12 April 13
Content Enhancement Leftovers Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Content Enhancement Leftovers DOMContentReady event Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
LOADING CSS Compressed Long cache time One file Content-Encoding: gzip
Cache-Control: max-age=315360000 Friday, 12 April 13
LOADING CSS <html> <head> <link href="main.css" rel="stylesheet" /> </head> </body>
<p>Content goes here</p> </body> </html> Friday, 12 April 13
<html> <head> <link href="small.css" rel="stylesheet" /> <!-- For larger viewports
--> <link href="larger.css" media="screen and (min-width: 640px)" rel="stylesheet" /> </head> </body> <p>Content goes here</p> </body> </html> NETWORK LOADING CSS Friday, 12 April 13
<html> <head> <link href="main.css" rel="stylesheet" /> <!-- For gallery pages
--> <link href="gallery.css" rel="stylesheet" /> </head> </body> <p>Content goes here</p> </body> </html> NETWORK LOADING CSS Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
LOADING JAVASCRIPT Compressed Long cache time One file Content-Encoding: gzip
Cache-Control: max-age=315360000 Friday, 12 April 13
JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For larger
viewports --> <link href="larger.css" media="screen and min-width: 640px)" rel="stylesheet" /> <script src="app.js"></script> </head> </body> <p>Content goes here</p> </body> </html> NETWORK NET Friday, 12 April 13
JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For larger
viewports --> <link href="larger.css" media="screen and min-width: 640px)" rel="stylesheet" /> </head> </body> <p>Content goes here</p> <script src="app.js"></script> </body> </html> NETWORK NET Friday, 12 April 13
JAVASCRIPT LOADING <script> var s = document.createElement('script'); s.src = "app.js";
document.head.appendChild(s); </script> Friday, 12 April 13
@if(isModernBrowser) { <script src="app.js" async defer></script> } CUTTING THE MUSTARD
http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ Cutting the Mustard Friday, 12 April 13
<script> if (isModernBrowser()) { var s = document.createElement('script'); s.src =
"app.js"; document.head.appendChild(s); } </script> JAVASCRIPT LOADING Friday, 12 April 13
JAVASCRIPT LOADING var isModernBrowser = function() { return ( ‘querySelector’
in document && ‘addEventListener’ in window && ‘localStorage’ in window ); }; Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
IMAGES: SPRITES Friday, 12 April 13
IMAGES: SVG Friday, 12 April 13
IMAGES: ASSET FONTS @2x @?x Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
http://www.flickr.com/photos/spacemanbob/1084139169/ Web fonts Friday, 12 April 13
FONT LOADING Progressive enhancement Friday, 12 April 13
FONT LOADING Progressive enhancement Cuts the mustard Friday, 12 April
13
FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF Friday,
12 April 13
FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF localStorage
available Friday, 12 April 13
PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO
SUPPORT WOFF? FONTS IN STORAGE? NO Friday, 12 April 13
POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:
BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Friday, 12 April 13
IMAGES: NEW SPECS <img alt="Describes the image." src="medium.jpg" srcset="small.jpg 640w,
small-hd.jpg 640w 2x, med-hd.jpg 2x" /> srcset attribute Friday, 12 April 13
IMAGES: NEW SPECS <picture alt="Describes the image."> <source src="s.jpg"> <source
media="(min-width:320px)" src="m.jpg"> </picture> Picture element Friday, 12 April 13
IMAGES: ON DEMAND Friday, 12 April 13
IMAGES: ON DEMAND Friday, 12 April 13
IMAGES: ON DEMAND Friday, 12 April 13
IMAGES: ON DEMAND <div data-alt="Describes the image." data-src="small.jpg" data-src-high="large.jpg" data-width="180"
data-height="100" > </div> Friday, 12 April 13
IMAGES: APPROPRIATE https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux Friday, 12 April 13
Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13
Thank-you! http://lanyrd.com/cmhcd @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike
cc Friday, 12 April 13