Google offers tips to make mobile Web faster
Recognizing the furious growth of Internet consumption on mobile phones, Google has put together a practical list of tips to make mobile sites load faster.
The tips come from a new blog post by Google Webmaster Jeremy Weinstein. The post coincides with a new Gomez study that confirms the obvious: slow load times were the No. 1 performance issue experienced by almost 75 percent of mobile Web users.
Per the Gomez findings, more than 80 percent of users claimed they would access mobile Web sites more often from their mobile phone if the experience was as fast and reliable as it is on a personal computer. For that reason alone, it is worth reading Mr. Weinstein's post, so here it is:
Making the mobile Web faster
By Jeremy Weinstein, Google Webmaster
Mobile Internet usage is skyrocketing worldwide. Throughout 2009, 50 percent of all new Internet connections worldwide are coming from phones (eMarketer, 2008 and 2009). Google internal data shows that as mobile browsers improve, users' browsing habits increase.
Mobile browsers render Web pages differently from desktop browsers, so some steps are needed to make them work well on phones. This article contains some basic technical and non-technical tips for making your Web content faster and more suitable for consumption on mobile devices.
Make your pages and applications accessible to mobile
Provide an obvious link to the mobile version from the desktop version
Do you really want users browsing your media-rich 800-pixel-plus wide site on mobile screens without even realizing there's a version you toiled over just for mobile? Make sure your users are even aware a mobile counterpart exists.
Use a conventional mobile URL, and advertise it
No accepted standard exists for providing an address to a mobile version of a desktop service, but there are some recognized conventions: m.yoursite.com, mobile.yoursite.com or yoursite.com/mobile. Choose a simple mobile URL and publish it on your desktop site.
Make the user interface work for mobile devices
Avoid requiring users to do a lot of typing. Provide large, actionable, clickable UI features. Provide URLs that are short and easy to type. Use easily actionable UI widgets and features that compose well together in a small format. Think about the scenario your mobile user is in when they're looking at your site: probably not sitting comfortable at a desk, so information must be able to be found fast. Make sure your content is clearly labeled and succinct.
Format your Web site for a range of mobile browsers
Full-featured (Mobile Safari, Android, etc.), half-featured (BlackBerry), and small-featured (older-style flip phones) browsers all exist in the mobile space. Consider how your mobile Web page will look on screen sizes all the way from 150x128 to 640x480. Mobile browser standards can also differ by country. If you have an international audience, make sure your design is flexible enough to meet the devices available in those countries.
Reduce the number of requests and the amount of data transferred
To avoid a dramatic increase in latency, it is a good idea to reduce the number of times your Web site or application must make a round-trip request to your server. Single large objects load faster than many small ones due to TCP and socket behavior. Keep in mind that while these are general best practices, they especially apply to mobile.
Sprite your images using CSS or transfer your images using a data URI scheme. See the logo image on a Google Search result page for an example of a CSS sprite. Some of Google's services, such as Wave, consolidate static requests by using the data URI scheme, which is a way of including static data items in-line on a Web page. The data URI technique will not work on older browsers and should be used for pages and applications specifically designed for iPhone, Android, or other modern mobile web browsers.
Including an image by its base64 string may cause a loss in some compression provided by image formats (data transferred this way must rely solely on gzip for compression). But, you do avoid opening a new connection/HTTP request, which is often a more important savings factor for mobile.
Minify your code
The less code, the smaller the amount of data transferred, the faster your page will load. While the size of data transferred is often not as important as minimizing round trips, every bit helps on high-latency mobile connections. See an article on HTML optional tags and CSS optimization.
Sometimes Web pages and Web services will redirect a single request several times. If your service requires redirects, perform the redirection server-side rather than client side, in order to reduce client-side round trip requests.
Load contents lazily
Transfer data when needed and preload where appropriate. Don't load images that will never be seen by the end user. Time-to-text on mobile is important. If you have a mobile application that displays a gallery of images, consider downloading the previous and next image to increase UI speed, but don't load images that are far "out of reach."
Take advantage of new features in HTML
Use an application cache for local content storage
HTML5 browsers (Mobile Safari, Android) can use an application cache to both reduce page startup time and to enable offline features.
Use CSS3 instead of images where possible
HTML5 browsers that support CSS3 (again, Mobile Safari, Android) can use attributes for rounded corners, gradients, shadows, text transformations, canvas and more. Using CSS to design your page instead of images can reduce data transfer.
New APIs provided by HTML5 are already being used to make Google's mobile applications. Some examples include: Mobile Gmail uses Application Cache. Mobile Google Search uses the HTML5 Geolocation API to show location-aware results. Google Maps for Mobile and Mobile Gmail both use the canvas tag to avoid transferring images.
Plan for the lowest common denominator
If you want your page or application to reach as many users as possible, you'll have to ensure its compatibility with varying degrees of support by mobile devices. Not only is minimalist code faster, but in general, the less complex the code, the more compatible it will be.
? Flash is currently not supported even by iPhone or Android browsers. Don't use it for mobile Web sites.
Test, test test
If you're a Web developer, you're already familiar with the pains of cross-browser compatibility on desktop Web browsers. Cross-browser testing is just as important for mobile devices.
In order to better format content for mobile device screens, mobile browsers may resize text and images and interpret CSS differently from desktop Web browsers. Verify usability after the mobile browser has "had its way" with your page.
Reading a mobile Web page or using a mobile application can feel very different once you try it in your hand. Don't assume interaction on your PC is equivalent to interaction on a mobile device.