Mobile Web High Performance

1,291 views

Published on

Nice content about Mobile Web Performance Optimization (MWPO)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,291
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile Web High Performance

  1. 1. Mobile Web High Performance Picture from Simon Howden freedigitalphotos.net Santa Clara, 06-22-2010 Maximiliano Firtman @firt www.firt.mobi
  2. 2. Maximiliano Firtman   www.firt.mobi   twitter.com/firt   Blog: www.mobilexweb.com
  3. 3. What MWPO – Mobile Web Performance Optimization* *Thanks Steve Souders for creating WPO!
  4. 4. But first… What is mobile web?
  5. 5. Mobile Web Is it other web? NO But, the device and the context where we see the web are different
  6. 6. Mobile Web Why should we care about Mobile Web?
  7. 7. Mobile Web And now we have RETINA DISPLAY
  8. 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. 9. Mobile Web And more important for us Mobile browsers are different
  10. 10. Let’s talk about some Myths
  11. 11. Myths One document should work for all devices
  12. 12. Myths Just use standard HTML
  13. 13. Myths People are not using their mobile browsers
  14. 14. Myths Mobile web is iPhone, Android and… maybe BlackBerry
  15. 15. Mobile Web Development
  16. 16. Mobile Web Development Techniques and best practices for delivering the best possible experience for each mobile device
  17. 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. 18. Why Mobile WPO
  19. 19. Facts   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 0 500 10001500200025003000350040004500 Internet Mobile Devices 26% 63%
  20. 20. 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
  21. 21. Why On smartphones, a web is rendered 40-80% slower than in desktop. On mid-end devices, 4x-10x slower
  22. 22. Why WPO has higher impact in mobile
  23. 23. Why Users hate you
  24. 24. Let’s talk about browsers!
  25. 25. 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
  26. 26. 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
  27. 27. Mobile  Browsers   Smartphones   High-­‐end  devices   Mid-­‐end  devices   low-­‐end  devices   Smartphones   High-­‐end  devices   Mid-­‐end  devices   low-­‐end   devices   MOBILE WEB USAGE MARKET SHARE
  28. 28. Mobile  Widget  Overview   • Widgets and webapps platforms See my presentation at www.mobilexweb.com
  29. 29. 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
  30. 30. 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)
  31. 31. Mobile  Browsers   • User installable • Opera Mobile • Opera Mini • Firefox • UC Browser • Skyfire • BOLT • Chromium
  32. 32. How to reach! the right! experience! to each device!
  33. 33. Progressive Enhancement for Mobile web
  34. 34. HTML  5   Lazy  Load  AJAX   Basic  JavaScript   CSS  WebKit   Extensions   Advanced  CSS   Simple   CSS   HTML   ContentAdaptation DeviceLibrary
  35. 35. Device Libraries • WURFL • Device Atlas • ASP.NET Mobile Device Browser File www.mobilexweb.com for links and tips
  36. 36. Tools • Testing • Performance • Debugging
  37. 37. 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
  38. 38. Testing Tools • Testing with real devices, real networks is mandatory
  39. 39. Testing Tools • Testing with real devices, real networks is mandatory • Get a lot of new friends  • Buy some “key” devices • Use virtual labs
  40. 40. Virtual Labs Some are software-based and some magic-based • Free solutions • Nokia Remote Device Access • Samsung • Commercial solutions • DeviceAnyWhere • Perfecto Mobile
  41. 41. 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).
  42. 42. 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
  43. 43. Debugging Tools • JavaScript-based • JIL Object Browser • FireBug Lite • Platform Solutions • Safari Console • BlackBerry -Visual Studio

×