Mobile Web High Performance

29,765 views

Published on

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?

Published in: Technology
3 Comments
82 Likes
Statistics
Notes
No Downloads
Views
Total views
29,765
On SlideShare
0
From Embeds
0
Number of Embeds
5,168
Actions
Shares
0
Downloads
909
Comments
3
Likes
82
Embeds 0
No embeds

No notes for slide

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

×