Bonus tip: The above procedure is even more useful if you are able to use a reverse proxy like Akamai or EdgeCast.

To test the improved performance with firebug you should not use the refresh button on your browser (this will instruct the browser to get the contents anyway) but instead navigate to the URLs normally, as your users would, by typing them in the address bar and pressing enter or by following links.

Here are some cool tools to help out the developer in optimizing code:

Javascript minimizer : https://closure-compiler.appspot.com/home  (They also have an ant add-on that will minify all your javascript automatically when compiling java)
Image Sprites : (Wizard) https://spritegen.website-performance.org/

Hi Tiago,

In my current case, I already see 304 Not Modified responses in Firebug, so these server requests are super-fast. Is there still any advantage to set up the Expires header? 

Thanks!

Hi Pedro,

Sure. Your browser needed to make those calls, even if they were just to be told that the content was not modified.
If these files had an expires header those calls would not be needed in the first place.

So yes, there is definitely an advantage in setting the expires headers - less http calls.

Cheers,
Tiago Simões

@Tiago

 

An alternative solution to make a web application run a lot faster is by adding static files to a content delivery network.

 

You will not only make your web application run a lot faster, but at the same time you will help reduce your server load.

 

NOTE: this solution would be the ideal solution for large enterprise websites.

Content Delivery Network (CDN) providers

https://www.rackspace.com/cloud/cloud_hosting_products/files/

Hi Robert,

You're right, using a CDN is in fact the ideal solution for websites.
But bear in mind the fact that even if you use a CDN this might be a good idea, as some CDN's (or more correctly some reverse proxies) will use this headers to know what to cache.

As a sidenote here's how it's done in IIS7:


Click on HTTP Response Headers


Click on Set Common Headers... and set Expire After 31 days.

Cheers,
Tiago Simões

Hi,

I get asked a lot about the size of js and css in mobile web applications.
But in the end we all want styles, calendars, ajax, validation, etc... in these apps also, so there is not a lot where to trim. 

All modern mobile web browsers (iOS, Android, etc...) now have pretty good caching mechanisms, and as such you should take advantage of that.
So if you are creating mobile applications you should really follow the procedures explained above (these are now also included in the installation checklist). Scripts will be cached the first time you access them and afterwards they'll always be get from the cache.

As a result you'll see your mobile applications loading a lot faster. 

Cheers,
Tiago Simões

Here's a cool article from HighScalability.com that builds upon Tiago's point:
Better Browser Caching Is More Important Than No Javascript Or Fast Networks For HTTP Performance

It's really impressive the difference you get by applying this minor tweak. Try it for yourselves!