Fast and responsive interfaces using AJAX

Using AJAX can both speed up site loading and make the interface more responsive. The following list of recommendations will help you achieve this.

AJAX (Asynchronous Javascript and XML) – an approach to building user interfaces of websites and web applications that consists of “background” data exchange between the browser and the web server: when the data is updated the web page is not reloaded completely – only the content of individual blocks changes. This makes working with the website or web application faster and more convenient for the user. The front end uses JavaScript, whereas the back end can be implemented in any programming language (i.e. any platform, any framework or CMS).

If the server-side data for a certain block on the page takes a long time to be generated, then this block can be loaded after the page has been loaded. If it is the main data on the page, then following this advice makes sense when generating data lasting more than 1-2 seconds or when the amount of data over 200Kb. For additional blocks this threshold is somewhat lower.

If the data on the page is not immediately visible, they can also be loaded asynchronously. If some data are somewhere far below the page or for their display requires action by the user, it makes sense to load them either after loading the main content of the page, or when the user performs some action (scroll through the page or use controls).

Quick AJAX-links – processing of transitions to links using AJAX, loading only modifiable content, for example, without reloading connected styles and scripts, “header” of the site, the menu and “footer”. To implement such a great suit Turbolinks and Wiselinks.

Using AJAX when filtering and sorting. Tracking user interactions with the filter form and reloading the list of items matching the new search criteria can be a very handy tool for speeding up user interaction with the interface. If you have a high load on your project, be careful with using AJAX requests in filters initiated immediately after changing a form field value – such filters create an excessive load on the server, as requests are sent at each change, and most changes are intermediate in nature (the user only formulates his request, and all intermediate steps are processed).

“Warming up” the browser and server cache with AJAX. Do your users often work with an application in a particular or predictable scenario, and some steps of that scenario require loading a large amount of data or a complex generation process? Then you should consider loading the data your user will soon need into the browser cache, or preparing that data on the server side. For example, if a user visits a product page, you can load enlarged photos of that product in the background (even before they initiate the enlargement process). Here, of course, it is important to balance between the potential acceleration of further work and the caused load on the server and the user channel – you should not use this approach without measuring the user channel speed (for example, for mobile users), as well as without a valid justification of the preliminary execution of the task and evaluation of the current server load.

Data transfer rather than views in AJAX – loading JSON- or XML-data and their subsequent templating already on the client side requires less traffic between the server and clients, less server resources for templating and most often works faster than loading already pre-formed HTML code.

Caching and GZIP compression of AJAX requests speeds up application responsiveness. Today’s browsers support compressed data processing, compressed data is smaller in size and transferred faster. Caching AJAX responses greatly speeds up your application, just use the appropriate headers in the web server response – Expires or Cache-Control max-age, Last-Modified or ETag. However, all the JS optimization rules work for AJAX too.

Audience counting with JavaScript turned off. If your audience with JS disabled is important (share of such users is usually less than 0.5%), then AJAX interface should be activated only when JS is active in browser, but if JS is disabled, classic interface must be provided.