Make the Web Faster

Make the mobile web faster

Author: Jeremy Weinstein, Google Webmaster

Mobile internet usage is skyrocketing worldwide. Throughout 2009, 50% 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.

Gmail for mobile

Gmail provides a mobile version which is more accessible for mobile devices.

Format your website 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 website 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.

An image created with the data URI scheme.

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.

Instead of having a CSS file that imports several others, or a JavaScript file that loads other bits of code, consolidate all of your page's dependencies into a single file. Reducing your page down to a single file (and thus  a single request) will yield an increase in speed.

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.

Eliminate redirects.

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."

Also see Web Performance Best Practices from Page Speed.

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.

See a Google Code Blog post on HTML5 and mobile web applications.

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.

Some warnings:

  • Flash is currently not supported even by iPhone or Android browsers. Don't use it for mobile websites.
  • Many BlackBerrys do not have CSS and JavaScript enabled by default. Most users will not dig through menus to enable them.
  • JavaScript on devices with slow processors can be expensive to execute. Besides implementing network-based optimizations, it's important to make sure your client-side code is lean, mean, and uses minimal memory too.

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.

Testing resources:

Additional resources

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.