Velocity EU: Give Responsive Design a Mobile Performance Boost

YEP, WEB ON MOBILE IS SLOW

August 18, 2010

John Arne Sæterås
Twitter: @jonarnes
Head of innovation at Mobiletech
http://www.slideshare.net/jonarnes/
@jonarnes - Velocity conf 2013

SLOW IS NOT COOL
...even less cool on mobile

100 ms faster:

1% increased revenue
For Q3 2013 that is
$17mill.

1 sec delay:

2.8% drop in revenue

http://www.slideshare.net/stubbornella/designing-fast-websites-presentation
http://slideshare.net/markstanton/speed-matters
http://techcrunch.com/2013/10/24/amazon-reports-q3-sales-of-17-09b-up-24-but-records-second-straight-loss/?ncid=f

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?
• Processing Power

• Browser

• Battery Preserving Strategies
• Network Latency

• Available Bandwidth
• The Implementation

No

t so

FUN-FACT

Loading apple.com consume 1.41% of battery
life. 

12 - 4% in 8 mins of
web surﬁng


http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf

“4G” BANDWIDTH
Netcom

Telenor

50

44,09

42,49

37,5

38,79

36,3336,39

Mbps

30,55

25

24,76
18,6918,17
15,18

12,5

0

6,18
0,36

24,01
19,6519,7119,9619,07
14,99
13,17
9,15

21,5

11,78
7,86 8,86
2,77
0,15 1,47
0
0

20,04
19,6520,16
16,5
16,29
13,57
12,34
10,4910,61
9,59
9,16

18,85

2,53

1,29
0,1

17
n
tio
ca 16
Lo n
tio
ca 15
Lo n
tio
ca 14
Lo n
tio
ca 13
Lo n
tio
ca 13
Lo n
tio
ca 12
Lo n
tio
ca 12
Lo n
tio
ca 11
Lo n
tio
ca 10
Lo n
tio
ca 9
Lo tion
ca 9
Lo n
tio
ca 9
Lo n
tio
ca 8
Lo tion
ca 7
Lo n
tio
ca 6
Lo n
tio
ca 5
Lo n
tio
ca 4
Lo n
tio
ca 3
Lo n
tio
ca 2
Lo n
tio
ca 1
Lo n
tio
ca 1
Lo n
tio
ca

Lo


VG 10.11.2013

CURRENT STATE
OF THE WEB
AND MOBILE


1.6 MB
in 95 requests on average

4 %
9 %
5 %
3 %
17 %

Images
CSS
Other

63 %

Scripts
Flash
HTML

http://httparchive.org/

1.6 MB

6,7

Seconds

download
time

• Avg. speed: 2Mbps (cisco)

• 1 Mbps = 0.12 MB/s

• 1.6 / 0.24 = 6,7s


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

1.6 MB

9,5

Seconds

latency in
total

• 100-200 ms pr roundtrip

• Depends....(DNS, pipelining,

concurrent TCP connections,
keep alive etc.)


1.6 MB

10,6

Seconds

total

+ rendering time in the browser

+ server response time

• Wake up radio (one time)

• TCP and DNS (one time)

• 95 round trips (6 req pr conn.)

• Downloading 1.6 MB over 2Mbps

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.

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

bit.ly/mobile-barrier

WHO CARES?

Telco Network

53,53 %

The users care!
Other

46,47 %

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


WHY USERS CARE?

➜
European Vodafone
account roaming in US


http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet

SO, WHAT IS OUR CURRENT
APPROACH TO THIS?


ENTER
RESPONSIVE
WEB DESIGN
Yay!


Same size
72 %

RESPONSIVE
WEB DESIGN
Doh...

Als

oa
bou
nu t th
HT mb e sa
er o
TP
me
req f
ues
ts


Much smaller

6 %
Smaller

22 %

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

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: 2.36 s *

Size:
36.59 KB

Load time: 9.07s *

Size:
288.14 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

IT’S MORE TO MOBILE THAN JUST
“GOING RESPONSIVE”

the

“80

/20

rul

PARET0
PRINCIPLE


e”

Responsive Design is
20% of the work,

and might get you
80% of the way

Ou
r ex
80
%o amp
le:
ff
Sh
loa 10,
6s
avi
dt
im
.g
ng
e of ive
2,1 s a
s

