I'm trying to always keep size of images I publish on the web at a minimum. I have been using the smush.it service a lot, but after Y! took over the service, it hasn't been working too well -- for example I can't smush images stored locally any more.
Also, minifying and merging JS and CSS is a good trick to keep loading times down.
Now I'm interested to know -- which webapps, tools or tricks do you use to optimize your web content?
2) YSlow itself.
3) Cheating creatively. For example, the front page of Bingo Card Creator has one middle-weight screenshot on it, which links to a hefty full-sized version in a lightbox which accompanies some text exhorting users to download or sign up now. I want opening that Lightbox to be faster than instant, but the screenshot is huge. So I cheat: by the simple expedient of placing <img src="/blah.jpg" style="display: hidden;" /> somewhere visible on the front page, everybody who hits it will start loading the image more or less immediately. Then, when they trigger the lightbox (some seconds later), the image displayed in it (<img src="/blah.jpg" />) doesn't come from my server at all, it comes straight from their browser cache, and renders almost instantly.
Related trick: I load the critical assets for my purchasing page on every page on the site. Thus, someone accessing the purchasing page (which I have clear reason$ to want to be fast) will almost always see it stupidly fast, despite it having a fair bit of Javascript and whatnot to render the cart.
I also abuse the browser cache for "live" previews in my web app. Switching an image's source to an image which is not downloaded is a bad idea, because it typically causes both a delay and unsightly flicker. So instead of switching the source of the image directly, you switch the source of a hidden image, then use a Javascript onload callback to switch the visible image to the source of the hidden image when the hidden image finishes loading.