4. Mobile
Trend
§ According
to
Cisco's
Visual
Network
Index
report
from
Feb.
2013
§
§
§
§
Two-‐thirds
of
the
world's
mobile
data
traffic
will
be
video
by
2017.
Global
mobile
data
traffic
will
increase
13-‐fold
between
2012
and
2017
In
2017,
4G
will
be
10
percent
of
connec9ons,
but
45
percent
of
total
traffic
Cisco
Visual
Networking
Index:
Global
Mobile
Data
Traffic
Forecast
Update,
2012-‐201
7
:
h[p://www.cisco.com/en/US/solu9ons/collateral/ns341/ns525/ns537/ns705/ns8
27/white_paper_c11-‐520862.html
Page
3
8. Web
Accelera9on
How
web
site
page
load
9me
breaks
down
80
~
90%
10
~
20
%
Backend
First-‐mile
Front-‐end
Internet
l Database
calls
l HTML
page
genera9on
Internet
Middle-‐mile
l Retrieving
page
contents,
including
HTML,
images,
Javascript,
etc.,
fro
m
origin
server,
across
the
internet
Last-‐mile
l Delivering
content
over
cable
m
odem,
Cellular
network,
etc.,
to
end-‐user
l Rendering
page
in
the
browser
Problem
Addressed
How
it
works
Contents
Delivery
Network
(CDN)
Network
Latency
Files
cache
in
mul9ple
edge
caches
tha
t
are
geographically
dispersed
Dynamic
Web
Accelera9on
(DWA)
Network
Latency(especially
dy
namic
content)
Op9mize
rou9ng
TCP
op9miza9on
Compression
Front-‐end
Op9miza9on
(FEO)
Reduce
HTTP
Requests,
page
s
ize
and
browser
bo[lenecks
Op9mize
HTML
code
and
page
resourc
es
Page
7
9. Mobile
Op9miza9on
QoE
improvement
for
mobile
user
QoE
Today
Topic
Improve
QoE
[L7
improvement]
Content
Op*miza*on
Video
Pacing,
Image
Op*miza*on
and
etc.
[L6
improvement]
Adopt
FEO
Technology
HTML
(Presenta*on-‐level)
Op*miza*on
Improve
Responsibility
&
Reduce
Traffic
[L5
improvement]
Adopt
SPDY/RE
Technology
HTTP
(Session-‐level)
op*miza*on
Improve
Transfer
rate
[L4
improvement]
TCP
(Transport-‐level)Op*miza*on
Improve
Latency
[L1-‐L3
improvement]
Adopt
CDN
(beZer
performance
than
ISP
N/W)
Page
8
11. TCP
conges9on
control
&
avoidance
§ TCP
§ Designed
to
probe
available
bandwidth
§ Does
not
use
full
bandwidth
from
start
Page
10
12. TCP
performance
on
mobile
network
is
poor?
§ Don’t
know
characteris9cs
of
cellular
network
§ Bufferbloat
by
large
queue
in
mobile
network
§ Interference
by
middlebox
deployed
inside
mobile
network
§ Don’t
consider
about
TCP
characteris9cs
§ overshoo9ng
by
TCP
slow
start
§ Limited
Slow
start,
hystart
§ can
detect
conges9on
by
packet
loss
§ Delay-‐based
conges9on
control
:
vegas,
westwood
§ Traffic
control
of
heavy
users
§ Too
much
retransmit
overhead
on
bandwidth
limited
network
and
congested
area
network
Page
11
13. Performance
Bo[leneck
3G
Network
Latency
NAT
Origin
100
~
200
ms
50
~
100
ms
Available
Bandwidth
LTE
4G
2
~
7
Mbps
70
~
150
Mbps
PGW
eNB
3G
GGSN
Issues
SGW
SGSN
Bufferbloat
by
mid Limit
bandwidth
of
dle
boxes
heavy
users
How
to
solve
p DRWA
(Dynamic
R
erformance
iss eceiver
Window
A
ues
djustment)
Mobile
Device
Traffic
control
at
ap
plica*on-‐level.
Candidate : DRWA (Dynamic Receiver Window Adjustment)
Mobile
Device
NB
Issue
of
latency
and
available
ba
ndwidth
Limited
Slow
Start
Tuning
TCP
parameter
and
Cong
es*on
Control
Algorithm
Page
12
14. Analysis
of
packet
loss
§ Download
200KB
on
bandwidth-‐limit
of
heavy
user
:
300Kbps
§ Rxt
overhead
:
32.89
%,
Download
9me
:
4.58
sec
Page
13
15. Analysis
of
packet
loss
(cont’d)
§ Download
2MB
on
bandwidth-‐limit
of
heavy
user
:
300Kbps
§ Rxt
overhead
:
16.5
%,
Download
9me
:
57.41
sec
Page
14
16. TCP
op9miza9on
§ Tuning
§ Limited
slow
start
for
preven9ng
overshoo9ng
§ Tune
Ini9al
CWND
§ 2.6.39+
defaults
to
10
§ 2.6.19+
can
be
configured
via
IP
ROUTE
§ ip
route
change
default
via
gateway_ipaddr
dev
eth0
initcwnd
10
§ Tune
CA
(Conges9on
Avoidance)
for
sending
less
aggressively
da
ta
§ Tune
backoff
when
detected
packet
loss
§ Improve
rxt
rate
of
bandwidth-‐limited
user
(heavy
user)
§ not
easy
to
improve
with
current
TCP
§ Shape
bandwidth
by
force.
Page
15
17. Result
of
rxt
rate
of
BW-‐limited
user
No
Busy
area
:
10:00:00
~
15:30:00
Model
Normal
TCP
IS12S
B/W-‐limited
phone Tuned
TCP
Normal
TCP
ISW11SC
Tuned
TCP
Busy
area
=
15:56:00
~
23:30:00
Model
Normal
TCP
IS12S
Tuned
TCP
Normal
TCP
ISW11SC
Tuned
TCP
200K
Num
157.7
100.3
138.7
100.2
300K
10
10
19
10
Num
142.1
103.0
128.9
104.9
2M
10
10
10
10
Num
117.2
108.5
111.0
108.3
50M
10
10
10
10
Num
200K
Num
117.5
100.2
116.7
100.2
300K
10
10
11
11
Num
111.0
100.3
120.0
102.2
2M
10
10
10
10
Num
101.9
102.2
110.6
106.2
50M
3
3
10
10
Num
Page
16
20. FEO
§ FEO
technologies
help
to
reduce
the
number
of
page
resources
required
to
down
load
a
given
page
and
makes
the
browser
process
the
page
faster.
§ mod_pagespeed(MPS)
is
an
Open
Source
FEO
solu9on
from
Google.
As
Google
d
efined
it
:
Apache
module
for
rewri9ng
web
pages
to
reduce
latency
and
bandwi
dth
Page
19
22. Web
Request
§
§
§
§
DNS
lookup
to
resolve
the
hostname
to
IP
address
New
TCP
connec9on
requiring
a
full
roundtrip
to
the
server
HTTP
request
requiring
a
full
roundtrip
to
the
server
Server
processing
9me
§ Network
latency
on
mobile
network
is
longer
than
that
on
wired
n
etwork.
Page
21
23. Mobile
site
performance
challenges
§ Remove
network
latency
overhead.
§ Careful
about
using
Domain
sharding
§ Don’t
use
redirect
§ Op9mize
Cri9cal
Rendering
path
§ Inline
cri9cal
CSS
§ Remove
blocking
JavaScript
§ Defer
non-‐cri9cal
assets
§ Reduce
HTTP
requests
§ Image
spri9ng
§ Inline
small
image/CSS/JS
§ Reduce
image
size
§ Op9mize
Image
§ Load
“above
the
fold”,
not
load
en9re
page.
§ Lazy-‐load
images
§ Watch
out
for
extra
round-‐trips
§ Especially
new
connec9ons
Page
22
24. Lab
Experiment
§ Test
with
mod_pagespeed
as
an
open
source
FEO
solu9on
fro
m
Google
§ Test
scenario
§ choose
5
sample
sites
:
each
web
site
for
PC
&
mobile
user
§ Simulate
mobile
network
environment
using
TC
tool
naver
daum
mod_pagespeed
TC
Origin
Latency
:
0,
50,
100ms
TC
gmarket
samsung
auone
Page
23
30. Background
§ The
average
web
page
will
hit
2
MB
by
201
5.
§ Image
is
already
a
significant
por9on
of
we
b
page.
§ 61.8%
of
total
web
size
is
image
at
Mar
201
3.
(826KB/1335KB)
§ 62.5%
at
Mar
2012.
(630KB/1008KB)
§ 57.4%
at
Mar
2011.
(445KB/775KB)
Mar
2013
Source
:
HTTP
Archive
Image
is
61.8%
of
total
size.
Page
29
31. How
to
op9mize
image
§ Op9mize
image
formats
§ Op9mize
image
delivery
§ U9lize
Browser
cache
§ Use
CDN
§ Op9mize
image
loading
process
§ Lazy
loading
§ Op9mize
image
for
mobile
§ Responsive
Images
:
RWD
(Responsive
Web
Design)
Page
30
32. Op9mize
image
formats
§ GIF
§ PNG
§ Convert
from
PNG
24
-‐>
8
§ PNG
Op9miza9on
tools
:
PNGCrush,
Op9PNG
§ JPEG
§ Control
Quality
§ Remove
metadata
§ Op9miza9on
Tools
:
jpegtran,
ImageMagick
§ WebP
§ a
new
image
format
that
provides
lossless
and
lossy
compression
for
images
on
the
web
§ Lossless
WebP
26%
smaller
than
PNG
§ Lossy
WebP
25%
~
34%
smaller
than
JPEG
§ Support
browser
(~26%):
Chrome
9+,
Android
4+,
Opera
12+,
Opera
Mobile
1
1.1+
Page
31
33. Image
Op9miza9on
Item
Descrip9on
§ Recompress
§ Recompress
JPEG(lossy),
PNG,
WEBP(lossy)
images
§ compression
quality
0~100,
-‐1(lossless)
(re-‐compressing
jpeg
and
webp
images)
§ Strip
color
profile
informa9on
§ Strip
unnecessary
meta-‐data
(such
as
thumbnails)
§ Reduc9on
the
color
sampling
of
jpeg
images
§ Transforma9on
§ Op9mize
GIF
image
by
conver9ng(lossless)
to
a
PNG(except
animated
gifs)
§ Conver9ng
GIF
or
PNG
image
to
a
jpeg
(When
it
hasn’t
alpha
channel
or
transpa
rent
pixels)
§ Conver9ng
JPEG
to
WEBP
§ Transforma9on
larger
non-‐progressive
jpeg
images
into
progressive(fade-‐in)
jpe
gs
§ Image
Resizing
§ image
resizing
depending
on
screen
size
Page
32
34. Difference
between
FEO
and
Image
Opt.
Request
h[p://www.foo.com/index.html
Response
h[p://image.foo.com/index.html
FEO
(mod_pagespeed)
*ng
forma
Re
a*on
HTML
nsform
nt
tra
Conte
<html>
<script
src="js/jquery.js.pagespeed.jm.LQy2C9DQIS.js"
type="text/javascript"></script>
<img
src=“a.gif.pagespeed.ic.4f4XMOxRCY.png"
alt=""
width="45"
height="44">
</html>
Origin
<html>
<script
src="js/jquery.js"
type="text/javascript"></script>
<img
src=“a.gif"
alt=""
width="45"
height="44">
</html>
Request
h[p://image.foo.com/a.gif.pagespeed.ic.4f4XMOxRCY.png
Response
h[p://image.foo.com/a.gif.pagespeed.ic.4f4XMOxRCY.png
Image
Opt.
Request
h[p://image.foo.com/a.gif
Response
h[p://image.foo.com/a.gif
Origin
Request
h[p://image.foo.com/a.gif
forma*
ge
trans
Ima
on
Image
re-‐encoding
from
gif
to
png
-‐
MIME
TYPE
:
image/PNG
Page
33
35. Difference
between
FEO
and
Image
Opt.(Cont’d)
Image
op9miza9on
Traffic
Reduc*on
Image
op9miza9on
Traffic
Reduc*on
Sta9c
Image
Sta9c
Image
Sta9c
Image
Dynamic
Image
Dynamic
Image
Content
Minifica9on
Traffic
Reduc*on
Image
op9miza9on
Traffic
Reduc*on
Dynamic
Image
JS
/
CSS
JS
/
CSS
JS
/
CSS
HTML
HTML
HTML
Origin’s
Web
Content
By
FEO(mod_pagespeed)
By
Image
Op9miza9on
Page
34
36. Experiment
of
Image
Opt.
in
the
field
§ Experiment
of
image
op9miza9on
using
mod_pagespeed
on
real
sit
e
Origin
Data
Total
Data
S
ize(Kbyte)
Image
Op*miza*on
by
mod_pagespeed
Total
Image
Size(Kbyte)
Total
Data
S
ize(Kbyte)
Total
Image
Size(Kbyte)
Total
Opt.
r
a9o
Image
Opt.
ra9o
Processed
I
mage
ra9o
Naver
1,329.9
346.6
1,262.0
263.6
5.1%
23.9%
50.6%
Daum
1,382.1
278.3
1,309.6
225.6
5.2%
18.9%
26.0%
Gmarket
3,264.8
2,989.5
3,176.9
2,923.9
2.7%
2.2%
10.2%
Samsung
1,125.6
1,003.6
453.1
341.8
59.8%
65.9%
96.6%
Auone
279.5
131.6
228.1
86.4
18.4%
34.4%
95.2%
Mobile
Naver
453.9
302.8
456.8
307.4
0.0%
-‐1.5%
3.1%
Daum
409.4
314.9
365.8
285.0
10.7%
9.5%
19.0%
Gmarket
869.5
802.7
497.7
439.7
42.8%
45.2%
99.9%
Samsung
368.1
314.7
117.5
64.9
68.1%
79.4%
99.7%
Auone
213.4
132.3
172.9
98.4
19.0%
25.7%
We
can
know
how
much
image
is
op9mized
90.5%
PC
§
Processed
Image
Ra9o
=
(Processed
Image
size
/
Total
origin
image
size)
§
We
can
know
how
much
image
data
can
be
op9mized.
If
op9mize
dynamic
image,
we
c
an
reduce
more
image
traffic.
Page
35
37. Experiment
of
Image
Opt.
in
the
field
§ Experiment
of
image
op9miza9on
in
the
field
Origin
Data
Total
Data
Size(KB)
PC
mod_pagespeed
Total
Data
Size(KB)
Total
Ima
ge
Size(KB
)
Total
Ima
ge
Size(KB
)
Image_op*mizer
Total
Opt.
ra9o
Image
Op
t.
ra9o
Processed
Image
ra
9o
Total
Data
Size(KB)
Total
Ima
ge
Size(KB
)
Total
Opt.
ra9o
Image
Op
t.
ra9o
Processed
Image
ra
9o
Naver
436.8
1251.9
367.2
8%
16%
73%
1216.4
313.1
11%
28%
98%
Daum
1110.6
278.5
1116.8
240.4
-‐1%
14%
88%
1064.5
233.1
4%
16%
86%
Gmarket
8244.7
7888.8
7453.9
7124.6
10%
10%
25%
1428.4
1078.9
83%
86%
101%
Samsung
6177.1
5396.7
1408.3
627.9
77%
88%
70%
1384.5
603.5
78%
89%
89%
Auone
343.5
123.8
302
85.8
12%
31%
90%
305.1
84.7
11%
32%
100%
Mobage
606.9
337.2
574.4
314.3
5%
7%
35%
469
211.0
23%
37%
95%
Gree
417.7
326.1
420.7
319.1
-‐1%
2%
0%
264.5
173.0
37%
47%
100%
Naver
340.1
209.4
321.3
200.1
6%
4%
42%
330.9
200.1
3%
4%
38%
Daum
298.9
161.2
283.6
160.9
5%
0%
0%
287.1
149.3
4%
7%
72%
Gmarket
2519.3
2368.8
1208.1
1055.3
52%
55%
85%
1183.5
1014.8
53%
57%
87%
Samsung
438.5
262.9
229.9
54.3
48%
79%
88%
227.7
52.0
48%
80%
86%
Auone
Mobil
e
1366.9
585.9
358.4
531.5
322.2
9%
10%
21%
526.8
299.4
10%
16%
93%
298
234.6
266.7
205.9
11%
12%
21%
268.7
205.2
10%
13%
100%
387.8
249.6
296.8
173.5
23%
30%
68%
310.7
172.5
20%
31%
88%
Mobage
Gree
§
Processed
Image
Ra9o
=
(Total
no.
of
processed
image
/
Total
no.
of
origin
image)
§
We
can
know
how
much
image
data
can
be
op9mized.
Page
36
38. U9lizing
Cache
Server
Service
Flow
origin
Image
Opt.
Cache
client
h[p://www.foo.com/a.png
h[p://www.foo.com/a.png Cache-‐miss
h[p://www.foo.com/a.png
Content-‐Type
:
Image/PNG
:
a.png
Image
convert
:
PNG
-‐>
JPEG
Content-‐Type
:
Image/JPEG
:
a.png
Cache-‐fill
Content-‐Type
:
Image/JPEG
:
a.png
h[p://www.foo.com/a.png
Cache-‐hit
Content-‐Type
:
Image/JPEG
:
a.png
§ Image
op9miza9on
is
very
CPU-‐intensive
job.
To
alleviate
load,
it’s
be[er
to
u9lize
cache
server
between
client
and
image
op9miza9o
n.
Page
37
40. Test
Environment
Gomez
Agent
in
CA
US
CDNW
POP
at
Dallas,
US
Origin
Web
2.
Accelera9o
n
of
dynamic
c
ontent
by
CD
MIO
MOD
NW
DWA
INTERNET
Cdnetworks
Cache
POP
Gomez
Agent
Gomez
Agent
KR
Origin
loca9on
:
Dallas,
US
MIO
&
MOD
loca9on
:
Dallas,
US
CDNW
Shield
loca9on
:
Chicago,
US
UK
Singapore
MIO
:
mod
image
op9mizer
MOD
:
mod
page
speed
Page
39
41. Performance
Comparison
Test
case
1.
between
gomez
agent
and
ori
gin
Test
scenario
origin
Gomez
Agent
Web
Contents
for
PC
&
Mobile
2.
between
gomez
agent
and
MI
O
MIO
3.
between
gomez
agent
and
CD
NW
DWA
4.
between
gomez
agent
and
CD
NW
DWA
+
MOD
MOD
5.
between
gomez
agent
and
CD
NW
DWA
+
MIO
MIO
CDNW
EDGE
CDNW
SHIELD
Page
40
42. Performance
Test
using
Gomez
PC
Agent
§
Gomez
Agent
loca9ons
§
§
All
:
San
Jose,
Atlanta,
New
York,
Seoul,
Tokyo,
Madrid,
London
Using
Gomez
FireFox
Agent
§
1.
origin
&
4.DWA
§ Total
Objects
:
195
§ Total
Bytes
:
1004KB
§
6.
DWA+MOD
§ Total
Objects
:
49
§ Total
Bytes
:
652KB
§
7.
DWA+MIO
§ Total
Objects
:
195
§ Total
Bytes
:
518KB
§
Gomez
UA
String
§
Mozilla/5.0
(Windows
NT
6.1;
WOW64;
rv:13.0
;
GomezAgent
3.0)
Gecko/20100101
Firefox/1
3.0.1
4
3
1
2
Page
41
43. Performance
Test
using
Gomez
Mobile
Agent
§
Gomez
Agent
loca9ons
§
§
All:
Tokyo,
Seoul,
London,
New
York,
S
anta
Clara
Using
Gomez
Mobile
Agent
§
1.
origin
&
4.
DWA
§ Total
Objects
:
41
§ Total
Bytes
:
323.3KB
§
6.
DWA+MPS(mod_pagespeed)
§ Total
Objects
:
28
§ Total
Bytes
:
188.4KB
§
7.
DWA+MIO
§ Total
Objects
:
41
§ Total
Bytes
:
146.5KB
§
Gomez
UA
String
§
Mozilla/5.0
(Windows
NT
6.1;
WOW6
4;
rv:13.0;
GomezRecorder
5.0)
Gecko
/20100101
Firefox/13.0.1
4
3
1
2
Page
42
45. Introduc9on
§ Mobile
operators
needs
:
§ Deliver
be[er
QoE
to
customers
§ Network
op9miza9on
§ Alleviate
mobile
traffic
conges9on
§ Reduce
traffic
and
costs
of
OTT
Content
§ Save
interna9onal
transit
traffic
§ Generate
new
revenue
Page
44
46. What
is
Mobile
CDN
§ Op9mize
the
delivery
of
content
to
end
users
on
any
type
of
wirele
ss
or
mobile
network.
§ Mobile
CDN
is
important
for
MNOs
(Mobile
Network
Operator)
as
t
hey
can
lead
to
significant
savings
and
avoid
network
conges9on.
§ Provide
be[er
UX
(User
Experience)
and
traffic
reduc9on
Page
45
47. Loca9on
of
CDN
inside
the
mobile
network
§ To
get
op9mal
reduc9on
and
accelera9on,
the
CDN
is
placed
inside
the
mobile
network
on
top
of
the
PGW
func9on.
In
case
of
LTE
Internet
*
Network
Address
Translator
IP
Core
LTE
Core
Mail
Web
*
Primary
Gateway
NAT
Cache
Edge
traffic
is
reduced
to
1/10
・・・
inside
Mobile
NW
PGW
-‐ Video
pacing
SGW
SGW
SGW
-‐ Image
Op*miza*on
*
Secondary
Gateway
eNB
eNB
eNB
-‐ Text
Compression
eNB
eNB
eNB
eNB
eNB
eNB
-‐ TCP
Accelera*on
Page
46
48. Video
Pacing
§ Video
pacing
controls
the
bandwidth
for
progressive
download
video.
§ This
reduces
excessive
video
download
Without Video Pacing
With Video Pacing
Burst
sec*on
Media’s
bitrate
Smooth
sec*on
Page
47
50. Conclusion
The
more
QoE
is
improved,
the
more
revenue
is
increased
QoE
[L7
improvement]
Content
Op*miza*on
Video
Pacing,
Image
Op*miza*on
and
etc.
• Op9mize
image.
As
reducing
image
size,
can
reduc
e
traffic
and
provide
be[er
QoE.
[L6
improvement]
Adopt
FEO
Technology
HTML
(Presenta*on-‐level)
Op*miza*on
• FEO
provides
be[er
QoE.
And
tune
FEO
focused
on
display
9me,
not
network
download
9me.
[L5
improvement]
Adopt
SPDY/RE
Technology
HTTP
(Session-‐level)
op*miza*on
[L4
improvement]
TCP
(Transport-‐level)Op*miza*on
• Tune
TCP
depending
on
network
type
(3G/LTE/Wir
ed).
[L1-‐L3
improvement]
Adopt
CDN
(beZer
performance
than
ISP
N/W)
• To
reduce
latency
on
mobile
network,
place
conten
t
closer
to
end-‐user.
To
do
so,
u9lize
CDN.
Also
can
accelerate
middle
mile.
Page
49