SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
This talk explains best practices and techniques use to build high performance mobile sites. The talk covers a wide range of different topics centred on how to improve performance over the network and how to improve performance in the software (including both server side & client side).
This talk explains best practices and techniques use to build high performance mobile sites. The talk covers a wide range of different topics centred on how to improve performance over the network and how to improve performance in the software (including both server side & client side).
1.
High Performance Mobile Web
James D Bloom
http://blog.jamesdbloom.com
2.
ABOUT ME
JAMES D BLOOM
Mobile Web Expert
Technical
lead
of
mobile
web
at
Be2air
Focusing
on:
-‐
High
Performance
-‐
Reliability
-‐
Wide
Device
Support
-‐
Keeping
it
Simple
-‐
Automated
TesEng
3.
This talk….
1.
Why
We
Should
Care
About
Performance?
2.
Network
Reducing
Requests
Reducing
Bytes
Increasing
Bandwidth
Efficiency
Reducing
Latency
3.
SoHware
More
Parallelism
Faster
Page
Rendering
Faster
Page
InteracEon
9.
CORELATION TO LOAD TIME
Reduce
Requests
TOTAL REQUESTS 0.46
IMAGE REQUESTS 0.44
TOTAL XFER SIZE 0.40
IMAGE XFER SIZE 0.37
DOMAINS 0.37
Total
Image
Total
Xfer
Image
Xfer
Domains
Requests
Requests
Size
Size
h"p://mobile.h"parchive.org/
Based
on:
Alexa
Top
1,000,000
Sites
10.
COMBINE REQUESTS - BUNDLING
• JavaScript
Bundle
– Combine
all
files
into
single
bundle
• CSS
Bundle
– Combine
all
files
into
single
bundle
11.
COMBINE REQUESTS - SPRITES
• Image
Sprite
– Combine
all
images
into
CSS
Sprite
12.
COMBINE REQUESTS - INLINING
• Inlining
– dataURI
for
external
resources
– Base64
larger
by
8/6
13.
COMBINE REQUESTS - INLINING
• First
Load:
– inline
resources
and
set
cookie
– put
resources
in
localStorage
and
update
cookie
• Subsequent
Load:
– check
cookie
• if
updated
– load
resources
from
localStorage
(at
top
of
page)
• if
iniEal
value
-‐>
no
JavaScript
or
localStorage
– return
with
resources
as
external
links
• Bing
– 1st
request
54.9
KB
– 2nd
request
5.5
KB
14.
AVOID REQUESTS
• Avoid
redirects
–
71%
of
mobile
sites
have
3xx
– or
at
least
cache
them
• Images
– CSS3
• gradient,
rounded
corners,
drop
shadow,
text
shadow
– Avoid
animated
gifs
• staEc
image
+
JS
• Load
(and
eval)
on
demand
– Images
-‐>
google
image
search
– JS
-‐>
gmail
16.
RESPONSE SIZE (in kB)
Reduce
Image Size
IMAGES 67%
358
SCRIPTS 21%
HTML 6%
112
STYLESHEETS 4%
33
23
10
OTHER 2%
Images
Scripts
HTML
Stylesheets
Other
h"p://mobile.h"parchive.org/
Based
on:
Alexa
Top
1,000,000
Sites
17.
REDUCING BYTES – ADAPTIVE RESOURCES
• AdapEve
Images
– UA
sniffing
or
media
queries
– Major
breakpoints
or
server
side
scaling
• AdapEve
JavaScript
– UA
sniffing
for
device
specific
JS
• AdapEve
CSS
– Media
queries
for
device
specific
CSS
18.
REDUCING BYTES - MINIFY
• Minify
JS
&
CSS
– Typically
during
bundling
• Mini
JS
framework
– don’t
send
desktop
JS
to
mobile
19.
REDUCING BYTES
• Compression
– Use
gzip
for
text
resources
– Maximize
lossless
compression
for
images
• Reduce
Upload
– Reduce
/
remove
cookies
– Server-‐side
cookie
– Cookie
Free
Domain
• staEc
resources
• CDN
• HIJAX
– Highjack
full
page
request
– AJAX
to
replace
<body/>
– Avoids
reloading
CSS,
JS,
background
images
32.
PARALLEL DOWNLOAD
• Flush
<head/>
early
– CSS
in
parallel
– CSS
background
images
(sprites)
in
parallel
33.
PARALLEL SERVICE CALLS
• Parallelize
service
calls
/
DB
queries
• Render
view
(and
flush
<head/>)
in
parallel
controller task executor
build model
view
render view
service & DB calls
flush <head/>
flush <body/>
35.
FASTER PAGE RENDERING
• Simple
DOM
• Efficient
CSS
selectors
– avoid
generic
matches
on
right
side:
– use
ids
or
specific
classes:
• Minimize
reflows
– CSS
in
<head/>
– <img/>
with
height
and
width
38.
FASTER PAGE INTERACTION
• SyntheEc
events
– Touch
300ms
delay
• Timers
– Lots
>1s
– Few
<500ms
– Use
single
global
repeaEng
Emer
for
mulEple
tasks
• Pre-‐execute
– Use
middle
Eer
as
much
as
possible
39.
This talk….
1.
Why
We
Should
Care
About
Performance?
2.
Network
Reducing
Requests
Reducing
Bytes
Increasing
Bandwidth
Efficiency
Reducing
Latency
3.
SoHware
More
Parallelism
Faster
Page
Rendering
Faster
Page
InteracEon