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
1k
Building for performance and resilience
andyhume
5
1.1k
Architecting resilient front ends
andyhume
4
730
Guardian Responsive Design, SmashingConf 2013
andyhume
6
520
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
690
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.7k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
200
Responsive Guardian
andyhume
21
960
CSS for grown ups: maturing best practises, SXSW 2012
andyhume
101
47k
Other Decks in Technology
See All in Technology
Shinagile 2024
kawaguti
PRO
2
120
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5k
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
170
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
220
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
大規模言語モデル (LLM)における低精度数値表現
pfn
PRO
3
820
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
200
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
2
660
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
880
本当のガバクラ基礎
toru_kubota
0
320
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
Robots, Beer and Maslow
schacon
PRO
155
8k
Statistics for Hackers
jakevdp
790
220k
Designing with Data
zakiwarfel
96
4.8k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Six Lessons from altMBA
skipperchong
22
3k
Facilitating Awesome Meetings
lara
43
5.6k
What the flash - Photography Introduction
edds
64
11k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.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