The do’s and don’ts of delivering rich content experience on mobile devices

Editor’s note: Keynote Systems’ Startup Shootout Index provides some insight into the three-screen challenge now facing anyone with a web presence. We’ll be bringing you a fresh set of data from Keynote every month. Check out previous Startup Shootout results.

It’s a common challenge we see frequently with customers. In past articles, we’ve looked at some standard best practices Keynote recommends for delivering the best graphical experience without killing performance. This month, we’ll dig a little deeper into some of these techniques, specifically for the mobile environment, and look at how our startups on the Keynote Startup Shootout Index are handling these challenges.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":707966,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"A"}']

Keeping the Connection Clear

Behind every web experience is a complex process of establishing network connections and making requests for specific content. There can be a lot of communication overhead needed to get the content from a web server to the web browser. Today, the standard is to make multiple HTTP requests over a single web server connection. Known as “persistent connections” or “HTTP Keep-Alive”, this is now a standard supported in all current browsers, so there is really no reason not to use it.

Even the fastest sites on the web can overlook optimizations like persistent connections. One site on the Startup Shootout Index that is not using HTTP Keep-Alive is Rovio. Rovio is already the fastest site in the Mobile and Social Gaming category of our index, but their user experience could be further improved by turning on persistent content connections.

Optimum Ways for Managing Images

Images, we know, can be the prime suspects in slowing mobile performance. How many images you place on a page and how you manage them are critical to the user experience. Keynote has identified four key areas for optimizing the use of images for maximum mobile performance.

1. Serve images at the same resolution that they are actually displayed on screen. 

For many site owners, creative content often starts out in enormous high resolution, which makes them a big problem for smaller mobile screens. The 3G network then strains to transmit them. Many sites struggle with this problem. The smartphone-optimized site for social retailer Gilt has a small number of images that are being served at higher resolutions over the network and then are scaled to a smaller size for display on the device. Although in the case of the Gilt home page this is only impacting a small number of images, the site is transmitting over 65% more bytes of data for those images than are necessary. Serving the images at the proper scale would not only reduce the number of bytes that need to be sent over the network, but would also enable the browser to display them on the screen more quickly.

2. Use compression tools

Web designers have many image formats to choose from. PNG and GIF image formats are “lossless” in that they encode exactly the content of the original image. The JPEG image format, on the other hand is a “lossy” format, where there is a tradeoff between higher levels of compression versus high levels of image quality. JPEGs are best suited for photographic images, where some compression is less noticeable. GIF and PNG files are better suited for image content with sharp edges or straight lines, such as buttons or images with text.

It is important to choose an appropriate level of compression with JPEGs, but many web designers could also optimize their images stored in the “lossless” image formats. Lossless compression techniques can optimize images stored in GIF or PNG formats. They accomplish this by stripping out unneeded meta-data like comments or by optimizing color palettes to remove data about colors that are never used in the image. There are several excellent (and often free) lossless compression tools available. For PNG images, tools such as OptiPNG and PNGOUT can even work as filters in a production deployment process to make sure that every image is compressed automatically during the release process.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":707966,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"A"}']

3. Reduce the number of small images requests.

It still surprises us how many web sites – approximately three quarters of the sites we look at, and especially mobile sites – could significantly enhance performance if they just looked at ways to reduce the number of image requests on each page. This can be done with a technique called CSS (Cascading Style Sheets) sprites. Doing this takes time and effort but there are a number of tools that can help. CSS files are used by the browser to decide everything from what fonts are going to be used and background colors or images to where to display content on the screen. CSS rules can be written that pull out a small region of a larger image file, for example, to display at a certain spot on a web page. This means that each small image you want to place on the page does not need to be stored in its own file. A collection of smaller images can instead be placed into a single image file, and clever CSS rule-writing can make sure that the image content is displayed exactly where you want it on the page.

By replacing many small image files with a single larger image file, you may not be sending any fewer bytes over the network, but you can reduce the network overhead of making many separate file requests. This is especially helpful on mobile network connections where the network latency is much worse than the throughput. CSS spriting is something that every mobile site designer should at least consider in the site design process, as it can greatly improve performance.

4. Look at alternatives to CSS Sprite.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":707966,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"A"}']

An alternative to the CCS Sprite is the Data URIs (uniform resource indicator). For images being used only once, it’s a quick solution. To use a data URI, you convert an image to a string of text using a tool that does Base64 encoding. What looks like a string of garbage characters can be decoded in the browser and used as the original image data. By inserting the Base64-encoded image data directly into the HTML for the page, small images can be included without the need to make separate network requests.

There is one major caveat to using data URIs, though. Images encoded as data URIS do not get cached separately from the HTML file they are included in. So, if you have a collection of images that are used on multiple pages on your site, you will be best served with using CSS sprites. For a single image that is unique to one page on your site, you might consider using a data URI to optimize the performance.

So a common theme emerges – avoid round trips to the server. If you are unable to keep the number of images on a page to a small number, then this is the area that will bring down performance.

Conclusion

Given the unique challenges of the mobile environment, here’s what we would suggest as the main three best practices to stay close to:

[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":707966,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"A"}']

1. Avoid redirects wherever possible. This is time critical to the user experience.

2. Keep the number of DNS (domain name system) lookups on a page as small as possible as every new domain lookup adds time to loading. If you do need to have domain lookups, choose them carefully. We recommend limiting them to two domains. Be particularly aware of the third party domains, such as Google Analytics and Adobe to name just two common ones. Also make sure they are loading at the end to avoid delays which you, the site, operator, have no control over. Again this is critical for mobile performance – it is less impactful on desktops.

3. Keep the number of overall requests to ten or less. For example, one JavaScript file, one CSS etc. – anything to avoid the number of round trips on a 3G network.

 

[aditude-amp id="medium4" targeting='{"env":"staging","page_type":"article","post_id":707966,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"A"}']

Keynote tests the sites in the index hourly and around the clock from four locations over the three largest U.S. wireless networks, emulating the browsers of three different devices. Data is collected from San Francisco and New York and then aggregated to provide an overall monthly average in terms of both performance and availability.

Photo Credit: Shutterstock