How to make Ajax Cacheable for website optimization
How to make Ajax Cacheable?
To improve performance, it’s important to optimize these Ajax responses. The most important way to improve the performance of Ajax is to make the responses cacheable. To make Ajax responses cacheable, set cache-control and expires header of the AJAX response. Some of the other rules also apply to Ajax responses:
- Gzip Components – Read our post How to Enable gzip
- Reduce DNS Lookups – How to reduce DNS lookups
- Configure ETags – How to configure entity tags
- Avoid Redirects – How Redirects Hurt Performance
Let’s look at an example. A Web 2.0 email client might use Ajax to download the user’s address book for autocompletion. If the user hasn’t modified her address book since the last time she used the email web app, the previous address book response could be read from cache if that Ajax response was made cacheable with a future Expires or Cache-Control header. The browser must be informed when to use a previously cached address book response versus requesting a new one. This could be done by adding a timestamp to the address book Ajax URL indicating the last time the user modified her address book, for example, &t=1190241612. If the address book hasn’t been modified since the last download, the timestamp will be the same and the address book will be read from the browser’s cache eliminating an extra HTTP roundtrip. If the user has modified her address book, the timestamp ensures the new URL doesn’t match the cached response, and the browser will request the updated address book entries.