Tips for Speeding up High Traffic Mobile News Sites

After a general slowdown in performance in last month’s report, the Keynote Mobile News and Portal Index showed overall improvements in performance in the past month (November 16-December 15).

One standout is USA Today which showed the most significant improvement – cutting a whopping 5.04 seconds off its response time. The improvement is indeed impressive, but it still takes 14.51 seconds for the mobile site to load – more than three times longer than our best practice recommendations. So where can it improve performance?

It looks like USA Today reduced the number of server requests from approximately 63 to 48. Forty-eight is still a significant number though, and could be reduced even further with some straightforward techniques.

Similarly it looks like USA Today has shrunk its page weight - the number of bytes on a given page, reflecting the total of images, JavaScript and content – from 280k to 240k. Again, these are all steps in the right direction but for the mobile experience, they need to be reduced even more.

Let’s look at some areas they could improve.

1.The initial page has two versions of jQuery running – versions 1.44 and 1.51. This is incredibly inefficient on a mobile device. The best step would be to decide which version to use and standardize on it.

2.We see much third party content being loaded even ahead of the actual page, including items such as Pinterest, Gannet and Google Web Services. Not only does this slow the load time but if they have performance problems, then so will the USA Today site. Best practices recommended by Keynote are always to load these third party services last.

3.We also see a very large number of frequently tiny images (such as bullet points and squares) which could very easily be consolidated using CCS sprite (Cascading Style Sheet). For the mobile experience, large numbers of images cause big problems. Instead use a one image file – CCS sprites. 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. When each individual image is a separate request it can add up to a quarter of a second to a download time. This quickly adds up when it comes to mobile performance. We see at least ten images on the page that could be consolidated, taking the number of images from 40 to 30.

“There are so many items which can have a detrimental effect on mobile performance,” comments Ken Harker, mobile evangelist at Keynote. “But just continually optimizing your site – such as the recommendations we make here for USA Today, can have a profound effect on performance. It’s usually not one big item, but as we see here a number of small, incremental steps which can help shave time off the mobile site’s speed.”

Taken as a whole, if USA Today keeps consolidating these areas, it might find itself in the Keynote Mobile Portal and News Index top ten performers.

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.