Jon Arne Sæterås - Give Responsive Design a mobile performance boost

August 18, 2010
YEP, WEB ON MOBILE IS SLOW

100 ms faster:

1% increased revenue
1 sec delay:

2.8% drop in revenue
http://www.slideshare.net/stubbornella/designing-fast-websites-presentation

http://slideshare.net/markstanton/speed-matters
SLOW IS NOT COOL
...even less cool on mobile
For Q3 2013 that is $17mill.

THE VALUE CHAIN
developer server internet telco
network device
Doesn’t really make things more
difficult, but reveal a few issues
browser

WHY IS MOBILE SLOWER?
• Network Latency

• Available Bandwidth
• The Implementation
• Processing Power

• Browser

• Battery Preserving Strategies

• Memory

FUN-FACT
Loading apple.com consume
1.41% of battery life. 
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
Not so
12 - 4% in 8 mins
of web surﬁng

“4G” BANDWIDTH
Mbps
0
12,5
25
37,5
50
Location
1Location
1Location
2Location
3Location
4Location
5Location
6Location
7Location
8Location
9Location
9Location
9Location
10Location
11Location
12Location
12Location
13Location
13Location
14Location
15Location
16Location
17
15,18
18,69 18,17
6,18
14,99
13,17
19,65 19,71 19,96 19,07
8,86
2,77
0,15 1,47
18,85
9,16
19,65 20,16
16,5
20,04
9,59
0,1
36,33 36,39
24,76
0,36
9,15
42,49
30,55
38,79
24,01
7,86
11,78
0 0
21,5
44,09
10,49 10,61
12,34
16,29
2,53
13,57
1,29
Netcom Telenor
VG 10.11.2013

CURRENT STATE
OF THE WEB
AND MOBILE

1.8 MB
3 %7 %
4 %
3 %
17 %
65 %
Images Scripts
CSS Flash
Other HTML
in 95 requests on average
http://httparchive.org/

1.8 MB
• Avg. speed: 2Mbps (cisco)

• 1 Mbps = 0.12 MB/s

• 1.8 / 0.24 = 7,5s
7,5Seconds

download
time
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

1.8 MB
•100-200 ms pr roundtrip

•Depends....(DNS, pipelining,
concurrentTCP connections
etc.)
9,5Seconds

latency in
total

LATENCY
3g 4g
Control plane 200–2,500 ms 50–100 ms
DNS lookup 200 ms 100 ms
TCP handshake 200 ms 100 ms
TLS handshake 200–400 ms 100–200 ms
HTTP request 200 ms 100 ms
Total latency overhead 200–3500 ms 100–600 ms
O’Reilly: High Performance Browser Networking

MOBILE
NETWORKS ARE
FREAKING
MAGIC!
a quick look on how they work

.01 s.
User opens app.

Wakes the radio. Device
sends a request to the cell
tower to use the network
Tower signaling.

Device promoted to full
power state. Process
takes about 2 seconds
2.1 s.
Only needed when
device is idle
App is “on line”

App does a DNS lookup.
Roundtrip is 100-200 ms.
2.2 s.

Latency,
anything from
100 - >500ms
TCP connection

HTML document returned
2.4 s.
2.4 s, the
HTML page is
downloaded
Browser rendering

Fetches linked resources.
More DNS lookups (one for
each unique domain) and
TCP connections.
2.6 s.
Page displayed

Puh...
3-60 s.
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efﬁcient?fbid=YmB5ErqPR7b

1.8 MB
•Wake up radio (one time)

•TCP and DNS (one time)

•95 round trips (6 req pr conn.)

•Downloading 1.8 mb over 2Mbps
11,2Seconds

total
+ rendering time in the browser

+ server response time
Disclaimer: lots of assumptions in this calculation!

GOOGLE: 7.5 S.
*at the time, the average web site was 1,2MB. Minus the 2s wakeup, we’re in the
ballpark.

DEVCONFU.EU
• Load event ﬁred: 32 s.

• 2.3 MB

• 180 requests
iPhone 4 iOS 5.1 on 3G (latency 300ms)

SERVE A PAGE TO A MOBILE DEVICE IN
LESS THAN 1 SECOND?
A great overview by Ilya Grigorik

bit.ly/mobile-barrier

WHO CARES?
The users care!
Telco Network

53,53 %
Other

46,47 %
How users connect. Page views per connection
type. (Scandinavian Countries). Source:
Mobiletech

WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
➜EuropeanVodafone
account roaming in US

SO, WHAT IS OUR CURRENT
APPROACH TO THIS?

ENTER
RESPONSIVE
WEB DESIGN
Yay!

RESPONSIVE
WEB DESIGN
Doh...
Much smaller

6 %
Same size
72 %
Smaller

