Give Responsive Design a Mobile Performance Boost

John Arne Sæterås
Twitter: @jonarnes
Head of innovation at Mobiletech
http://www.slideshare.net/jonarnes/
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
fredag 20. september 13

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

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

• Network Latency
• Available Bandwidth
• The Implementation
• Browser

CURRENT STATE
OF THE WEB
AND MOBILE

1.6 MB
4%9%
6%
3%
17% 63%
Images Scripts
CSS Flash
Other HTML
in 94 requests on average
http://httparchive.org/

ASIDE...
•In 2030
• Average web site is
320MB
• Average (mobile)
bandwidth is 93Mbps
http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/

1.6 MB
• Avg. speed: 2Mbps (cisco)
• 1 Mbps = 0.12 MB/s
• 1.6 / 0.24 = 6,7s
6,7Seconds
download
time
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

1.6 MB
• Avg. speed: 2Mbps (cisco)
• 1 Mbps = 0.12 MB/s
• 1.6 / 0.24 = 6,7s
6,7Seconds
download
time
Hold that thought...
more on this later.
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

1.6 MB
•100-200 ms pr roundtrip
•Depends....(DNS, pipelining,
concurrentTCP connections
etc.)
9,4Seconds
latency in
total

1.6 MB
•100-200 ms pr roundtrip
•Depends....(DNS, pipelining,
concurrentTCP connections
etc.)
9,4Seconds
latency in
total
Hold that thought...
more on this now.

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

2.1 s to connect.
Latency, anything from
100 - >500ms

2.40 s, html page loaded
TCP stuff

3-60 seconds....
Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efﬁcient?fbid=YmB5ErqPR7b
Now download assets

1.6 MB
•Wake up radio (one time)
•TCP and DNS (one time)
•94 round trips (6 req pr conn.)
•Downloading 1.6 mb over 2Mbps
10,6Seconds
total
+ rendering time in the browser
+ server response time
Disclaimer: lots of assumptions in this calculation!

GOOGLE: 10.2 S.
http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html

Load time: 7.3 s
Size: 7.3 MB
Load time: 7.7 s
Size: 7.2 MB

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!

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/

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

PARET0
PRINCIPLE
Responsive Design is
20% of the work,
and might get you
80% of the way

PARET0
PRINCIPLE
Responsive Design is
20% of the work,
and might get you
80% of the way
the “80/20 rule”

THE LAST 20%
will improve performance by 80%

SOMETIMES IT MAKES SENSE TO MULTISERVE

When all you have is a hammer,
every problem looks like a nail

When all you have is a hammer,
every problem looks like a nail
RWD
device or browser

HOW CAN WE
FIX THIS?

HOW CAN WE
FIX THIS?
Adaptive Design

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”

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

Feature Detection
var
appCache=
function()
{

return
!!window.applicationCache;
};

User-Agent snifﬁng
var
isiPhone
=
/iPhone/i.test(navigator.userAgent);
Feature Detection
var
appCache=
function()
{

return
};

User-Agent snifﬁng
var
isiPhone
=
/iPhone/i.test(navigator.userAgent);
Feature Detection
var
appCache=
function()
{

return
};
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.

NYT HORROR
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://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 “tacit knowledge”
• “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

FEATURES OF A DDR
• Nice place to store “tacit knowledge”
• “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);
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/

EXAMPLE
if
($supports_h264)
echo
‘<video
.../>’;
else
echo
‘<a
href=”...”>Download</a>’;

OUR APPROACH

DEVICE DETECTION
Single Capability
Request
GET
http://ddr.demo.wew.io/c/model_name
Response
{"model_name":"iPhone"}

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/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”/>
Examples and documentation: https://github.com/whateverweb/Image-Server

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. Full example: https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html
Using Picturefill

CSS OPTIMIZATION
Device Capabilities as Media Features
Removing overhead and excess styles
Examples and documentation: https://github.com/whateverweb/CSS-processor
@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;}

}

CSS OPTIMIZATION
Device Capabilities as Media Features
Removing overhead and excess styles
Examples and documentation: https://github.com/whateverweb/CSS-processor
@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
@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
0
108
215
323
430
Size
No WeW With WeW
0
1 000
2 000
3 000
4 000
Time
0
575
1 150
1 725
2 300
Latency
20% less data
transfer
50% faster
download
73% reduced
latency

BUT...

CAN’T DO MAGIC
0
975
1 950
2 925
3 900
Onload
no WeW with WeW
Only 4% faster in total
Due to
lazy loading of assets
and repaints etc.

CAN’T DO MAGIC
0
975
1 950
2 925
3 900
Onload
no WeW with WeW
Only 4% faster in total
Due to
lazy loading of assets
and repaints etc.
Lazy loading good
or bad? Depends...

MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s
to 1,9s

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

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

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

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

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.

POOR IMPLEMENTATION
SLOWS RENDERING DOWN,
BUT SPEED IS REALLY ABOUT
HOW FASTTHE USER CAN
ACHIEVE HIS GOALS
WHAT IS SPEED, ANYWAY?

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

Give Responsive Design a Mobile Performance Boost

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Give Responsive Design a Mobile Performance Boost

Semelhante a Give Responsive Design a Mobile Performance Boost (20)

Último

Último (20)

Give Responsive Design a Mobile Performance Boost