Reduce the size of page responses

The first time a page loads in Commerce, the server returns all of the data associated with the specified page layout, including the widget template source, element source, and so on.

On subsequent page loads, it is possible to limit the returned data to only those widgets that have not been previously rendered. This feature is not enabled out of the box because you should understand the trade-offs involved before using it.

When this feature is disabled, all of the data for the page is returned for every page call and it is cached, giving you the performance improvements associated with caching. When the feature is enabled, the system tracks the URLs that have been visited to determine which widgets have not been previously rendered and then limits the returned data to those widgets. Caching all of these URLs is not feasible, however, so caching is turned off when this feature is enabled. Instead, the performance improvements that are gained are driven by the drastically reduced amount of data that is returned from the server. This approach is especially beneficial on mobile devices.

To enable this feature, you must create an extension that uploads an application-level JavaScript module that depends on the cc-store-configuration-1.0.js library and sets the enableLayoutsRenderedForLayout flag to true. The following code sample shows what the contents of this JavaScript module might look like (for general information on creating an application-level JavaScript extension, see Create an Extension):

define(
  //-------------------------------------------------------------------
  // DEPENDENCIES
  //-------------------------------------------------------------------
  ['ccStoreConfiguration'],
  //-------------------------------------------------------------------
  // Module definition
  //-------------------------------------------------------------------
  function(CCStoreConfiguration) {

    "use strict";

    return {

      storeConfiguration: CCStoreConfiguration.getInstance(),

      enableLayoutsRenderedFeature: function() {
        storeConfiguration.prototype.enableLayoutsRenderedForLayout = true;
      }

    };
});

In addition to enabling the feature, you may also choose to override the storeLayoutIdsRendered() and getLayoutIdsRendered() methods by doing the following:

  • The storeLayoutIdsRendered() method stores IDs for the layouts visited by the shopper until the page is refreshed or the browser is closed. The stored layout IDs let the server know which pages have been cached so it can limit the returned data to new widgets. The number of IDs that the storeLayoutIdsRendered() method stores is determined by the size of the layoutsRenderedArraySize object and is set to 15 out of the box.

    You can also choose to override the storeLayoutIdsRendered() method for other purposes, for example, so that layout IDs are only stored when the store is accessed on a mobile device.

  • The getLayoutIdsRendered() method returns the stored layout IDs to the server. You can modify this method so that it ignores certain layouts, effectively disabling the feature for those pages.

The following code sample shows the type of modifications you might choose to make to the storeLayoutIdsRendered() and getLayoutIdsRendered() methods:

define(
  //-------------------------------------------------------------------
  // DEPENDENCIES
  //-------------------------------------------------------------------
  ['ccStoreConfiguration'],
  //-------------------------------------------------------------------
  // Module definition
  //-------------------------------------------------------------------
  function(CCStoreConfiguration) {
    "use strict";
    return {
      storeConfiguration: CCStoreConfiguration.getInstance(),
      enableLayoutsRenderedFeature: function() {
         storeConfiguration.prototype.enableLayoutsRenderedForLayout = true;
       },
      storeConfiguration.storeLayoutIdsRendered: function(pLayout) {
         // Store layouts only if the device is mobile
         storeConfiguration.prototype.layoutIdsRendered.push(pLayout.layout);
       },
      storeConfiguration.getLayoutIdsRendered: function() {
              // Don't return the home page's layout ID, effectively disabling this
              // feature for the home page.
              if (storeConfiguration.prototype.layoutIdsRendered.indexOf('home') > -1) {
                    storeConfiguration.prototype.layoutIdsRendered.splice(
                      storeConfiguration.prototype.layoutIdsRendered.indexOf(
                         'home'), 1);
              }
              return storeConfiguration.prototype.layoutIdsRendered;
       }

    };
})