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:

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

  • I was going to answer, but I think you covered everything :) Jul 8 '10 at 23:47
  • overhead are indeed an important thing to consider, for small file, they can represent a good pourcentage of the data transferred.
    – HoLyVieR
    Jul 8 '10 at 23:48
  • Don't use deflate unless you also check the user agent carefully, since there is a bug in Internet Explorer around deflate.
    – delete
    Jul 9 '10 at 0:20
  • @Kinopiko: yes, good advice. See my question on stack overflow. Jul 9 '10 at 0:28


  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



  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



Your Answer

