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.1k
Building for performance and resilience
andyhume
5
1.2k
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
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
260
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
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
150
Redefine_Possible
upsider_tech
0
180
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.4k
空が堕ち、大地が割れ、海が涸れた日~もしも愛用しているフレームワークが開発停止したら?~ #phperkaigi 2025
77web
2
970
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
140
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
950
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
Explainable Software Engineering in the Public Sector
avandeursen
0
300
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
240
PHPStan をできる限り高速化してみる
colopl
0
240
コード品質向上で得られる効果と実践的取り組み
ham0215
1
190
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
0
150
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
117
51k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Navigating Team Friction
lara
183
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Being A Developer After 40
akosma
90
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
We Have a Design System, Now What?
morganepeng
51
7.5k
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