Effective methods of reducing bandwidth (and thus page load times)?

Question

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?

Answer 1

A few basic methods easily implementable by any website:

• Compress your HTML, CSS and Javascript with deflate or gzip if the browser who made the request supports it.
• Minify your javascript with Google Closure Compiler
• Minify your css with YUI Compressor

A little more involved:

• If a page or image is unlikely to change, tell the browser to cache it. Most web servers already do this for static files, so all you should have to do is add it to your dynamic scripts where possible.
• Merge your CSS and JS files into a single one automatically. This is advantageous as it decreases the HTTP requests (which have overhead and which certain stupid browsers - and by that I mean Internet Explorer - limit by default 2 requests at a time per domain).
• Move your static files (CSS, JS, images, etc) to a separate domain name. This causes cookie information not to be sent in the HTTP request.

• 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",

Answer 2

Google has outlined and explained their recommendations to best Minimize Payload Size. They include the following techniques:

1. Enable compression
2. Remove unused CSS
3. Minify JavaScript
4. Minify CSS
5. Minify HTML
6. Defer loading of JavaScript
7. Optimize images
8. Serve scaled images
9. Serve resources from a consistent URL

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:

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. …

(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.