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.
https://wiki.mozilla.org/Webdev:Cesium
/shameless plug :)
- Combine as many JS and CSS files as possible. You will also want to compress them.
- Use memcached to cache backend elements to speed up pageloads and hit the database less.
- If you arent using a CDN, at least use a reverse proxy so you don't create unnecessary overhead for your webserver.
- Get a profiler for your app. See what areas are slower then others. Find a database profiler and fix queries that are slow. If your using MySQL use the slow query log to see where there are hold ups.
- Make sure you have the proper indexes on your database. Over doing it can waste memory.
- Try and use gzip if possible. Most browsers support it and it can have a noticeable speed increase.
One thing that you have to worry about here is serving these files through https://. A lot of CDNs either (a) don't support https:// or (b) charge a monster fee for it.
This would also address issues that arise when you're using a product or framework that assembles the page dynamically, and you're not in control of how the css links are constructed.
My lazy, three-step optimization process:
1. turn on gzip encoding in apache
2. verify that caching headers (Etag/last-modified) are being set
3. tail -f mysql-slow.log
1. Use a python profiler and look for problems, which usually means rewriting db calls to tradeoff storage space vs CPU time and/or front loading tasks so they're heavier on write than read
2. Write memcache layers wherever possible
3. Optipng or cut the backgrounds out of gifs
4. Clean up redundant css / js
5. Minify
6. I set really long modified headers, but use a version number that I can increment in my statics files' query strings
* YSlow for Firebug to see if anything is really loading slowly / being gross
* Like you mentioned, YUI Compressor to minify/compress CSS and JS
* We use Symfony so the Symfony dev toolbar to profile slow SQL queries and generally see what is causing pages to render slowly.
* Lately, Firebug's NET panel to monitor what requests are taking the most time.
I've used pngcrush before, but just for png's, and it didn't come close to what Photoshop was giving me as a result.
Photoshop does cost ~$700, but if you already have it, definitely give it a whirl.