Keynote: Tips for Accelerating High-Traffic Mobile News Sites

The challenge of offering mobile content never ends – how to offer a rich experience without slowing the speed down for users? Add to that some major news spikes and you know you’re going to give your mobile news sites a workout.

Almost every site in the Keynote Mobile News and Portal Index was slower in November (actually October 15 to November 14 is the period tracked) than it was in October (September 15 to October 14). The slowdown does not appear to be due to specific events. Looking at the major news sites, we see only minor slowdowns around the time of Hurricane Sandy at the end of October. There was also no real impact around the Presidential election either. The sites seemed to handle the news just fine. However, when you examine the average performance of the sites over the past two months, the long-term trend is that the news and portal sites are getting slower over time. In some cases, sites design changes might give a site a new look and feel, but result in a less responsive experience.

Let’s take a closer look at CBS News. CBS slowed down the most from October to November, in part because they increased the number of assets on their mobile-optimized home page and significantly increased the page weight (by over 100K).

As such they violate several best practice recommendations including:

• Excessive number of redirections prior to the base page HTML document

• Excessive number of HTTP requests overall (sometimes as many as 80 for the entire page)

• Extremely large number of small images (23 images on the page that are smaller than 1K each). They should use CSS sprites (or maybe data URIs) to reduce this number dramatically.

• Very heavy JavaScript - about 160K of JavaScript total

We’ve talked about some of these issues and best practices before, but let’s just recap:

Redirects – Reducing the number of round trips that have to be made from the browser to the web server reduces the risk of latency. Redirects are often used to ascertain that a. you’re a mobile device b. which geography you are coming from and c. what type of mobile device you are using. To cut these redirects, do these determinations on the server and then point the browser to the correct version of the site for the mobile device and country.

Large numbers of images – For the mobile experience, large numbers of images cause big problems. Instead use a one image file – CCS sprites. Called Cascading Style Sheets they can lay out portions of the image on screen by writing out CSS rules. With a little extra markup language it reduces all those round trips to the server which again cuts down the risk of latency.

Heavy JavaScript –A figure like 160k is not unusual for the amount of JavaScript a site might use for a desktop site, but on a 3G network it’s too much. The best practice would be to aim for entire pages to weigh 50k or less, with JavaScript representing a fraction of that total.

“The CBS site highlights the ongoing contrast of desktop versus mobile sites,” comments Ken Harker, mobile evangelist at Keynote Systems, Inc. “What works well in the desktop environment often translates poorly to the mobile world, where excessive code or requests have a big impact on performance.”

Keynote repeatedly tests the sites in the index hourly and around the clock from four locations over the four largest U.S. wireless networks, emulating the browsers of four different devices, including the iPhone 4 on AT&T, the Android-based HTC EVO on Sprint and the Android-based Motorola Droid X on Verizon Wireless. Data is collected from San Francisco and New York and then aggregated to provide an overall monthly average in terms of both speed and reliability.