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?
3 Answers
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.
3 Comments
ACP
how to combine your JavaScripts and CSS-files into one? Any good article to get started?
Abel
@Pandiya: that highly depends on how you serve them. I.e., if they are dynamically generated, you must change your dynamic generation. In general, combining JavaScript files or CSS is nothing more than just pasting them unchanged all into one (make sure to keep the loading order though).
Abel
@Pandiya: I updated the post with a link to another SO article on that very subject.
Check out Yahoo's suggestions at http://developer.yahoo.com/yslow/ and http://developer.yahoo.com/performance/rules.html. Some general points:
- Use a CDN for static files (and disable cookies on the CDN domain)
- Make sure image sizes are optimised
- Minify your JS files
- 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)
Comments
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. :)
1 Comment
Abel
I thought that the data-scheme wasn't supported by IE yet, so that rules out the majority of users... :(