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, Responsive D...
Search
Andy Hume
March 01, 2013
Technology
23
3.2k
Anatomy of a responsive page load, Responsive Day Out 2013
Make content appear fast on the screen. Presentation from Responsive Day Out 2013
Andy Hume
March 01, 2013
Tweet
Share
More Decks by Andy Hume
See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
andyhume
3
1.1k
Building for performance and resilience
andyhume
5
1.1k
Architecting resilient front ends
andyhume
4
770
Guardian Responsive Design, SmashingConf 2013
andyhume
6
570
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
720
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.8k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
220
Responsive Guardian
andyhume
21
1k
CSS for grown ups: maturing best practises, SXSW 2012
andyhume
101
47k
Other Decks in Technology
See All in Technology
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
160
Bidirectional Quadratic Voting Leveraging Issue-Based Matching
kentaro
2
170
LLM を現場で評価する
asei
4
670
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
3.1k
Building Static Websites with Sculpin
opdavies
0
1.4k
「名前解決」から振り返るAmazon VPC
yuki_ink
0
320
技術ブログや登壇資料を秒で作るコツ伝授します
minorun365
PRO
16
4.4k
技術力あげたい
hisaichi5518
2
2.8k
AWS IAM Identity Center議論会 〜 認証認可結合モデルと認証認可分離モデル / 20240827-jawsug-arch-iam_identity_center
opelab
3
320
React Aria で実現する次世代のアクセシビリティ
ryo_manba
2
270
Dify - LINE Bot連携 考え方と実用テクニック
uezo
5
1.1k
チームが自己組織化してから敢えて専任スクラムマスターを置いてみたらめちゃめちゃワークした話 / How bringing in a Scrum Master to an already self-organized team totally worked out
hc0208
2
1.6k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
72
8.9k
The Invisible Customer
myddelton
119
13k
The Mythical Team-Month
searls
218
43k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Code Reviewing Like a Champion
maltzj
518
39k
Making Projects Easy
brettharned
113
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
Design by the Numbers
sachag
277
19k
It's Worth the Effort
3n
182
27k
A Philosophy of Restraint
colly
202
16k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Building Your Own Lightsaber
phodgson
101
5.9k
Transcript
PAGE LOAD Andy Hume THE ANATOMY OF A Responsive Day
Out, 2013 RESPONSIVE
Text
Content-Encoding: gzip Cache-Control: max-age=315360000
Content-Encoding: gzip Cache-Control: max-age=315360000 OK. NOW WE CAN TALK
http://www.flickr.com/photos/freefoto/2231356418/ Performance
page load time PERFORMANCE bandwidth use battery life server capacity
fast interface reliability
page load time PERFORMANCE page load time bandwidth use battery
life server capacity fast interface reliability
Content THREE STAGES Enhancement Leftovers
Content THREE STAGES Enhancement Leftovers
Content THREE STAGES Enhancement Leftovers
Content THREE STAGES Enhancement Leftovers
Content Enhancement Leftovers
Content Enhancement Leftovers
Content Enhancement Leftovers
Content Enhancement Leftovers
Content Enhancement Leftovers DOMContentReady event
Content Enhancement Leftovers DOMContentReady event Load event
NO. 1 TRADE OFF http://www.flickr.com/photos/funkypancake/477244177/ Trade-off: Script loading
SCRIPT LOADING <script> var script = document.createElement('script'); script.src = "app.js";
document.head.appendChild(script); </script>
SCRIPT LOADING <script src="app.js" async defer></script>
SCRIPT LOADING appendChild(script) <script async> HTML CSS JAVASCRIPT HTML CSS
JAVASCRIPT
DOMContentReady event Load event Content Enhancement Leftovers
DOMContentReady event Load event Content Enhancement Leftovers
<script> if (isModernBrowser()) { var s = document.createElement('script'); s.src =
"app.js"; document.head.appendChild(script); } </script> CUTTING THE MUSTARD
DOMContentReady event Load event Content Enhancement Leftovers
@if(isModernBrowser) { <script src="app.js" async defer></script> } CUTTING THE MUSTARD
DOMContentReady event Load event Content Enhancement Leftovers
DOMContentReady event Load event Content Enhancement Leftovers
http://www.flickr.com/photos/number10gov/4600963461/ Trade-off: CSS download
CSS DOWNLOAD <link href="main.css" rel="stylesheet" /> <!-- For larger viewports
--> <link href="larger.css" media="screen and (min-width: 350px)" rel="stylesheet" />
CSS DOWNLOAD <link href="main.css" rel="stylesheet" /> @if(isWideDevice()) { <link href="larger.css"
media="screen and (min-width: 350px)" rel="stylesheet" /> }
RESPONSIVE SERVER
RESPONSIVE SERVER Relies on device detection DeviceAtlas, WURFL RESS
NO. 3 ( 4) TRADE OFF http://www.flickr.com/photos/harikrishnanb/4264996356/ Trade-off: Web fonts
http://www.flickr.com/photos/spacemanbob/1084139169/ Web fonts
FONT LOADING Progressive enhancement
FONT LOADING Progressive enhancement Cuts the mustard
FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF
FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF localStorage
available
PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO
SUPPORT WOFF? FONTS IN STORAGE? NO
POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:
BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE
POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:
BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE
http://www.flickr.com/photos/zigazou76/4412946911/ Trade-off: Images
RESPONSIVE IMAGES
Why media queries? THE FUTURE Modules, patterns, systems, components, OOCSS,
SMACSS, Standalone Viewport is irrelevant
Why media queries? THE FUTURE Modules, patterns, systems, components, OOCSS,
SMACSS, Standalone Viewport is irrelevant
RESPONSIVE IMAGES <picture alt="Describes the image."> <source src="s.jpg"> <source media="(min-width:320px)"
src="m.jpg"> </picture>
RESPONSIVE IMAGES <div data-alt="Describes the image." data-src="small.jpg" data-src-high="large.jpg" data-width="180" data-height="100"
> </div>
None
None
PERFORMANCE RESPONSIVE
PERFORMANCE
Thank-you! http://lanyrd.com/scdtfx @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike
cc