22 %
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Also about the same
number of
HTTP requests

RWD IS A TECHNIQUE
Nothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost

RWD != MOBILE FRIENDLY
but an important step in the right direction

Load time: 9.07s *

Size: 288.14 kb
Load time: 2.36 s *

Size: 36.59 kb
*) Load event ﬁred. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO

http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html

PRIMARY ISSUES
• Over downloading
• Unused assets

• Large images

• Stuff...

!
• Network issues
• High Latency

• Bandwidth

• Flaky connection

!
• Processing power
• Slower CPU

• Memory

• Cache limits

30-40%
SLOWER WITH
JAVASCRIPT
ENABLED

PARET0
PRINCIPLE
Responsive Design is
20% of the work,

and might get you
80% on the way
the “80/20 rule”

THE LAST 20%
will improve performance by 80%
Our example: increasing
performance by
80%
gives a load time of 2,2s

SOMETIMES IT MAKES SENSE TO MULTI-SERVE
...or at least do layoutadjustments to components

When all you have is a hammer,

every problem looks like a nail
RWD
device or browser

HOW CAN WE
FIX THIS?
What can we do to help
front end developers make
use of server side stuff?

THE VALUE CHAIN
Adaptive Responsive
network device browser

RANT
There is a web server.A very capable one, too.

Use it!

SERVER?
How to make the server side
available to front end devs

http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/

RESS
REsponsive design with Server
Side components

A BALANCING ACT
no right answer

PURPOSE OF RESS
• Reduce need for client side
processing

• Eliminate “over downloading”

• Let the server do the work
instead of the browser

RESS IN A NUT SHELL
•RWD provide a sensible default or fallback

•The server does the optimization
Reduce asset size
Selective markup
Ad serving
Social networks
Minify
zip
Cache
etc.

INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!
Information about the
requesting device,
network, etc.
Request/Response

NOT A CRIME!
82% of top 100 Alexa sites use
Device Detection
In the case of
Mashable, we also
detect the type of
device and change
the site’s behavior
accordingly.
“
”
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/

http://mashable.com/2012/12/11/responsive-web-design/

THERE IS A DIFFERENCE
User-Agent snifﬁng
var
isIpad
=
/iPad/i.test(navigator.userAgent);
Feature Detection
var
appCache=
function()
{

return
!!window.applicationCache;

};
Device Detection
Using the User-Agent (++) as a key to look up in a data base.
http://www.otsukare.info/2013/10/02/ua-parsing

NYTIMES
!
var ua = navigator.userAgent;!
window.BBDevice = {!
isOldBB: false,!
indexOfVersion: ua.indexOf("Version/"),!
indexOfBB: ua.indexOf("BlackBerry"),!
fullVersion: null,!
version: null!
};!
if (window.BBDevice.indexOfBB >= 0) {!
existingClasses = document.body.className = existingClasses + " bb";!
if (ua.indexOf("WebKit") < 0) {!
existingClasses = document.body.className = existingClasses + " oldbb";!
window.BBDevice.isOldBB = true;!
window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfBB);!
window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(window.BBDevice.fullVersion.indexOf("/") + 1,
window.BBDevice.fullVersion.indexOf(" "));!
window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("."));!
} else {!
if (window.BBDevice.indexOfVersion >= 0) {!
window.BBDevice.indexOfVersion = window.BBDevice.indexOfVersion + 8;!
window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfVersion);!
window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(" "));!
window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("."));!
}!
}!
} else if (ua.indexOf("MSIE 9.0") >= 0 || ua.indexOf("IEMobile/9.0") >= 0) {!
existingClasses = document.body.className = existingClasses + " win75";!
window.WMDevice = true;!
} else if (ua.indexOf("MSIE 10.0") >= 0 || ua.indexOf("IEMobile/10.0") >= 0) {!
window.WMDevice = true;!
} else if (ua.indexOf("Opera Mini") >= 0) {!
window.OperaMiniDevice = true;!
}
http://mpulp.mobi/2013/05/user-agent-snifﬁng-on-the-new-nyt-mobile-site/
http://mobile.nytimes.com

FEATURES OF A DDR
• Nice place to store custom stuff

• “Business rules”

• Speciﬁcs to your site

• Override feature detected features

• If a feature works, but not well enough to make it useable

• False positives (not a HUGE issue, but still)

• Available server side too

• Adapt and optimize stuff before sending to client
Device Description
Repository

EXAMPLE
if
($type_of_device
==
”smartTV”)

include(TVnav.php);

else

include(nav.php);

EXAMPLE
if
($supports_h264)

echo
‘<video
.../>’;

else

echo
‘<a
href=”...”>Download</a>’;

