Best practice for serving resource files (JS, CSS, images) in a responsive web design

Question

While reading Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones - Smashing Magazine, in the 'Data Transfer and Pricing' section, the below one got my attention:

Much has been said recently about Responsive Web Design. This approach does create some challenges with minimizing data transfer. Jason Grigsby has a very good write-up on the specifics. To summarize, CSS media queries — part of the magic sauce of responsive design — do almost nothing to lessen the overhead of data transfer to mobile devices. Resizing or hiding unwanted images still requires the full images to be downloaded to the browser. In addition, resources such as JavaScript libraries might be downloaded to mobile devices without even being enabled for users.

While I m reading the lengthy article by Jason Grigsby as mentioned in the Smashing mag article, I m wanted to know if any one following some best practices to avoid such issues?

Answer 1

1. Its good to allow Google to host your jQuery libraries for various reasons. Read here
2. Don't scatter your Javascript functions across numerous files. The lesser files the client needs to fetch, the faster. Multiple files means multiple requests.
3. Often, it works great to include your scripts at the end of your HTML mark up. This makes the HTML markup load faster (page generates faster), after which the JS files are then fetched.
4. Learn to use sprite sheets for your CSS. A sprite sheet is basically a large image that contains various images you need. A single large image is smaller than the sum of its parts because it only needs to maintain a single color table. Also, once again, lesser files to fetch = lesser requests.