Your SlideShare is downloading. ×
0
Mobile Web
High Performance
Picture from Simon Howden freedigitalphotos.net	

Santa Clara, 06-22-2010
Maximiliano Firtman
...
Maximiliano Firtman
  www.firt.mobi
  twitter.com/firt
  Blog: www.mobilexweb.com
What
MWPO – Mobile Web Performance Optimization*
*Thanks Steve Souders for creating WPO!
But first…
What is mobile web?
Mobile Web
Is it other web?
NO	

But, the device and the context where
we see the web are different
Mobile Web
Why should we
care about
Mobile Web?
Mobile Web
And now we have
RETINA
DISPLAY
Mobile Web
But…
 it is still a 3” screen
 The user is on the move
 Does the user like to
zoom and pan?
Mobile Web
And more important for us
Mobile browsers are different
Let’s talk about some
Myths
Myths
One document should
work for all devices
Myths
Just use standard HTML
Myths
People are not using their
mobile browsers
Myths
Mobile web is iPhone,
Android and… maybe
BlackBerry
Mobile Web Development
Mobile Web Development
Techniques and best practices
for delivering the best possible
experience for each mobile device
Mobile Web Development
Techniques and best practices
for delivering the best possible
experience for each mobile device
Ev...
Why Mobile WPO
Facts
  1.8 billion Internet Connections1
  4.6 billion Mobile Devices2
  The difference will be bigger in the future
1...
Why
1.  Mobile networks are slower
2.  Mobile processors are slower
3.  Mobile browsers are different
4.  Mobile users are...
Why
On smartphones, a web is rendered 40-80%
slower than in desktop.
On mid-end devices, 4x-10x slower
Why
WPO has higher impact in mobile
Why
Users hate you
Let’s talk about browsers!
Mobile	
  Browsers	
  
• Too many	

• Limited support and higher support than desktop	

• Different navigation methods. Pr...
Mobile	
  Browsers	
  Categories	
  by	
  its	
  browser	
  
• Smartphone	

• Large screen, touch, partial HTML 5 & CSS3, ...
Mobile	
  Browsers	
  
Smartphones	
  
High-­‐end	
  devices	
  
Mid-­‐end	
  devices	
  
low-­‐end	
  devices	
  
Smartph...
Mobile	
  Widget	
  Overview	
  
• Widgets and webapps platforms	

See my presentation at www.mobilexweb.com
Mobile	
  Browsers	
  
• WebKit-based pre-installed	

• Safari on iOS	

• Android browser	

• Symbian browser	

• webOS br...
Mobile	
  Browsers	
  
• Non-WebKit preinstalled 	

• NetFront browser	

• Myriad browser (formerly Openwave)	

• Internet...
Mobile	
  Browsers	
  
• User installable	

• Opera Mobile	

• Opera Mini	

• Firefox	

• UC Browser	

• Skyfire	

• BOLT	
...
How to reach!
the right!
experience!
to each device!
Progressive Enhancement
for Mobile web
HTML	
  5	
  
Lazy	
  Load	
  AJAX	
  
Basic	
  JavaScript	
  
CSS	
  WebKit	
  
Extensions	
  
Advanced	
  CSS	
  
Simple...
Device Libraries
• WURFL	

• Device Atlas	

• ASP.NET Mobile Device Browser File	

www.mobilexweb.com for links and tips
Tools
• Testing	

• Performance	

• Debugging
Testing Tools
• Emulators & Simulators	

• Only some of them are useful for mobile web	

• iPhone,Android, BlackBerry, Sym...
Testing Tools
• Testing with real devices, real networks is
mandatory
Testing Tools
• Testing with real devices, real networks is
mandatory	

• Get a lot of new friends 	

• Buy some “key” de...
Virtual Labs
Some are software-based and some magic-based	

• Free solutions	

• Nokia Remote Device Access	

• Samsung	

...
Performance Tools
• Classic desktop solutions	

• FireBug,YSlow!, PageSpeed	

• Using with User Agent Switcher for Firefox...
Performance Tools
• Server-Side scripts for performance	

• Cloud Four’s Mobile Browser Test	

• Client-Side scripts for p...
Debugging Tools
• JavaScript-based	

• JIL Object Browser	

• FireBug Lite	

• Platform Solutions	

• Safari Console	

• B...
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Mobile Web High Performance
Upcoming SlideShare
Loading in...5
×

Mobile Web High Performance

1,064

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,064
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×