Mobile Web Speed Bumps
Don't let these problems slow your app down
Nicholas C. Zakas
Presentation Architect, Yahoo!
@slicknet

Who's this guy?
Presentation Contributor,
Architect Creator of YUI Test
Author Lead Author Contributor Lead Author

http://www.flickr.com/photos/veggiefrog/3435380297/

http://www.flickr.com/photos/fkmr/48131497/

➔
Latency
➔
Device
➔
Testing
http://www.flickr.com/photos/veggiefrog/3435380297/

Network latency is a time delay in delivering
data to the client device
Data transmission over the air always has latency

http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/

http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/

DNS
Web

DNS
Cell Co.
Web

replace 'em with CSS where possible
Images
http://www.flickr.com/photos/calliope/83867359/

Use only CSS for simple images
Gradients | Rounded Corners | Drop Shadows | Text Shadows

Browser creates images = 0 HTTP requests

No
Images!
-webkit-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: 0 8px 4px
rgba(192,192,192,0.5);
box-shadow: 0 8px 4px rgba(192,192,192,0.5);
background-image:-webkit-gradient(linear, 0%
0%, 0% 90%, from(rgba(64,64,64,0.75)),
to(rgba(192,192,192,0.9)));
http://www.schillmania.com/content/entries/2009/css3-and-the-future/

replace 'em with CSS where possible
Images put 'em inline using data URIs
http://www.flickr.com/photos/calliope/83867359/

http://www.nczonline.net/blog/2009/10/27/data-uris-explained/

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7L
Zv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAA
AAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0EC
wLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFj
sVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeH
h0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf//
/yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0EC
wLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFj
sVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7">
Data URIs can be embedded in HTML
No more extra HTTP requests for images!

.icon1 {
background: url(data:image/png;base64,<data>)
no-repeat;
}
.icon2 {
background: url(data:image/png;base64,<data>)
no-repeat;
}
Data URIs can be embedded in CSS
No more extra HTTP requests for images!

http://www.flickr.com/photos/12714995@N03/5069508897/
But I already
have so many
CSS files that
reference images!

http://github.com/nzakas/cssembed

java -jar cssembed-0.3.6.jar -o styles_data_uris.css styles.css

Data URIs are well-supported
across smartphone browsers

http://www.flickr.com/photos/drb62/2543573955/
Data URIs not supported by
• Nokia Series 40
• Myriad/OpenWave
• Internet Explorer Mobile
• Motorola Browser

replace 'em with CSS where possible
Images put 'em inline using data URIs
if all else fails, make 'em small
http://www.flickr.com/photos/calliope/83867359/

320x480 768x1024

Large images not needed

http://tinysrc.net/

<img
src="http://i.tinysrc.mobi/http://example.com/myimage.png"
alt="My image">
Automatically resizes images to viewport

<img
src="http://i.tinysrc.mobi/320/240/http://example.com/myima
ge.png"
alt="My image" width="320" height="240">
Automatically resizes image to 320x240

Put JavaScript and CSS inline*
* But only on first page view

http://m.bing.com

Request #1
146 KB
Request #2
14 KB

RMSM=JApp.Home.DE384EBF~JUX.UXBaseControls.65310C41~J
UX.FrameworkCore.53E1E635~JUX.PublicJson.540180A4~JUX.Co
mpat.0907AAD4~JUX.MsCorlib.172D90C3~CUX.SiteLowRes.C8A1
DA4E~CApp.Home.FD66E1A3~CUX.Keyframes.B8625FEE~CUX.S
ite.18BDD93

RMSM=
Japp.Home.DE384EBF~
JUX.UXBaseControls.65310C41~
JUX.FrameworkCore.53E1E635~
JUX.PublicJson.540180A4~
JUX.Compat.0907AAD4~
JUX.MsCorlib.172D90C3~
CUX.SiteLowRes.C8A1DA4E~
Capp.Home.FD66E1A3~
CUX.Keyframes.B8625FEE~
CUX.Site.18BDD93

