Tips for serving static files faster, like JavaScripts, CSS and images

Answer 1

Use a content delivery network (CDN) to serve static files. Takes a whole lot of load off your server that deals with working your CMS or other web application. Some examples include Amazon S3 and Google, which hosts several JavaScript libraries for instance.

Answer 2

The best tip I can give you is: buy Steve Sounder's book High Performance Web Sites which is full of easy-to-follow tips. On the account of static images: use a content delivery network (CDN), which means: just place your static content on another server, on another (sub) domain and you have the best performance you can have for static content.

The advantages are: no cookies send back and forth (this accounts for much overhead!), no other HTTP overhead, good timeouts, solid performance when using external CDN and your own server gets much less trafic. There are many commercial (like Amazon S3), but also free, CDN suppliers.

Some less-important but still valuable of tips:

• minify your JavaScript (speeds up first load only);
• combine your JavaScripts and CSS-files into one and;
• use CSS sprites for your (smaller) images.

Note: StackOverflow is a fine example website that follows all these tips and download YSlow to test your own website.

Answer 3

Use a Content Delivery Network - CDN - for static content.

Alternatively you can create a subdomain, i.e. gfx.yoursite.com, to host all your static content. Disable cookies and optimize the site performance with aggresive caching.

You may also want to look into CSS sprites, they can improve performance as well for common graphics.

To reduce the number of external resources in a page, you can also embed small images directly in your CSS files using base 64 encoding. This will reduce the number of DNS lookups and improve performance. However, it adds quite a bit of complexity and maintenance quickly become a nightmare. This is a nifty tool to help you, Convert any image into a base64 string, but be careful. :)

Answer 4

Check out Yahoo's suggestions at http://developer.yahoo.com/yslow/ and http://developer.yahoo.com/performance/rules.html. Some general points:

1. Use a CDN for static files (and disable cookies on the CDN domain)
2. Make sure image sizes are optimised
3. Minify your JS files
4. Place your SCRIPT tags at the bottom of your HTML, and use the "defer=" attribute where possible (this speeds up the browser loading the page)