As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.

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

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

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

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

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

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

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

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

9. DNS
Web

10. DNS
Cell Co.
Web

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

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

16. Browser creates images = 0 HTTP requests

17. 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/

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

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

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

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

22. <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!

23. .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!

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

25. http://github.com/nzakas/cssembed

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

27. Data URIs are well-supported
across smartphone browsers

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

29. 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/

30. 320x480 768x1024

31. Large images not needed

32. http://tinysrc.net/

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

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

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

38. http://m.bing.com

39. Request #1
146 KB
Request #2
14 KB

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

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

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

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

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

46. 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;

48. 40% of time
on redirect Download
Redirect

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

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

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

52. Keep JavaScript small

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

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

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

62. JavaScript Execution
=
CPU Processing
=
Battery Consumption

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

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

66. Hardware accelerated
CSS animations

67. No hardware acceleration
before Android 3.0

68. Be careful with CSS

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

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

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

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

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

74. iOS doesn't support memory paging

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

76. CSS Gradients
(Keep 'em small)

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

78. Radial gradients are heavy
Use caution

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

80. Keep the DOM small
Remove unused elements

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

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

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

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

94. http://jdrop.org

97. Summary

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

99. Images | JavaScript | CSS | DOM

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

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