THE LAST 20%
will improve performance by 80%

RW

D

When all you have is a hammer,

every problem looks like a nail
dev


ice
o

rb

row

ser

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


THE VALUE CHAIN

developer

Adaptive


server

internet

telco
network

device

browser

Responsive

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

Use it!

RESS
REsponsive design with Server
Side components


A BALANCING ACT
no right answer

PURPOSE OF RESS

• 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
size
sset
uce a arkup
Red
ive m g
elect rvin
S
d se
A
orks
netw
cial
So
inify
M
zip
ache
C
etc.

SOMETIMES IT MAKES SENSE .TOt MULTI-SERVE
..or a

least do lay
out adjustm
ents to
component
s on the pa
ge


INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!

Request/Response

Information about the
requesting device,
network, etc.


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
Feature Detection
var
appCache=
function()
{

return
!!window.applicationCache;

};

User-Agent snifﬁng
var
isiPhone
=
/iPhone/i.test(navigator.userAgent);

Device Detection
GET
http://ddr.demo.wew.io/c/dual_orientation
Using the User-Agent (++) as a key to look up in a data base.

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";!
}

http://


mobile

.nytim

es.com

http://mpulp.mobi/2013/05/user-agent-snifﬁng-on-the-new-nyt-mobile-site/

FEATURES OF A DDR
Nice place to store custom stuff

• “Business rules”

• Specifics 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


ion
ipt
scr ry
De ito
ice pos
ev e
D R

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>’;


EXAMPLE
if
($your_property
==
“Z”)

//ad
network
X

…

else

//ad
network
Y


WHAT WE ENDED UP WITH


DEVICE DETECTION
Single Capability
Request
GET
http://ddr.demo.wew.io/c/pointing_method

Response
{"model_name":"touchscreen"}

Capability Sets
Request
GET
http://ddr.demo.wew.io/cset/mySet

Response
{"capa1":"first
capa
value","capa2":"second
capa
value"
...}
Examples and documentation: https://github.com/whateverweb/device-detection

EXAMPLE
var
http
=
new
XMLHttpRequest();

http.open("GET",
"http://ddr.demo.wew.io/c/pointing_method",
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
Simple Usage
<img
src="http://img.demo.wew.io/http://example.com/image.jpg"/>

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”/>

Examples and documentation: https://github.com/whateverweb/Image-Server

CSS OPTIMIZATION
Device Capabilities as Media Features

Se

er
rv

de
n

re
e

id
S

ng
ri

@media
(-‐wew-‐pointing-‐method:
touchscreen){

a
{

padding:
10px;

}

}

Removing overhead and excess styles
@media
all
and
(min-‐width:
1500px){

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

body{color:
green;}

}

Examples and documentation: https://github.com/whateverweb/CSS-processor

EXAMPLE
@import
url('http://demo.wew.io/styles/iPadStyles.css')

all
and
(-‐wew-‐model-‐name:
iPad);

!

@import
url(http://demo.wew.io/CSS-‐processor/examples/inlining/right.css)

all
and
(min-‐device-‐width:
480px);


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
No WeW

With WeW

430

3 800

2 300

323

2 850

1 725

215

1 900

1 150

108

950

575

0

0

0

Size

20% less data
transfer


Time

50% faster
download

Latency

73% reduced
latency

MARSHALLHEADPHONES.COM

• Down from 1.6MB to 432KB

• Load time down from 6,1s to

1,9s



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

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 the Top

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

We...

developer


...must do stuff
here...

server

...to
relieve...

internet

...and...

telco
network

...to make life
easier for...

device

...and...

browser

THANK YOU

?
John Arne Sæterås
twitter: @jonarnes
http://www.slideshare.net/jonarnes/


Velocity EU: Give Responsive Design a Mobile Performance Boost

Recommended

Recommended

More Related Content

Similar to Velocity EU: Give Responsive Design a Mobile Performance Boost

Similar to Velocity EU: Give Responsive Design a Mobile Performance Boost (20)

More from Jon Arne Sæterås

More from Jon Arne Sæterås (6)

Recently uploaded

Recently uploaded (20)

Velocity EU: Give Responsive Design a Mobile Performance Boost