Don't touch the mobile parts
4 likes•1,372 views
The document provides tips for optimizing websites for mobile browsers. It discusses differences between mobile and desktop browsers like slower rendering speeds and varied browser families on mobile. It recommends strategies like embedding resources inline, caching assets locally, lazy-loading content, minimizing requests and file sizes, detecting devices, and testing on mobile emulators. The document emphasizes optimizing for the limitations of low-end mobile browsers.
![In the previous* WPO episodes
* “don't touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.ly/5ihLT ]](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-3-320.jpg)
![...and that 97% of performance
issues happen at frontend*
* from webperformancetoday.com [ http://ow.ly/5hd35 ]](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-10-320.jpg)
![Different country* means different browser
* From icrossing.co.uk [ http://ow.ly/5hanY ]](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-20-320.jpg)
![Caching, now, is not a difficult task
* browserscope.org helps us [ http://ow.ly/5h8Db ]](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-21-320.jpg)
![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 ]](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-22-320.jpg)
![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 doesn't works](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-27-320.jpg)
![Save JavaScript function with
Application Storage*, then fire them
to a tag and eval when needed
* as Google and Bing do [ http://ow.ly/5h8Ab ]](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-33-320.jpg)
![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](https://image.slidesharecdn.com/mmadonttouchmobile-110628150908-phpapp02/85/Don-t-touch-the-mobile-parts-34-320.jpg)
Don't touch the mobile parts
- 1. Don't touch the mobile parts Francesco Fullone <[email protected]> Twitter @fullo
- 2. Who am I Francesco Fullone aka Fullo - PHP developer since 1999 - President - and Open Source Evangelist - CEO @ - founder @ - Nerd and geek
- 3. In the previous* WPO episodes * “don't 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 that resource loading order matters
- 6. Sayid tried to cut the bandwidth usage decreasing files number and size...
- 7. … helped by Hurley whom reduces downloads forcing headers 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 more mysterious and frightening journey...
- 10. ...and that 97% of performance issues happen at frontend* * from webperformancetoday.com [ http://ow.ly/5hd35 ]
- 12. On a smartphone a web page is 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 doesn't mean same behaviours
- 15. We have to talk about mobile 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. Symbian's 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 don't 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 cache 1Mb total cache (uncompressed) * and a lot of other low-end browsers
- 26. 3G Networks are slow, with higher latency and limited* * comet doesn't 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 doesn't works
- 28. Beware of the content proxies*! * used by some browsers like Opera mini. Ajax doesn't 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 in the page: CSS, JavaScript* and images with data URI * then save them after document.onload in local cache
- 32. Use Application Storage to statically save most used resources and user infos* in localStorage * as the geolocation infos and prefs
- 33. Save JavaScript function with Application 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 them when possible. Use SVG for charts. * animated GIF doesn't 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, isn't 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://mobile.httparchive.org http://blaze.io/mobile http://jdrop.org http://www.mobilexweb.com
- 45. Your new best friend* * buy it on Amazon http://ow.ly/5sm6C
- 46. Francesco Fullone [email protected] @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT makemeapp.it www.makemeapp.it