Makingweb: Great front end performance starts on the server.

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/
torsdag 24. oktober 13

THESE TWO GUYS...
....are really impatient

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

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

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


CURRENT STATE
OF THE WEB
AND MOBILE


1.6 MB
in 94 requests on average

9%4%
6%
3%
17%

63%

Images
CSS
Other

Scripts
Flash
HTML

http://httparchive.org/

ASIDE...
• In

2030

• Average

320MB

web site is

• Average

(mobile)
bandwidth is 93Mbps

http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/

1.6 MB

6,7

Ho
ld
mo that
re o
t
n t houg
his
ht.
lat ..
er.

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,4

Ho
ld
mo that
re o
t
n t houg
ht.
his
no ..
w.

Seconds
latency in
total

• 100-200 ms pr roundtrip
• Depends....(DNS, pipelining,

concurrent TCP connections
etc.)

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


Tower signaling.

User opens app.

.01 s.

2.1 s.

Only needed when
device is idle


App is “on line”

Device promoted to full
power state. Process
takes about 2 seconds

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

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

2.2 s.

Browser rendering
Fetches linked resources.
More DNS lookups (one
for each unique domain)
and TCP connections.

TCP connection
HTML document returned

2.4 s.

2.4 s, the
HTML page is
downloaded

Page displayed
Puh...

3-60 s.

2.6 s.

Latency,
anything from
100 - >500ms
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efﬁcient?fbid=YmB5ErqPR7b


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)
• 94 round trips (6 req pr conn.)
• Downloading 1.6 mb over 2Mbps
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

MAKINGWEB.NO

• Load
•1

MB

• 58


event ﬁred: 12,77 s.

requests

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
f
req
ues
ts

Much smaller
Smaller
6%
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

PRIMARY ISSUES
• Over

downloading

• Unused
• Large
• Stuff...


assets

images

• Network
• High

issues

Latency

• Bandwidth
• Flaky

connection

the

“80

/20

rul
e

PARET0
PRINCIPLE


”

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

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

THE LAST 20%
will improve performance by 80%

SOMETIMES IT MAKES SENSE TO MULTI-SERVE
...or at leas
t do layout
adjustmen
ts to compo
nents


RW

D

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

ice


or b

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!

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

downloading”

the server do the work
instead of the browser


RESS IN A NUT SHELL
• RWD
• The

provide a sensible default or fallback

server does the optimization
t size
e
ce ass rkup
Redu e ma
v
electi rving
S
Ad se tworks
e
cial n y
So
inif
M
zip
e
Cach
etc.


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

Request/Response

Information about the
requesting device,
network, etc.


No, this is NOT what I mean...


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://
m

obile.n

ytimes

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

•

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


n

tio
rip
esc ory
e D sit
c
evi epo
D R

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


WHAT WE ENDED UP WITH


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

EXAMPLE
Using Picturefill
<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

CSS OPTIMIZATION
Device Capabilities as Media Features

S

ver
er

ide
S

nd
re

g

rin
e

@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
430
323
215
108
0

4 000
3 000
2 000
1 000
0
Size

20% less data
transfer


With WeW
2 300
1 725
1 150
575
0
Time

50% faster
download

Latency

73% reduced
latency

BUT...


CAN’T DO MAGIC
no WeW

with WeW

3 900

Due to
lazy loading of assets
and repaints etc.

2 925
1 950
975

La
zy
or b loa
ad din
?D
gg
epe
nd ood
s...


0

Onload

Only 4% faster in total

MARSHALLHEADPHONES.COM

• Down
• Load

from 1.6MB to 432KB

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


No
ts

o

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


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


SUMMING UP

We...

developer


...must do
stuff here...

server

...to
relieve...

internet

...and...

telco
network

...to make life
easier for...

device

...and...

browser

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.

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

THANK YOU

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


Makingweb: Great front end performance starts on the server.

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Makingweb: Great front end performance starts on the server.

Similar a Makingweb: Great front end performance starts on the server. (20)

Más de Jon Arne Sæterås

Más de Jon Arne Sæterås (8)

Último

Último (20)

Makingweb: Great front end performance starts on the server.