Asynchronous Javascript
One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.
How to make Ajax Cacheable?
Using Ajax is no guarantee that the user won’t be waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It’s important to remember that “asynchronous” does not imply “instantaneous”.
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
- Minify JavaScript – How to minify JavaScript
- 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 the 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.
[…] 9.Make AJAX cacheable: AJAX is extensively used on all modern web applications. The ability to grab content on the fly using asynchronous calls improves user experience by providing a native desktop application feel. You can enhance the user experience by optimizing your AJAX calls. Remember, AJAX does not guarantee that the user will receive the response instantly. The most simple way to enhance AJAX performance is to make AJAX response cacheable. For more about making Ajax cacheable read our post – How to make Ajax cacheable for website optimization […]