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
850
Guardian Responsive Design, SmashingConf 2013
andyhume
6
640
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
770
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
280
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
S3 Tables を図解でやさしくおさらい~基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
emiki
1
330
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
700
Cursor Meetup Tokyo
iamshunta
1
320
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
令和トラベルQAのAI活用
seigaitakahiro
0
520
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
190
データプレーンプログラミングとは? DPU&スイッチASICの開発経験から語る
ebiken
PRO
1
260
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
490
Scale Security Programs with Scorecarding
ramimac
0
430
Babylon.jsでゲームを作ってみよう
limes2018
0
100
Featured
See All Featured
BBQ
matthewcrist
88
9.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A designer walks into a library…
pauljervisheath
205
24k
Docker and Python
trallard
44
3.4k
How GitHub (no longer) Works
holman
314
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Faster Mobile Websites
deanohume
307
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Designing Experiences People Love
moore
142
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
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