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 Day Out 2013
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
760
Guardian Responsive Design, SmashingConf 2013
andyhume
6
560
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
710
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.8k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
210
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
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
簡単に始めるSnowflakeの機械学習
nayuts
1
190
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
スレットハンティングについて知っておきたいこと
hacket
0
130
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
620
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Faster Mobile Websites
deanohume
303
30k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Done Done
chrislema
179
15k
Designing the Hi-DPI Web
ddemaree
276
34k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Statistics for Hackers
jakevdp
792
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Infographics Made Easy
chrislema
238
18k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
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