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.3k
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
2
1.1k
Building for performance and resilience
andyhume
5
1.2k
Architecting resilient front ends
andyhume
3
820
Guardian Responsive Design, SmashingConf 2013
andyhume
6
630
Web Fonts as a Progressive Enhancement, Ampersand 2013
andyhume
2
750
Anatomy of a responsive page load, WhiskyWeb 2013
andyhume
10
1.8k
Breaking News & Breaking Software, SyncConf 2013
andyhume
0
260
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
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
10
2.5k
バックエンドエンジニアのためのフロントエンド入門
panda_program
7
770
Bounded Context: Problem or Solution?
ewolff
1
200
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
340
自動と手動の両輪で開発するデータクレンジング
estie
2
190
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
19
7.3k
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
140
Platform Engineeringは自由のめまい
nwiizo
1
100
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
110
Ask! NIKKEI RAG検索技術の深層
hotchpotch
12
2.5k
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
1
680
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
4
370
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
A designer walks into a library…
pauljervisheath
205
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
530
Unsuck your backbone
ammeep
669
57k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Speed Design
sergeychernyshev
25
770
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