Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Santa Clara, 06-22-2010



          Mobile Web
    High Performance




   Maximiliano Firtman
   @firt www.firt.mobi

Pi...
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 d...
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...
Mobile Web Development

    Techniques and best practices
   for delivering the best possible
  experience for each mobile...
Why Mobile WPO
Facts


      Mobile Devices                                              63%	



                 Internet               ...
Why


1.  Mobile networks are slower

2.  Mobile processors are slower

3.  Mobile browsers are different

4.  Mobile user...
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 method...
Mobile	
  Browsers	
  Categories	
  by	
  its	
  browser	
  

•  Smartphone	

  •  Large screen, touch, partial HTML 5 & C...
Mobile	
  Browsers	
  

                                MOBILE WEB USAGE	


      Smartphones	
                    Smartph...
Mobile	
  Widget	
  Overview	
  

• Widgets and webapps platforms	





                             See my presentation a...
Mobile	
  Browsers	
  

• WebKit-based pre-installed	

  •  Safari on iOS	

  •  Android browser	

  •  Symbian browser	

...
Mobile	
  Browsers	
  

•  Non-WebKit preinstalled 	

   •  NetFront browser	

   •  Myriad browser (formerly Openwave)	

...
Mobile	
  Browsers	
  

•  User installable	

   •  Opera Mobile	

   •  Opera Mini	

   •  Firefox	

   •  UC Browser	

 ...
How to reach!
the right!
experience!
to each device!
Progressive Enhancement
    for Mobile web
HTML	
  5	
  
Content Adaptation
  Device Library     Lazy	
  Load	
  AJAX	
  



                     Basic	
  JavaScript...
Device Libraries

• WURFL	

•  Device Atlas	

•  ASP.NET Mobile Device Browser File	





    www.mobilexweb.com for links...
Tools

• Testing	

•  Performance	

•  Debugging
Testing Tools

•  Emulators & Simulators	


  •  Only some of them are useful for mobile web	

    •  iPhone, Android, Bla...
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 ...
Virtual Labs

Some are software-based and some magic-based	


 •  Free solutions	

    •  Nokia Remote Device Access	

   ...
Performance Tools

 •  Classic desktop solutions	

   •  FireBug,YSlow!, PageSpeed	

   •  Using with User Agent Switcher ...
Performance Tools

 •  Server-Side scripts for performance	

   •  Cloud Four’s Mobile Browser Test	


 •  Client-Side scr...
Debugging Tools

•  JavaScript-based	

  •  JIL Object Browser	

  •  FireBug Lite	


•  Platform Solutions	

  •  Safari ...
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
Prochain SlideShare
Chargement dans…5
×

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?

  • Soyez le premier à commenter

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
  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. 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. Why On smartphones, a web is rendered 40-80% slower than in desktop. On mid-end devices, 4x-10x slower
  22. Why WPO has higher impact in mobile
  23. Why Users hate you
  24. Let’s talk about browsers!
  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. 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. 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
  28. Mobile  Widget  Overview   • Widgets and webapps platforms See my presentation at www.mobilexweb.com
  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. 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. Mobile  Browsers   •  User installable •  Opera Mobile •  Opera Mini •  Firefox •  UC Browser •  Skyfire •  BOLT •  Chromium
  32. How to reach! the right! experience! to each device!
  33. Progressive Enhancement for Mobile web
  34. HTML  5   Content Adaptation Device Library Lazy  Load  AJAX   Basic  JavaScript   CSS  WebKit   Extensions   Advanced  CSS   Simple   CSS   HTML  
  35. Device Libraries • WURFL •  Device Atlas •  ASP.NET Mobile Device Browser File www.mobilexweb.com for links and tips
  36. Tools • Testing •  Performance •  Debugging
  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. Testing Tools • Testing with real devices, real networks is mandatory
  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. Virtual Labs Some are software-based and some magic-based •  Free solutions •  Nokia Remote Device Access •  Samsung •  Commercial solutions •  DeviceAnyWhere •  Perfecto Mobile
  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. 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. Debugging Tools •  JavaScript-based •  JIL Object Browser •  FireBug Lite •  Platform Solutions •  Safari Console •  BlackBerry - Visual Studio

×