DEVICE DETECTION
RESTful API
GET
http://ddr.demo.wew.io/c/pointing_method
Response
{“pointing_method":"touchscreen"}

EXAMPLE
var
http
=
new
XMLHttpRequest();

http.open("GET",
"http://ddr.demo.wew.io/c/brand_name",
true);

http.onreadystatechange
=
function()
{

if
(http.readyState
==
4)

console.log(http.responseText);

}

http.send();

EXAMPLE
public
function
get($capa){

foreach(getallheaders()
as
$key
=>
$value)
{

if
($key
!="Host")

$this-‐>headers[]
=
$key
.
':
'
.
$value;

}

$url
=
$this-‐>service
.
$capa;

$curl
=
curl_init($url);

curl_setopt($curl,
CURLOPT_RETURNTRANSFER,
true);

curl_setopt($curl,
CURLOPT_HTTPHEADER,
$this-‐>headers);

$this-‐>response
=
curl_exec($curl);

curl_close($curl);

return
json_decode($this-‐>response)-‐>$capa;

}

IMAGE OPTIMIZING
<img
src="http://img.demo.wew.io/http://example.com/image.jpg"/>
Simple Usage
Advanced Usage
<img
src=”http://img.demo.wew.io/vpw_1024/bp_w/pc/w_31/m_48/n_98/http://
example.com/img.png”/>

EXAMPLE
<div
data-‐picture
data-‐alt="A
beautiful
butterfly">

<div
data-‐src="http://img.demo.wew.io/px_100/http://exampe.com/image.png"></div>

<div
data-‐src="http://img.demo.wew.io/px_320/http://exampe.com/image.png"

data-‐media="(min-‐width:
320px)"></div>

<div
data-‐src="http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png"

data-‐media="(min-‐width:
320px)
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
2.0)"></div>

!

<noscript>

<img
src="http://img.demo.wew.io/px_10/http://exampe.com/image.png">

</noscript>

</div>
Picturefill: https://github.com/scottjehl/picturefill.
Using Picturefill

CSS OPTIMIZATION
Device Capabilities as Media Features
Removing overhead and excess styles
@media
(-‐wew-‐pointing-‐method:
touchscreen){

a
{

padding:
10px;

}

}
@media
all
and
(min-‐width:
1500px){

//removed
for
devices
where
1500px
is
impossible.
e.g.
iPhones

body{color:
green;}

}
Server Side rendering

EXAMPLE
<!doctype
html>

<html>

<head>

!

<link
rel="stylesheet"
href="//css.demo.wew.io/http://example.com/style.css”/>

!
</head>

<body>

!

<img
src="http://img.demo.wew.io/http://example.com/image.jpg"/>

!
<script>

var
w=new
wew();

w.getSet("myset",cb);

</script>

!
</body>

</html>

•Markup lives anywhere

•CSS and images are proxied,
optimized and cached

•Device data available client side

FTW?
Does adaptive design have a
positive impact on performance?

EFFECT
0
108
215
323
430
Size
No RESS With RESS
0
950
1 900
2 850
3 800
Time
0
575
1 150
1 725
2 300
Latency
20% less data
50% faster
download
73% reduced
latency

CAN’T DO MAGIC
0
975
1 950
2 925
3 900
Onload
no WeW with RESS
Only 4% faster in total
Due to

lazy loading of assets

and repaints etc.
Lazy loading good
or bad? Depends...

FUN-FACT
Loading apple.com consume 1.41% of battery
life. 
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
Not so
12 - 4% in 8 mins of
web surﬁng

MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB

• Load time down from 6,1s to 1,9s

PERFORMANCE FRONT END
STARTS WITH THE BACK END
Too much is left to the browser to ﬁgure out.

THE RULES
1. Make Fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires Header

4. Gzip Components

5. Put Stylesheets at theTop

6. Put Scripts at the Bottom

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10. Minify JavaScript

11. Avoid Redirects

12. Remove Duplicate Scripts

13. Configure ETags

14. Make AJAX Cacheable
By Steve Souders: http://stevesouders.com/hpws/rules.php
Most of these are
implemented
server side.

SUMMING UP
network device browser
We...
...must do stuff
here...
...to
relieve...
...and...
...to make life
easier for...
...and...

THANK YOU
John Arne Sæterås
Twitter: @jonarnes
VP of innovation at ScientiaMobile.com
http://www.slideshare.net/jonarnes/

Jon Arne Sæterås - Give Responsive Design a mobile performance boost

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Jon Arne Sæterås - Give Responsive Design a mobile performance boost

Similar to Jon Arne Sæterås - Give Responsive Design a mobile performance boost (20)

More from DevConFu

More from DevConFu (20)

Recently uploaded

Recently uploaded (6)

Jon Arne Sæterås - Give Responsive Design a mobile performance boost