We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?

1. Santa Clara, 06-22-2010
Mobile Web
High Performance
Maximiliano Firtman
@firt www.firt.mobi
Picture from Simon Howden freedigitalphotos.net

2. Maximiliano Firtman
 www.firt.mobi
 twitter.com/firt
 Blog: www.mobilexweb.com

3. What
MWPO – Mobile Web Performance Optimization*
*Thanks Steve Souders for creating WPO!

4. But first…
What is mobile web?

5. Mobile Web
Is it other web?
NO
But, the device and the context where
we see the web are different

6. Mobile Web
Why should we
care about
Mobile Web?

7. Mobile Web
And now we have
RETINA
DISPLAY

8. Mobile Web
But…
 it is still a 3” screen
 The user is on the move
 Does the user like to
zoom and pan?

9. Mobile Web
And more important for us
Mobile browsers are different

10. Let’s talk about some
Myths

11. Myths
One document should
work for all devices

12. Myths
Just use standard HTML

13. Myths
People are not using their
mobile browsers

14. Myths
Mobile web is iPhone,
Android and… maybe
BlackBerry

15. Mobile Web Development

16. Mobile Web Development
Techniques and best practices
for delivering the best possible
experience for each mobile device

17. Mobile Web Development
Techniques and best practices
for delivering the best possible
experience for each mobile device
Even with widgets, webapps or
offline web applications

18. Why Mobile WPO

19. Facts
Mobile Devices 63%
Internet 26%
0 500 10001500200025003000350040004500
 1.8 billion Internet Connections1
 4.6 billion Mobile Devices2
 The difference will be bigger in the future
1 International Telecommunications Union 2 The Fact Book - CIA

21. Why
1. Mobile networks are slower
2. Mobile processors are slower
3. Mobile browsers are different
4. Mobile users are different
5. Compatibility is different

22. Why
On smartphones, a web is rendered 40-80%
slower than in desktop.
On mid-end devices, 4x-10x slower

23. Why
WPO has higher impact in mobile

24. Why
Users hate you

25. Let’s talk about browsers!

26. Mobile
Browsers
• Too many
• Limited support and higher support than desktop
• Different navigation methods. Proxied vs. Direct
Browsers
• No documentation for most of them
• Non-updatable

27. Mobile
Browsers
Categories
by
its
browser
• Smartphone
• Large screen, touch, partial HTML 5 & CSS3, widgets
• High-end
• Touch or keypad, HTML 4, AJAX, widgets
• Mid-end
• Keypad, 240x320, HTML 4, XHTML MP, WML, CSS,
Basic AJAX support
• Low-end
• Keypad, 128x160, XHTML MP, Basic HTML 4 & CSS

28. Mobile
Browsers
MOBILE WEB USAGE
Smartphones
Smartphones
High-­‐end
devices
High-­‐end
devices
Mid-­‐end
devices
Mid-­‐end
devices
low-­‐end
low-­‐end
devices
devices
MARKET SHARE

29. Mobile
Widget
Overview
• Widgets and webapps platforms
See my presentation at www.mobilexweb.com

30. Mobile
Browsers
• WebKit-based pre-installed
• Safari on iOS
• Android browser
• Symbian browser
• webOS browser
• Series 40 browser from 6th edition
• Bada browser
• (future) BlackBerry browser

31. Mobile
Browsers
• Non-WebKit preinstalled
• NetFront browser
• Myriad browser (formerly Openwave)
• Internet Explorer
• Web Browser for Series 40 (up to 6th edition)
• MIB Motorola Internet Browser
• BlackBerry browser
• NTT Docomo i-mode browser
• Obigo-Teleca browser
• microB (Maemo / MeeGo)

32. Mobile
Browsers
• User installable
• Opera Mobile
• Opera Mini
• Firefox
• UC Browser
• Skyfire
• BOLT
• Chromium

33. How to reach!
the right!
experience!
to each device!

34. Progressive Enhancement
for Mobile web

35. HTML
5
Content Adaptation
Device Library Lazy
Load
AJAX
Basic
JavaScript
CSS
WebKit
Extensions
Advanced
CSS
Simple
CSS
HTML

36. Device Libraries
• WURFL
• Device Atlas
• ASP.NET Mobile Device Browser File
www.mobilexweb.com for links and tips

37. Tools
• Testing
• Performance
• Debugging

38. Testing Tools
• Emulators & Simulators
• Only some of them are useful for mobile web
• iPhone, Android, BlackBerry, Symbian, webOS, Series 40,
Opera Mobile, Opera Mini, Windows Mobile
• No mobile browser emulation for
• Bada, MeeGo (Maemo), propietary OS’s devices (for LG,
Motorola, Samsung), NetFront, Windows Phone 7
www.mobilexweb.com for links and tips

39. Testing Tools
• Testing with real devices, real networks is
mandatory

40. Testing Tools
• Testing with real devices, real networks is
mandatory
• Get a lot of new friends 
• Buy some “key” devices
• Use virtual labs

41. Virtual Labs
Some are software-based and some magic-based
• Free solutions
• Nokia Remote Device Access
• Samsung
• Commercial solutions
• DeviceAnyWhere
• Perfecto Mobile