First Request
<style data-rms="save" id="CUX.Site.18BDD936"
rel="stylesheet" type="text/css">...</style>
<script data-rms="save"
id="JUX.UXBaseControls.65310C41"
type="text/javascript">...</script>

Second Request
<script
type="text/javascript">RMS.Load('CUX.Site.18B
DD936')</script>
<script
type="text/javascript">RMS.Load('JUX.UXBaseCo
ntrols.65310C41')</script>

How It Works
1. On first page load, inline all scripts and styles
2. Extract scripts and styles from page and store
in localStorage
3. Set cookie with Ids of the scripts and styles in
localStorage
4. On next page load, look at cookies
5. Output scripts instructing the browser to load
that resource from localStorage

Extracting From The DOM
//extract inline script contents
var scriptNode =
document.querySelector("script");
var scriptText = scriptNode.text;
//extract inline style contents
var styleNode =
document.querySelector("style");
var styleText = styleNode.innerHTML;

40% of time
on redirect Download
Redirect

➔
Latency
➔
Device
➔
Testing
http://www.flickr.com/photos/veggiefrog/3435380297/

iPad 2
Droid
iPhone 4 Droid X Incredible
Mac Mini
Processor 2.2-2.4 GHz 1 GHz 1 GHz 1 GHz 1 GHz
RAM 2 GB 512 MB 512 MB 512 MB 512 MB
Storage 320-500 GB 16-32 GB 8 GB 8 GB 16-64 GB

http://www.flickr.com/photos/antonfomkin/3046849320/

Keep JavaScript small

All browsers now have
optimizing JavaScript engines
Tracemonkey/ V8 Nitro Chakra Karakan
JaegarMonkey (all) (4+) (9+) (10.5+)
(3.5+)

http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html

http://jeftek.com/1942/motorola-xoom-sunspider-results/

JavaScript Execution
=
CPU Processing
=
Battery Consumption

Don't even think
about using
JavaScript-based
animations
CSS-based only
http://www.flickr.com/photos/eschipul/260392040/

Hardware Acceleration
(Compositing)
http://www.flickr.com/photos/pagedooley/3493267443/

Hardware accelerated
CSS animations

No hardware acceleration
before Android 3.0

Be careful with CSS

Trigger Compositing
.some-element {
-webkit-transform: rotate(0);
}
Any transform
works!

http://www.flickr.com/photos/kkoshy/2825871499/
Non-composited elements work as you expect

http://www.flickr.com/photos/kkoshy/2825871499/
Composited elements become images
in memory

http://www.flickr.com/photos/kkoshy/2825871499/
Each composited element takes up
width x height x 4 bytes

Too many composited elements
=
High memory usage
=
Slow-moving UI

iOS doesn't support memory paging

https://bugs.webkit.org/show_bug.cgi?id=56917

CSS Gradients
(Keep 'em small)

CSS Gradients
(i.e. no full page backgrounds)

Radial gradients are heavy
Use caution

If your app is sluggish, try
replacing CSS gradients with
data URIs or images

Keep the DOM small
Remove unused elements

➔
Latency
➔
Device
➔
Testing
http://www.flickr.com/photos/veggiefrog/3435380297/

d !
p e
a p
t c
no
r y
m o
M e

http://www.blaze.io/mobile/

http://stevesouders.com/mobileperf/mobileperfbkm.php

http://jdrop.org

Summary

➔
Latency
➔
Device
➔
Testing
http://www.flickr.com/photos/veggiefrog/3435380297/

Images | JavaScript | CSS | DOM

Balance
This is a new frontier.
The investigation has only just
started.
Test, test, test.
Share.
http://www.flickr.com/photos/brent_nashville/201143283/

Etcetera
• My blog:
www.nczonline.net
• Twitter:
@slicknet
• These Slides:
http://slideshare.net/nzakas/