(T) The new challenge to optimize the performance of the Internet is “ideally” to provide for mobile users a near-zero latency experience to the Mobile Web. While for the last two decades, optimization was about a faster network and faster servers, optimization for this decade is about faster content from faster Web sites. In other words, optimizing the Mobile Web requires mostly optimizing the content both in the network and at the Web site. Most of the initial requirements to re-engineering the fabric of the wireline Internet by increasing significantly its bandwidth and improving its data transmission have been accomplished, although new enhancements will certainly continue.

Now, the new challenges are first to optimize the content to provide a similar experience as the one that users expect on wireline networks while the bandwidth of the wireless network is still being limited. Second as the number of users is increasing especially for the Mobile Web (but as well for the wireline Internet), Web sites must always be optimized to accommodate a larger number of users distributed geographically over the world. According to Yahoo, a 400 ms slower Web can translate from 5 to 9% drop in full-page traffic.

There are two complementary approaches to optimize the Mobile Web: network operators can optimize the mobile content in their networks, and content providers can optimize their Web content. And, in general, the more the faster!

Optimizing the Web Traffic for the Mobile Web

On wireless networks, the video is the dominant driver of the Web traffic and can produce up to 40% of the traffic. Most of the video traffic, at any given time, is driven by a small number of videos that are downloaded by a very large number of users.

But even the bandwidth of 4G/LTE networks (5 to 12 Mb/s downlink – 2 to 5 Mb/s uplink) is not enough to accommodate the growth of the media traffic. If the traffic is not routed over WiFi networks (802.11n can provide up to 600 Mb/s), the media must be compressed in the network.

Network optimization of the mobile Web is performed by an inline HTTP proxy (identical to a firewall application proxy). The majority of the data compression is achieved through lossless and lossy optimization at the content layer while some level of data reduction can be achieved at the application layer (such as parallelization of content downloads), and at the transport layer (such as aggregation of TCP tunnels in particular if a client is used at the subscriber’s device).

Optimization generally compresses the HTML, JavaScript, and CSS content provides inlining of JavaScript and CSS content, and gzip many popular Web objects (such as HTML text, Microsoft Office, PDF, XML…). Part of Web optimization can also include lossy optimization of JPEG, GIF and PNG images. Lossy image optimization involves generally multiple quality levels for the user – the more the content is optimized, the lower is its resulting output quality. The average data reduction in HTTP web browsing for a smartphone can range from 20 to 50%.

The Web media (e.g. the video and audio) can be lossy optimized as images included in a Web page. Lossy media optimization involving generally the transcoding and lower frame rates of the media. The average data reduction in HTTP video bytes for a smartphone can be from 15 to 30% for lossless optimization, and from 0% to 35% for lossy optimization.

Optimizing Web Sites for the Mobile Web

The Yahoo Developer Network and Web Performance Engineer Steve Souders have identified 35 best practices to optimize Web sites for faster speed-up. Those practices are divided into 7 categories: content, server, cookie, CSS, JavaScript, images and mobile. Technique 33 and 34 are specific to the Mobile Web. Technique 1 to 32 and 35 applies both to the wireline and wireless Web.

Following are the details of those 35 techniques:

1.  Make Fewer HTTP Requests
2.  Use a Content Delivery Network (CDN)
3.  Add Expires or Cache-Control Header
4.  Gzip Components
5.  Put Stylesheets at Top
6.  Put Scripts at Bottom
7.  Avoid CSS Expressions
8.  Make JavaScript and CSS External
9.  Reduce DNS Lookups
10.  Minify JavaScript and CSS
11.  Avoid Redirects
12.  Remove Duplicate Scripts
13.  Configure ETags
14.  Make Ajax Cacheable
15.  Flush Buffer Early
16.  Use GET for Ajax Requests
17.  Postload Components
18.  Preload Components
19.  Reduce the Number of DOM Elements
20.  Split Components Across Domains
21.  Minimize Number of iframes
22.  Avoid 404s
23.  Reduce Cookie Size
24.  Use Cookie-Free Domains for Components
25.  Minimize DOM Access
26.  Develop Smart Event Handlers
27.  Choose <link> Over @import
28.  Avoid Filters
29.  Optimize Images
30.  Optimize CSS Sprites
31.  Do Not Scale Images in HTML
32.  Make favicon.ico Small and Cacheable
33.  Keep Components Under 25 KB
34.  Pack Components Into a Multipart Document
35. Avoid Empty Image src

Good Readings
RIM’s SlipStream Web Multimedia Optimization Technology
The Yahoo Developer Network

Steve Souders‘ Web Site and Blog

Note: The picture above are my personal BlackBerry and Playbook.

Copyright © 2005-2011 by Serge-Paul Carrasco. All rights reserved.
Contact Us: asvinsider at gmail dot com.