AJAX calls, which stand for Asynchronous JavaScript And XML, are becoming more popular as web applications look to bring in personalized items dynamically. AJAX calls are one method to load personalized content separately from the rest of the HTML document, which allows for the full HTML document to be cached, improving back end load time.
AJAX calls have a wide range of applications but are particularly useful for websites who have a large amount of personal information which can prevent full HTML document caching. Ecommerce websites are among those that can use AJAX calls to load cart contents, account information, and product recommendations without embedding that information direclty into the HTML of a page. Platforms such as Magento have embraced AJAX calls, with Magento 2 utilizing AJAX for all personalized information. At Section we regularly use AJAX calls combined with Varnish Cache to allow for the caching of dynamic content without sharing personalized information between users.
How AJAX Calls Work
AJAX uses both a browser built-in XMLHttpRequest object to get data from the web server and JavaScript and HTML DOM to display that content to the user. Despite the name “AJAX” these calls can also transport data as plain text or JSON instead of XML.
AJAX calls use a JavaScript snippet to load dynamic content. As a basic example you could configure a page counter that changed each time a page is reloaded by programming a snippet that is loaded after the main content:
< script > $.getJSON(‘/pagecount’, function(data) {console.log(data); $(‘#p’).html(data.pagecount);});}); < /script >
Because this is called following the rest of the page, you can cache the entire HTML document of the page without worrying that the dynamic content will be broken.
AJAX calls are beneficial for several reasons. Unlike Edge Side Includes, another method of adding personalized content to a webpage, AJAX do not depend on an ESI processor to run, so you could build and test an AJAX call locally without having to run Varnish Cache or another ESI processor locally. Since JavaScript and AJAX are common in development it can also be easier to get started with AJAX than with ESI. AJAX is also a good solution for handling failures because you can program custom error messages to send if, for example, a user’s account or cart information. You can find more information on setting up your own AJAX calls here.
AJAX vs Edge Side Includes
Another method of adding personalized information to a page without loading it directly in the HTML document is by using Edge Side Includes.
Edge Side Includes can tell Varnish Cache to cache a page but fill in the blank dynamic content by fetching that content from the origin server. This is done by adding an ESI line such as < esi:include src=’/pagecount-esi’/ > for page count.
By using ESI you can cache the full HTML document with the dynamic content and do not need to use JavaScript. A key point of ESI is that Varnish Cache will start to send the HTML document immediately even while it is fetching the dynamic content from the origin - this will keep your total HTML document load time around the same but dramatically improve the time to first byte which is an important metric for both search engine ranking and perception of load time.
With ESI you need an ESI processor such as Varnish Cache. Some benefits of ESI are that it allows you to program specifically within the Varnish Cache layer and does not require the use of JavaScript. This can be beneficial if your users’ devices/browsers do not accept JavaScript. ESI is also a good solution for API calls which typically do not execute JavaScript.
One downside of ESI is that they it be can be difficult to test properly if you do not have a specific testing solution like Section’s Developer PoP installed.
Download Section’s Guide to Varnish Cache
Section uses Varnish Cache as a caching reverse proxy so that users can easily cache both static and dynamic content. To learn more about how Varnish Cache can be used to speed up your website please visit our docs.
