What are the most effective methods when it comes to reducing the amount of bandwidth a website needs to render a page?
Aggressive caching? Minifying JS/CSS? Gzip? CMS? Sprites?
A few basic methods easily implementable by any website:
gzipif the browser who made the request supports it.
A little more involved:
Use sprites that are generated automatically. A sprite is a single image containing multiple icons or other small images; you then choose which image to show with the CSS
background property. Example.
The advantage is that the client makes less HTTP requests (which have overhead).
I bolded "automatically" because if you are doing these things manually then it's definitely not worth it, and it makes code maintenance a nightmare. Usually doing it automatically means writing a custom script, which is why it's a "little more involved",
Google has outlined and explained their recommendations to best Minimize Payload Size. They include the following techniques:
These suggestions are a part of their open-source Firefox/Firebug add-on project called Page Speed. Similar to Yahoo!'s YSlow plugin. The actual Page Speed add-on will check for many more optimizations than that list explains in detail. Instructions for Using Page Speed are also presented.
Yahoo!'s Best Practices for Speeding Up Your Website identify a similar set of best-practices:
(Yahoo!'s list is ~35 items long, no need to quote it in its entirety.)
Both YSlow (image link) and Page Speed (image link) will allow you to run tests on your pages, suggesting things that you can do and showing you what, of their recommendations, is already implemented.