Don't touch the mobile parts

  • 1,855 views
Uploaded 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?

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?

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,855
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
16
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Dont touch the mobile partsFrancesco Fullone <ff@ideato.it>Twitter @fullo
  • 2. Who am IFrancesco Fullone aka Fullo- PHP developer since 1999- President- and Open Source Evangelist- CEO @- founder @- Nerd and geek
  • 3. In the previous* WPO episodes* “dont touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.ly/5ihLT ]
  • 4. Kate and Jack discovered that the 80% of loading time is on the browser
  • 5. In the same time Locke understood thatresource loading order matters
  • 6. Sayid tried to cut the bandwidth usagedecreasing files number and size...
  • 7. … helped by Hurley whom reduces downloads forcingheaders to enable browser cache
  • 8. at the same time, the “Others” studied the new possibilities offered by the HTML5
  • 9. They never believe that mobile WPO is an even moremysterious and frightening journey...
  • 10. ...and that 97% of performance issues happen at frontend* * from webperformancetoday.com [ http://ow.ly/5hd35 ]
  • 11. The Browser Chapter
  • 12. On a smartphone a web pageis rendered from 40% to 80% slower than on a desktop.
  • 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. Same engine doesnt mean same behaviours
  • 15. We have to talk aboutmobile browser families: Smartphone Mid-End Low-End
  • 16. Mid-End to Low-End browsers families lost (randomly): HTML5 support CSS3 support Caching quota Ajax
  • 17. Still...
  • 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. CSS Expressions and iFrames dont work on most mobile browsers
  • 20. Different country* means different browser * From icrossing.co.uk [ http://ow.ly/5hanY ]
  • 21. Caching, now, is not a difficult task * browserscope.org helps us [ http://ow.ly/5h8Db ]
  • 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. But...
  • 24. Old iOS 3.x browser* had 25.6Kb file cache1Mb total cache (uncompressed) * and a lot of other low-end browsers
  • 25. The Network Chapter
  • 26. 3G Networks are slow, with higher latency and limited* * comet doesnt works and 3G operator applies some limits.
  • 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. Beware of the content proxies*!* used by some browsers like Opera mini. Ajax doesnt work properly
  • 29. The Mobile WPO Chapter
  • 30. As for desktop browsers a reduction of the requests is necessary,but mobile strategies are somewhat differents
  • 31. When possible embed resources inthe page: CSS, JavaScript* and images with data URI * then save them after document.onload in local cache
  • 32. Use Application Storage to staticallysave most used resources and user infos* in localStorage * as the geolocation infos and prefs
  • 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. 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. Use CSS to draw interface object*-webkit-border-image, CSS sprites, -webkit-border- radius, -webkit-gradient, ... * but remember that the browsers compatibility changes
  • 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. GZip, Minify and Merge CSS and JavaScript* * as usual ;)
  • 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. Detect device, reduce image details as needed * use window.devicePixelRatio on WebKit
  • 40. HTML coding still matter
  • 41. Use different (KiSS*) html than in the desktop browser * reduce elements. You are still on a 3/4 device, isnt it?
  • 42. Reduce DOM elements, CSS classes and apply good programming patterns
  • 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. Test your codehttp://mobile.httparchive.org http://blaze.io/mobile http://jdrop.orghttp://www.mobilexweb.com
  • 45. Your new best friend* * buy it on Amazon http://ow.ly/5sm6C
  • 46. Francesco Fullone ff@ideato.it @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT makemeapp.it www.makemeapp.it