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
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
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
790
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
470
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
LLM時代の検索
shibuiwilliam
2
430
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
130
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.5k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
290
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
460
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
300
CDK Vibe Coding Fes
tomoki10
0
220
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
GitHub's CSS Performance
jonrohan
1031
460k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Speed Design
sergeychernyshev
32
1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Statistics for Hackers
jakevdp
799
220k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Fireside Chat
paigeccino
37
3.5k
Facilitating Awesome Meetings
lara
54
6.4k
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