Note that all links are bold.

For web designers/coders the best browser to use is Firefox due to all the Add-On extensions you have available. Keep in mind that a lot of add-ons can slow your system down so you may want to disable some of them when not in use.

Below is a list of all the Add-On extensions I use for optimizing sites. Some are self explanatory and I'll link to tutorials for the ones that aren't.

YSlow
Firebug
Page Speed (similar to YSlow)
Web Developer
Page validator
CSS validator
Adblock Plus (useful to see what ads are blocked and how it affects the look of your site if visitors use it)

This excellent collection called Web Pro has more useful Add-ons for Firefox but the above covers the "basics".

YSlow is the one I use mostly to give me a quick snapshot of how large my site is and where potential file savings can be realized.

This tutorial covers the basics of YSlow although YSlow already has explanations (see "Read More" in the tabs)

Tutorial:Using Firebug With Your Joomla Website
More video tutorials on YouTube.com using Firebug and Web Developer to edit Joomla templates.

Main things I'll cover is how to GZIP your css/js, make sure your site is cached properly, and your images are optimized properly.

There are 3 excellent extensions to GZIP your css/js:
CssJsCompress
JCH Optimize
RokGZipper

Note that if you run into a conflict, i.e. your page doesn't "look" right or an extension stops working correctly after using one of these extensions you can exclude css/js one at a time.

Caching your site is explained well in this article, note I turn cache off during development. QueryCache is another extension that can be useful for domains that have a heavy load.

Image optimization is probably the biggest offender that I see which can bloat your site very quickly.

Extensions like JCE allow you to re-size a larger image (width and height) down to the size you need but in doing so you're using a larger image which in turn is larger in file size than needed. Always re-size your images to the size needed before uploading to your site.

If you don't have Photoshop, Paintshop, ect.. then there are online photo editing sites like picnik.com, photoshop.com, or splashup.com which you can use to resize, adjust color/brightness, ect...

First thing you need to do is determine if you should use jpg, png, or gif for the type of file.

jpg compression is important as well, most photos look fine at 60%-80% compression. If text overlays the photo then you probably will need to compress on the higher end.

If your image is the right size (width and height) but needs to be compressed more than you can use dynamicdrive.com to quickly see the effects of different compression ratios for jpeg, png, and gif files. You can also see what affect converting the files have on the image.

punypng.com is best for compressing png files.

Note that if using a solid background color you can use jpg instead of png with that solid background color. There is no reason to use a huge 100+kb transparent png file against a white background when a 20kb or less jpg file would work just as well.

Also checkout this article "Creative Use of PNG Transparency in Web Design"

Here is a list of my favorite Joomla extensions.

Hope this breakdown helps new web developers, if you have any questions let me know.