Your SlideShare is downloading. ×

Don't touch the mobile parts


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?

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Dont touch the mobile partsFrancesco Fullone <>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 ” [ ] and “extended slow parts” [ ]
  • 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 [ ]
  • 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 [ ]
  • 21. Caching, now, is not a difficult task * helps us [ ]
  • 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 [ ]
  • 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: x-wap-profile: [...] * 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 [ ]
  • 34. Load resources as late as possible* and store them to be never loaded again* use ajax and infinite scrolling pattern [ ] 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 code http://jdrop.org
  • 45. Your new best friend* * buy it on Amazon
  • 46. Francesco Fullone @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT