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

Mobile Web High Performance

on

  • 22,372 views

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 ...

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?

Statistics

Views

Total Views
22,372
Views on SlideShare
17,309
Embed Views
5,063

Actions

Likes
83
Downloads
891
Comments
2

20 Embeds 5,063

http://www.mobilexweb.com 2503
http://www.symfonylab.com 1962
http://www.royans.net 214
http://www.nokiadevs.com 194
http://velocityconf.com 134
http://www.gomobileornot.com 21
http://translate.googleusercontent.com 15
http://www.sfexception.com 3
http://webcache.googleusercontent.com 3
http://twitter.com 3
http://www2.verious.com 2
http://www.hipertextos.com.ar 1
http://www.brijj.com 1
http://websitesimulator.com 1
http://a0.twimg.com 1
http://www.search-results.com 1
http://www.slideshare.net 1
http://www.netvibes.com 1
http://www.hanrss.com 1
http://www.nokiadeveloper.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • very good! Thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • There is a typo on slide 74, title - 'Mutipart documents'. Thanks for cool presentation!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Web High Performance Mobile Web High Performance Presentation Transcript

  • Santa Clara, 06-22-2010 Mobile Web High Performance Maximiliano Firtman @firt www.firt.mobi Picture from Simon Howden freedigitalphotos.net
  • 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 Even with widgets, webapps or offline web applications
  • Why Mobile WPO
  • 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
  • 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
  • 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. Proxied vs. Direct Browsers •  No documentation for most of them •  Non-updatable
  • 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
  • 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
  • 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 browser •  Series 40 browser from 6th edition •  Bada browser •  (future) BlackBerry browser
  • 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)
  • Mobile  Browsers   •  User installable •  Opera Mobile •  Opera Mini •  Firefox •  UC Browser •  Skyfire •  BOLT •  Chromium
  • 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   CSS  WebKit   Extensions   Advanced  CSS   Simple   CSS   HTML  
  • 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, 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
  • 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” devices •  Use virtual labs
  • Virtual Labs Some are software-based and some magic-based •  Free solutions •  Nokia Remote Device Access •  Samsung •  Commercial solutions •  DeviceAnyWhere •  Perfecto Mobile
  • 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).
  • 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
  • Debugging Tools •  JavaScript-based •  JIL Object Browser •  FireBug Lite •  Platform Solutions •  Safari Console •  BlackBerry - Visual Studio  and Eclipse
  • Now, Mobile Web High Performance Tips
  • Starting with 14 WPO Rules
  • Make fewer HTTP requests
  • Make fewer HTTP requests
  • Make fewer HTTP requests   HTTP Headers in mobile web are larger!   Average 30% above desktop browsers
  • Make fewer HTTP requests
  • Make fewer HTTP requests  Yes, make fewer requests, please!   But how?
  • Make fewer HTTP requests Donate $50 per request
  • Make fewer HTTP requests Are you sure you need all those requests? It’s just a mobile, remember: 3”
  • Make fewer HTTP requests In the home page, embed your CSS and JavaScript
  • 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
  • Make fewer HTTP requests Use inline images (data URI)
  • 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=" />
  • Make fewer HTTP requests Use inline images (data URI) Remember:   optimize the image first   GZIP the document You can also:   use local storage
  • Make fewer HTTP requests
  • Make fewer HTTP requests Use local pictograms whenever you can
  • 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)
  • Make fewer HTTP requests See pukupi.com/post/1964
  • 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
  • Make fewer HTTP requests Use CSS & extensions For:   Titles   Buttons   Backgrounds   Visual Separators   Borders
  • Make fewer HTTP requests text-shadow
  • Make fewer HTTP requests -webkit-border-radius
  • Make fewer HTTP requests -webkit-text-stroke & -webkit-text-fill-color
  • Make fewer HTTP requests CSS Sprites
  • Make fewer HTTP requests -webkit-border-image
  • Make fewer HTTP requests -webkit-gradient function
  • Make fewer HTTP requests -webkit-transformation
  • Make fewer HTTP requests -webkit-box-reflect & -webkit-mask
  • Make fewer HTTP requests Canvas
  • 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
  • Use a Content Delivery Network   It is better to have it   Use other domain - Cookies - Parallel downloads
  • 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
  • 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
  • Put Stylesheets at the Top   Works similar to desktop
  • Move scripts to the bottom   With some exceptions, script blocks parallel downloads   So, move scripts to the bottom
  • Avoid CSS Expressions   They don’t work on mobile browsers
  • Make JS and CSS external   In theory, it will be better   But, to reduce requests, we should embed them in the Home Page
  • Reduce DNS lookups   Yes, please
  • Avoid redirects   Yes, and in mobile redirects are very common mysite.com > m.mysite.com > m.mysite.com/iphone
  • Avoid redirects   Deliver the home page using the same URL You can take some approaches for SEO using the same URL
  • Remove duplicate scripts   Are you even thinking on more than one script? Use only one script file, compressed and with GZIP
  • Configure ETags   They don’t work on mobile browsers
  • Now, Other Tips
  • Reduce DOM   Keep it simple!   Did you understand? Keep it simple!   Ok, KISS
  • JavaScript Frameworks   We all love jQuery, but is it suitable for mobile?
  • 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
  • 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
  • Use mobile code  Right MIME and DOCTypes for each device  Use viewport meta tag  Use mobile version meta tags  Create valid, simple HTML
  • 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"/>
  • Lazy Load Components   After onload or with prediction   For images, later-usage resources and code
  • Lazy Load Components
  • 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
  • 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
  • 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
  • Use COMET solutions   COMET solutions for AJAX don’t work on mobile browsers   Many problems with 3G and operator gateways
  • Optimize JavaScript   JavaScript = expensive   Reduce it, simplify it   Reduce global variables   Avoid large code execution   Follow any tip you can find about JS optimization
  • 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
  • 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
  • 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
  • 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
  • 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
  • CSS optimization   Again, Keep it Simple   Reduce large CSS structures   Use direct selectors   Follow desktop CSS optimization rules
  • 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
  • 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
  • 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
  • THANK YOU! twitter.com/firt www.mobilexweb.com Pictures from freedigitalphotos.net