42. Performance Tools
• Classic desktop solutions
• FireBug,YSlow!, PageSpeed
• Using with User Agent Switcher for Firefox
• Mobile Solutions
Doesn’t exist, but we can rely on server-side
and proxy-based solutions (for Wi-Fi devices).

43. Performance Tools
• Server-Side scripts for performance
• Cloud Four’s Mobile Browser Test
• Client-Side scripts for performance
• Yahoo UI Profiler
• Proxy-based solutions
Charles Debugger
• Useful for emulators and real devices
• Throttling feature to emulate GPRS, EDGE, 3G

44. Debugging Tools
• JavaScript-based
• JIL Object Browser
• FireBug Lite
• Platform Solutions
• Safari Console
• BlackBerry - Visual Studio
and Eclipse

45. Now,
Mobile Web High
Performance Tips

46. Starting with
14 WPO Rules

47. Make fewer HTTP requests

48. Make fewer HTTP requests

49. Make fewer HTTP requests
 HTTP Headers in mobile web are larger!
 Average 30% above desktop browsers

50. Make fewer HTTP requests

51. Make fewer HTTP requests
 Yes, make fewer requests, please!
 But how?

52. Make fewer HTTP requests
Donate $50 per request

53. Make fewer HTTP requests
Are you sure you need all those
requests?
It’s just a mobile, remember: 3”

54. Make fewer HTTP requests
In the home page, embed your CSS
and JavaScript

55. Make fewer HTTP requests
In the home page, embed your CSS
and JavaScript
After onload:
 download external CSS and JS
 save them to local cache

56. Make fewer HTTP requests
Use inline images (data URI)

57. Make fewer HTTP requests
img width=100 height=17 alt=O'Reilly src=data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAEYAAAARBAMAAACSi8f4AAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/
//////8AAACpqanMzMxmZmaHhoQ/Pz9kt3AEAAAACHRSTlMA/////////9XKVDIAAAAJcEhZcwAA
CxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRF
WHRDcmVhdGlvbiBUaW1lADEyLzExLzA5uegApgAAAQNJREFUKJGVkUFTwyAQhfMXXiH1LA3hDMTe
SVDPidW7WnMvkxn/vo+MsamX6s7wgOy3O29JgetR/I2Rdy8B8HIcAyhj8PLIr0dsuYlDF8i8KWWC
/BRKaVCUTaJmkhcDuNOHLVCaJg6VfJY6JivqGJHEjn00q3tpsGcfd0KuuGdx2+fsmSl3m2r2k2gG
g30i434xSMlmht0YbR+EflAU71dMW89zzWcy2W61eF6YssK5j3vlII81Lj0vzOKHaXCuSz8334yb
gC2bkdlUK6ZeMVvTdMM0M0IL3fmQskbD08LA8YHDzGDw9Nyn7Hziuv1hsH/PltCQi9770MmsXFaG
f/z3q/EFatlL/IFsBmgAAAAASUVORK5CYII= /

58. Make fewer HTTP requests
Use inline images (data URI)
Remember:
 optimize the image first
 GZIP the document
You can also:
 use local storage

59. Make fewer HTTP requests

60. Make fewer HTTP requests
Use local pictograms
whenever you can

61. Make fewer HTTP requests
Use local pictograms
Solutions
 450 emoji icons for iPhone #x9999
 XHTML MP Pictograms
object data=pict:///core/arrow/right /
 Japanese pictograms
 Create your own pictograms with local
storage (HTML 5, widgets)

62. Make fewer HTTP requests
See pukupi.com/post/1964

63. Make fewer HTTP requests
XHTML MP Pictograms only work
in old and low-end devices
 BlackBerry before 4.6
 NetFront browser
 Myriad / Openwave
 Motorola Internet Browser

64. Make fewer HTTP requests
Use CSS extensions
For:
 Titles
 Buttons
 Backgrounds
 Visual Separators
 Borders

65. Make fewer HTTP requests
text-shadow

66. Make fewer HTTP requests
-webkit-border-radius

67. Make fewer HTTP requests
-webkit-text-stroke -webkit-text-fill-color

68. Make fewer HTTP requests
CSS Sprites

69. Make fewer HTTP requests
-webkit-border-image

70. Make fewer HTTP requests
-webkit-gradient function

71. Make fewer HTTP requests
-webkit-transformation

72. Make fewer HTTP requests
-webkit-box-reflect -webkit-mask

73. Make fewer HTTP requests
Canvas

74. Make fewer HTTP requests
Mutipart documents
 Use a device library
 Use Accept header, look for multipart/mixed or
application/vnd.wap.multipart
 BlackBerry, Nokia, Series 40, Symbian,
Openwave other low- and mid-end devices
 Create dynamically the multipart document

75. Use a Content Delivery Network
 It is better to have it
 Use other domain
- Cookies
- Parallel downloads

76. Add an Expires Header
 Yes, use it. Every device
understand it.
 Be careful with
- Resources 20Kb
- Mobile Caches are small
 You can have more control in
HTML 5

