Don't touch the mobile parts
-
Upload
francesco-fullone -
Category
Technology
-
view
1.881 -
download
1
description
Transcript of Don't touch the mobile parts
Don't touch the mobile partsFrancesco Fullone <[email protected]> Twitter @fullo
Who am I
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- founder @
- Nerd and geek
In the previous* WPO episodes
* “don't touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.ly/5ihLT ]
Kate and Jack discovered that the 80% of loading time
is on the browser
In the same time Lockeunderstood that
resource loading order matters
Sayid tried to cut the bandwidth usage
decreasing files number and size...
… helped by Hurley whomreduces downloads forcing
headers to enable browser cache
at the same time, the “Others” studied the new possibilities offered by the
HTML5
They never believe thatmobile WPO is an even more
mysterious 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 non-webkit(Bada, old Blackberry, Internet Explorer, DoCoMo …)
User installable(Opera Mobile/Mini, Firefox, Skyfire ...)
Same engine doesn't meansame behaviours
We have to talk about mobile browser families:
SmartphoneMid-EndLow-End
Mid-End to Low-End browsers families lost (randomly):
HTML5 supportCSS3 support
Caching quotaAjax
Still...
Symbian's Anna WebKit browser* has
No Application CacheNo Geolocalization APINo HTML5 Audio/Video tagsVery limited CSS3 support
* Released on April 2011 for X7 and E6 Nokia Smartphones
CSS Expressions and iFrames don't 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 execution (js/css)
* but cache is invalidated at the reboot [ http://ow.ly/5h8G4 ]
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 doesn't works and 3G operator applies some limits.
HTTP Headers are different*[...]
user-agent: LG-CU920/V1.0p Obigo/Q05A Profile/MIDP-2.0 Configuration/CLDC-1.1via: 1.1 alpmagr1fe02WAP2-mbl
x-up-devcap-accept-language: en,fr,esx-up-devcap-charset: US-ASCII,ISO-8859-1,UTF-8,UTF-16,ISO-8859-15,ISO-10646-UCS-2
x-up-devcap-iscolor: 1x-up-devcap-numsoftkeys: 3x-up-devcap-screendepth: 16
x-up-devcap-screenpixels: 240,400x-up-devcap-smartdialing: 1
x-up-subno: ppu_1077a8d8fc1_vmag.mycingular.netx-wap-profile: http://gsm.lge.com/html/gsm/LG-CU920.xml
[...]
* 30% more than desktop, ETag doesn't works
Beware of the content proxies*!
* used by some browsers like Opera mini. Ajax doesn't work properly
The Mobile WPO Chapter
As for desktop browsers a reduction of the requests is necessary,
but mobile strategies are somewhat differents
When possible embed resources in the page: CSS, JavaScript* and images
with data URI
* then save them after document.onload in local cache
Use Application Storage to statically save most used resources and user
infos* in localStorage
* as the geolocation infos and prefs
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 ]
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
Use CSS to draw interface object*-webkit-border-image, CSS sprites, -webkit-border-
radius, -webkit-gradient, ...
* but remember that the browsers compatibility changes
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.
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 parse jQuery
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, isn't it?
Reduce DOM elements, CSS classes and apply good programming
patterns
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
Test your code
http://mobile.httparchive.org
http://blaze.io/mobile
http://jdrop.org
http://www.mobilexweb.com
Your new best friend*
* buy it on Amazon http://ow.ly/5sm6C
via Quinto Bucci 20547023 Cesena (FC)
info AT makemeapp.itwww.makemeapp.it
Francesco [email protected]
@fullo