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

Question

I would like to get some tips from our SO users about serving static files on a website — like JavaScript, CSS, images and Flash files — faster. Any useful tips?

Answer 1

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 2

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)

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. :)