How do i identify personalisation in HTML documents (To assist with HTML caching implementation)

In order to be able to cache HTML documents (A key win in website performance and availability) its necessary to identify which content in HTML documents is personalised per user.

A good example to make this clear is the shopping cart on an ecommerce website. If the shopping cart (ie. 1 item in cart) is implemented in the page HTML then this page cannot be served to multiple users as this would share one persons cart with other users,.

Other common items that are personalised in HTML:

  • Logged in status
  • CSRF (session security) tokens
  • Product recommendations

To enable HTML to be cached you need to identify the areas of personalisation and then change your application code to load that personalisation separately to the HTML document (Most commonly via AJAX calls (which is our strong recommendation), though you could also use ESI blocks to do this)

We will outline below the process to identify personalisation in HTML documents:

  1. Open your site in a browser window and perform personalisation actions (eg. log in and add to cart)
  2. Open an Incognito browser window and visit the same page (without logging in or adding to cart)
  3. View the HTML source code of each browser window
  4. Compare this source code in a text compare tool to identify which areas have changed