77. GZIP Components
 Yes, use it. +95% devices
supports it.
 Be careful with
- Proxies and Transcoders
- Old low-end devices
- Old BlackBerry devices
- Old NetFront devices

78. Put Stylesheets at the Top
 Works similar to desktop

79. Move scripts to the bottom
 With some exceptions, script
blocks parallel downloads
 So, move scripts to the bottom

80. Avoid CSS Expressions
 They don’t work on mobile
browsers

81. Make JS and CSS external
 In theory, it will be better
 But, to reduce requests, we
should embed them in the Home
Page

82. Reduce DNS lookups
 Yes, please

83. Avoid redirects
 Yes, and in mobile redirects are
very common
mysite.com
m.mysite.com
m.mysite.com/iphone

84. Avoid redirects
 Deliver the home page using the
same URL
You can take some approaches for SEO
using the same URL

85. Remove duplicate scripts
 Are you even thinking on more
than one script?
Use only one script file, compressed and
with GZIP

86. Configure ETags
 They don’t work on mobile
browsers

87. Now,
Other Tips

88. Reduce DOM
 Keep it simple!
 Did you understand? Keep it
simple!
 Ok, KISS

89. JavaScript Frameworks
 We all love jQuery, but is it
suitable for mobile?

90. JavaScript Frameworks
• Average loading and parsing time in 3G networks. Only the main script file. If
it loads lazily other scripts, they are not counting here.
• Don’t use these numbers. The important conclusion is that JS frameworks
are harmful for performance if we just load as a simple script tag
• Final numbers vary regarding on device, CPU and network

91. JavaScript Frameworks
 Use native code when possible
(DOM browsing, AJAX)
 Use mobile-optimized frameworks
- baseJS
- XUI
 Use hardware-accelerated
animation instead of a library for
effects

92. Use mobile code
 Right MIME and DOCTypes for each
device
 Use viewport meta tag
 Use mobile version meta tags
 Create valid, simple HTML

93. Use mobile code
 BlackBerry
- meta name=HandheldFriendly content=True /
 Windows Mobile
- meta name=MobileOptimized content=width /
 Semantic
- link rel=alternate media=handheld href= /
 Safari, Android, webOS, BB
- meta name=viewport content=width=device-
width,initial-scale=1.0,user-scalable=no/

94. Lazy Load Components
 After onload or with prediction
 For images, later-usage
resources and code

95. Lazy Load Components

96. Deferred JavaScript execution
 Very clever solution
 Created by Gmail Mobile team
and Charles Jolley
 Deliver the JS inside a comment
block
 When needed remove comments
and eval
 It work on smartphones

97. Local Code Repository
 Download a JS code by AJAX,
dynamic script or other technique
 Store it in localStorage or
database for future usage.
 Eval or inject the code in a script
tag.
 Useful for auto-updatable widgets

98. Use AJAX for content
 On compatible devices, use AJAX
 Less traffic = more performance
 Use a server-side engine
 Implement SEO over AJAX
 Using progressive enhancement

99. Use COMET solutions
 COMET solutions for AJAX don’t
work on mobile browsers
 Many problems with 3G and
operator gateways

100. Optimize JavaScript
 JavaScript = expensive
 Reduce it, simplify it
 Reduce global variables
 Avoid large code execution
 Follow any tip you can find about
JS optimization

101. Timer usage
 Don’t use timers with a frequency
higher than 1s
 Gmail Mobile team analysis
 What framework are you using?
 In home widgets, remember how
much time your code will be live

102. Image optimization
 Follow typical image optimization
techniques
 Use PNG safely
 Use optimized animated GIF against
Flash for banners, when possible.
- Animated GIF doesn’t work on webOS or Android
 Use SVG for charts and shape-based
images
- SVG only works on Safari, webOS, Symbian and
NetFront

103. Use Application Cache
 HTML 5 new feature
 Manifest file
 Can show the first HTML, CSS, JS and
images without using network
 Use AJAX to retrieve update information
 Update the cache

104. Use Offline Storage
 HTML 5 new feature
 localStorage and Database
 Store useful objects
- Images in data URI format
- JSON with useful collections
- Scripts with codes by module
 Define a versioning method

105. IFrames
 Don’t use iframes
 They are not compatible with
most browsers.
 For those who are compatible, it
have strange behaviors
 Slow down all the page load

106. CSS optimization
 Again, Keep it Simple
 Reduce large CSS structures
 Use direct selectors
 Follow desktop CSS optimization rules

107. Geolocation Cache
 Remember last user’s position
 Start your query while the updated position
is loaded
 Ask the user for its location if the
geolocation query is taking much time

108. Widget and webapp optimization
 Don’t create a super DOM with lots of divs
with display: none
 DOM Object Pool for recycling
 Endless scrolling pattern
wiki.forum.nokia.com/index.php/
JavaScript_Performance_Best_Practices

109. Do Mobile
Keep it Simple
Best Experience
for each device
Test measure
Don’t let the user
hates you
Picture from Simon Howden freedigitalphotos.net

110. THANK YOU!
twitter.com/firt
www.mobilexweb.com
Pictures from freedigitalphotos.net