SlideShare a Scribd company logo

Mobile Web High Performance

•
•

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 of 110
Download to read offline

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

20

Mobile Web High Performance

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

More Related Content

Mobile Web High 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
  • 13. Myths People are not using their mobile browsers
  • 14. Myths Mobile web is iPhone, Android and… maybe BlackBerry
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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