With the growing popularity of mobile devices such as smartphones and tablets, not all websites are churning out mobile-friendly content, it seems. According to a recent study, poorly designed websites are probably killing your battery faster than they should be.

Previously, we featured how free apps and games are more likely to drain smartphones' and tablets' batteries, due to the need to connect to the ad servers to retrieve ad banners and information. But it's not only the free and freemium games that contribute to battery drain. A recent study led by a team from Stanford University has determined that poorly-coded websites lead to unnecessary smartphone battery drain.

In Who Killed My Battery: Analyzing Mobile Browser Energy Consumption (PDF), researchers tested two dozen mobile websites using an Android smartphone. And, while the study on free apps put the blame on ad retrieval and display, the Stanford study blames poor coding choices for the higher-than-necessary battery consumption on smartphones.

Blame It On Rich Media

The study measured the energy needed to render the popular mobile websites and individual web elements such as images, Javascript, Cascading Stylesheets (CSS) and the like.

We find that complex Javascript and CSS can be as expensive to render as images. Moreover, dynamic Javascript requests (in the form of XMLHttpRequest) can greatly increase the cost of rendering the page since it prevents the page contents from being cached."

Additionally, "downloading and parsing cascade style sheets and Javascript consumes a significant fraction of the total energy needed to render the page."

Moreover, the study points out the choice of image format as a possible culprit in increased battery consumption. JPEG is the best format for use on mobile devices, the study says. "[W]hen we translate all images on the Facebook web site to JPEG we obtain considerable energy savings."

Among the 25 mobile websites analyzed, Google's Gmail came out among the fastest and leanest, which contributed to lower battery consumption. In contrast, Apple does not have a mobile web optimized version, and so the Apple homepage alone resulted in a 1.41% hit on battery life.

Even mobile Wikipedia wasn't so mobile-friendly, eating up 1.09% of battery life for an article page. Tweaking the design of the mobile Wikipedia site will result in 30% energy savings without affecting user experience. 

Optimizing Mobile Content

The study has a few recommendations:

  • Use plain links instead of Javascript when formatting websites
  • Use JPEG instead of PNG, GIF or other formats
  • Cache static pages so these can be used without network access
  • Design websites that don't report usage (through Google Analytics) when the smartphone is in low-power mode
  • Use front-end proxy or back-end server pre-processing, as with Amazon Kindle Fire's Silk browser and the cross-platform Opera Mini

A notable suggestion for improving mobile energy consumption is the use of pre-processing. This might include a browser's selective downloading of images, choosing to download a smaller version instead, or the use of a proxy server to optimize images and content, like the Kindle Fire's Silk browser and Opera Mini.

The researchers will present their study at the World Wide Web 2012 conference in Lyon this week, and hopes to urge website owners to focus on building a mobile site optimized for mobile devices. "Sites who do not [optimize for mobile devices], end up draining the battery of visiting phones. This can potentially reduce traffic to the site."