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
860
Guardian Responsive Design, SmashingConf 2013
andyhume
6
650
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
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
19k
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
700
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building an army of robots
kneath
306
45k
BBQ
matthewcrist
89
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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