Dont touch the mobile partsFrancesco Fullone <ff@ideato.it>Twitter @fullo
Who am IFrancesco Fullone aka Fullo- PHP developer since 1999-               President-         and Open Source Evangelist...
In the previous* WPO episodes* “dont touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.l...
Kate and Jack discovered that the      80% of loading time        is on the browser
In the same time Locke     understood thatresource loading order         matters
Sayid tried to    cut the bandwidth usagedecreasing files number and size...
… helped by Hurley whom   reduces downloads forcingheaders to enable browser cache
at the same time, the “Others” studied  the new possibilities offered by the               HTML5
They never believe that  mobile WPO is an even moremysterious and frightening journey...
...and that 97% of performance    issues happen at frontend*   * from webperformancetoday.com [ http://ow.ly/5hd35 ]
The Browser Chapter
On a smartphone a web pageis rendered from 40% to 80% slower          than on a desktop.
A lot of different browsers         Pre-installed webkit  (iOS, Android, Blackberry, webOS, Symbian …)     Pre-installed n...
Same engine doesnt mean    same behaviours
We have to talk aboutmobile browser families:      Smartphone       Mid-End       Low-End
Mid-End to Low-End browsers   families lost (randomly):       HTML5 support        CSS3 support       Caching quota       ...
Still...
Symbians Anna WebKit browser* has              No Application Cache              No Geolocalization API              No HT...
CSS Expressions and iFrames dont  work on most mobile browsers
Different country* means different browser                    * From icrossing.co.uk [ http://ow.ly/5hanY ]
Caching, now, is not a difficult task     * browserscope.org helps us [ http://ow.ly/5h8Db ]
New iOS* and Android browsers have   4Mb file cache (uncompressed)  4Mb total cache (uncompressed)  1Mb limit for file exe...
But...
Old iOS 3.x browser* had       25.6Kb file cache1Mb total cache (uncompressed)     * and a lot of other low-end browsers
The Network Chapter
3G Networks are slow, with higher      latency and limited* * comet doesnt works and 3G operator applies some limits.
HTTP Headers are different*                                            [...]    user-agent: LG-CU920/V1.0p Obigo/Q05A Prof...
Beware of the content proxies*!* used by some browsers like Opera mini. Ajax doesnt work properly
The Mobile WPO Chapter
As for desktop browsers a reduction   of the requests is necessary,but mobile strategies are somewhat              differe...
When possible embed resources inthe page: CSS, JavaScript* and images            with data URI    * then save them after d...
Use Application Storage to staticallysave most used resources and user      infos* in localStorage        * as the geoloca...
Save JavaScript function withApplication Storage*, then fire them  to a tag and eval when needed      * as Google and Bing...
Load resources as late as possible* and store them to be never loaded               again* use ajax and infinite scrolling...
Use CSS to draw interface object*-webkit-border-image, CSS sprites, -webkit-border-           radius, -webkit-gradient, .....
Optimize images* and defer themwhen possible. Use SVG for charts.* animated GIF doesnt work on Android and WebOS, SVG is n...
GZip, Minify and Merge  CSS and JavaScript*        * as usual ;)
When possible avoid JavaScript frameworks*and use specific ones (ie. zepto.js) * some mobile browser can take up to 8s to ...
Detect device, reduce image details             as needed       * use window.devicePixelRatio on WebKit
HTML coding still matter
Use different (KiSS*) html than in the          desktop browser   * reduce elements. You are still on a 3/4 device, isnt it?
Reduce DOM elements, CSS classes  and apply good programming            patterns
Add specificic html meta tags* for        mobile browsers* viewport, media=handheld, MobileOptimized, HandheldFriendly    ...
Test your codehttp://mobile.httparchive.org   http://blaze.io/mobile      http://jdrop.orghttp://www.mobilexweb.com
Your new best friend* * buy it on Amazon http://ow.ly/5sm6C
Francesco Fullone      ff@ideato.it         @fullo  via Quinto Bucci 205   47023 Cesena (FC) info AT makemeapp.it  www.mak...
Upcoming SlideShare
Loading in...5
×

Don't touch the mobile parts

1,982

Published on

Building website is an hard task, optimize it for a desktop browser is not trivial. What happen when we have to optimize it for a mobile browser?

Published in: Technology

Don't touch the mobile parts

  1. 1. Dont touch the mobile partsFrancesco Fullone <ff@ideato.it>Twitter @fullo
  2. 2. Who am IFrancesco Fullone aka Fullo- PHP developer since 1999- President- and Open Source Evangelist- CEO @- founder @- Nerd and geek
  3. 3. In the previous* WPO episodes* “dont touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.ly/5ihLT ]
  4. 4. Kate and Jack discovered that the 80% of loading time is on the browser
  5. 5. In the same time Locke understood thatresource loading order matters
  6. 6. Sayid tried to cut the bandwidth usagedecreasing files number and size...
  7. 7. … helped by Hurley whom reduces downloads forcingheaders to enable browser cache
  8. 8. at the same time, the “Others” studied the new possibilities offered by the HTML5
  9. 9. They never believe that mobile WPO is an even moremysterious and frightening journey...
  10. 10. ...and that 97% of performance issues happen at frontend* * from webperformancetoday.com [ http://ow.ly/5hd35 ]
  11. 11. The Browser Chapter
  12. 12. On a smartphone a web pageis rendered from 40% to 80% slower than on a desktop.
  13. 13. A lot of different browsers Pre-installed webkit (iOS, Android, Blackberry, webOS, Symbian …) Pre-installed non-webkit(Bada, old Blackberry, Internet Explorer, DoCoMo …) User installable (Opera Mobile/Mini, Firefox, Skyfire ...)
  14. 14. Same engine doesnt mean same behaviours
  15. 15. We have to talk aboutmobile browser families: Smartphone Mid-End Low-End
  16. 16. Mid-End to Low-End browsers families lost (randomly): HTML5 support CSS3 support Caching quota Ajax
  17. 17. Still...
  18. 18. Symbians Anna WebKit browser* has No Application Cache No Geolocalization API No HTML5 Audio/Video tags Very limited CSS3 support * Released on April 2011 for X7 and E6 Nokia Smartphones
  19. 19. CSS Expressions and iFrames dont work on most mobile browsers
  20. 20. Different country* means different browser * From icrossing.co.uk [ http://ow.ly/5hanY ]
  21. 21. Caching, now, is not a difficult task * browserscope.org helps us [ http://ow.ly/5h8Db ]
  22. 22. New iOS* and Android browsers have 4Mb file cache (uncompressed) 4Mb total cache (uncompressed) 1Mb limit for file execution (js/css) * but cache is invalidated at the reboot [ http://ow.ly/5h8G4 ]
  23. 23. But...
  24. 24. Old iOS 3.x browser* had 25.6Kb file cache1Mb total cache (uncompressed) * and a lot of other low-end browsers
  25. 25. The Network Chapter
  26. 26. 3G Networks are slow, with higher latency and limited* * comet doesnt works and 3G operator applies some limits.
  27. 27. HTTP Headers are different* [...] user-agent: LG-CU920/V1.0p Obigo/Q05A Profile/MIDP-2.0 Configuration/CLDC-1.1 via: 1.1 alpmagr1fe02WAP2-mbl x-up-devcap-accept-language: en,fr,es x-up-devcap-charset: US-ASCII,ISO-8859-1,UTF-8,UTF-16,ISO-8859-15,ISO-10646-UCS-2 x-up-devcap-iscolor: 1 x-up-devcap-numsoftkeys: 3 x-up-devcap-screendepth: 16 x-up-devcap-screenpixels: 240,400 x-up-devcap-smartdialing: 1 x-up-subno: ppu_1077a8d8fc1_vmag.mycingular.net x-wap-profile: http://gsm.lge.com/html/gsm/LG-CU920.xml [...] * 30% more than desktop, ETag doesnt works
  28. 28. Beware of the content proxies*!* used by some browsers like Opera mini. Ajax doesnt work properly
  29. 29. The Mobile WPO Chapter
  30. 30. As for desktop browsers a reduction of the requests is necessary,but mobile strategies are somewhat differents
  31. 31. When possible embed resources inthe page: CSS, JavaScript* and images with data URI * then save them after document.onload in local cache
  32. 32. Use Application Storage to staticallysave most used resources and user infos* in localStorage * as the geolocation infos and prefs
  33. 33. Save JavaScript function withApplication Storage*, then fire them to a tag and eval when needed * as Google and Bing do [ http://ow.ly/5h8Ab ]
  34. 34. Load resources as late as possible* and store them to be never loaded again* use ajax and infinite scrolling pattern [ http://ow.ly/5h9A6 ] to load only visible data, but remember to free memory
  35. 35. Use CSS to draw interface object*-webkit-border-image, CSS sprites, -webkit-border- radius, -webkit-gradient, ... * but remember that the browsers compatibility changes
  36. 36. Optimize images* and defer themwhen possible. Use SVG for charts.* animated GIF doesnt work on Android and WebOS, SVG is not enabled on Android. When possible strip EXIF tags.
  37. 37. GZip, Minify and Merge CSS and JavaScript* * as usual ;)
  38. 38. When possible avoid JavaScript frameworks*and use specific ones (ie. zepto.js) * some mobile browser can take up to 8s to parse jQuery
  39. 39. Detect device, reduce image details as needed * use window.devicePixelRatio on WebKit
  40. 40. HTML coding still matter
  41. 41. Use different (KiSS*) html than in the desktop browser * reduce elements. You are still on a 3/4 device, isnt it?
  42. 42. Reduce DOM elements, CSS classes and apply good programming patterns
  43. 43. Add specificic html meta tags* for mobile browsers* viewport, media=handheld, MobileOptimized, HandheldFriendly * add the right MIME for each device and use viewport meta tag
  44. 44. Test your codehttp://mobile.httparchive.org http://blaze.io/mobile http://jdrop.orghttp://www.mobilexweb.com
  45. 45. Your new best friend* * buy it on Amazon http://ow.ly/5sm6C
  46. 46. Francesco Fullone ff@ideato.it @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT makemeapp.it www.makemeapp.it
  1. A particular slide catching your eye?

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

×