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.
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 ...)
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
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 ]
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.
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