Set SXA caching options

Abstract

Caching to improve performance.

You can improve the load time of your SXA web pages by setting the caching options for the SXA renderings. The SXA HTML cache minimizes the number of times Sitecore processes renderings. This is very important, especially if you have renderings that iterate over a large amount of items.

Note

To enable caching for your site, you must select the Cache Html check box. Navigate to sitecore/content/tenant/site/settings/Site Grouping/<site>, and in the Flags section, select the Cache Html check box.

Important

You can apply HTML caching on SXA items on different levels, which have different priorities. For example, the values set directly on a rendering will always take precedence over the rendering definition caching values.

In the rendering definition item, you can specify what action Sitecore takes to render the component. If you set the cache settings in the rendering definition item, these settings are applied to all sites, unless cache settings are specified otherwise.

To set caching options for a rendering globally:

  1. Navigate to sitecore/Layout/Renderings/Feature/Experience Accelerator and click the relevant rendering.

  2. In the Caching section, select the caching options for the navigation rendering to help improve website performance:

    Set the caching option for a rendering.
  • Cacheable – select to enable HTML caching. If your rendering has only one view, this is the only check box that you must select.

  • Clear on Index Update – select to clear the HTML cache of renderings when the index is updated.

  • Vary By Data – select to cache a separate version of the HTML based on the data source of the rendering.

  • Vary By Device – select to cache copies of the output for each device that is used.

  • Vary By Login – select if the rendering is displayed differently for logged in users.

  • Vary By Parm – select to cache the output for each parameter accepted by the rendering. Used to distinguish different instances of the same rendering.

  • Vary By Query String – select to cache the output for each unique combination of query string parameters.

  • Vary By User – select if the rendering displays user-specific information.

If you set the caching options for a rendering on a site level, this overrides the global caching settings in the rendering definition items.

Setting caching options for specific renderings can be convenient, for example, because for a particular site you want the Page Content rendering to be cached.

To set the caching of a rendering on the site level:

  1. Navigate to sitecore/<tenant>/<site>/Presentation/Cache Settings and on the Home tab, click Component Cache Settings.

    Set the caching of a rendering on site level.
  2. Enter a name for the setting and click OK.

  3. In the Select Items dialog box, navigate to Layout/Renderings/Feature/Experience Accelerator, click the renderings for which you want this setting to apply, and use the arrow to move them to the Selected field.

    605CB9A556D542AD90B9BD2244AEF116.png
  4. In the Caching section, select the caching options:

    7B4437F1F49F4353B5038B502045121C.png
  5. Publish the task.

The caching options on a placeholder override the global caching settings in the rendering definition items and the site level cache settings.

Setting the caching options on a placeholder affects all renderings in the placeholder. For example, if you use a container to add additional CSS styling to other renderings, the cache settings on the placeholder for the container applies to all renderings in the container.

To set caching options for a placeholder on a page:

  1. In Experience Editor, click the placeholder, and click Edit the placeholder settings.

  2. In the Select the Placeholder Settings dialog box, click Create New Settings.

  3. Click Edit the placeholdersettings again, and then select the caching options in the Caching section.

    559DC3F98EA946688025F460E3FC8AE7.png

If you set the caching options on a particular rendering, this overrides all other caching settings. This can be very convenient if your website contains pages that are the same for all users except for the user's logged in details, such as the username. If you want to cache all these pages for all the users by setting the caching options on a site level, then the entire page would be cached every time for each user with a different user name. To resolve this issue, SXA lets you apply donut caching that caches only one copy of the entire page for all the users except for a small section that remains dynamic. This section is like a hole in the cached content (much like a donut).

Donut caching is very useful in the scenarios where most of the pages are rarely changed except for a few sections that dynamically change or change based on a request parameter, for example, a snippet on your page that contains renderings that pull blogs from third parties. Because you have no control over third-party websites, and the controller can fail, you do not want the output of this to be cached.

Another scenario could be a placeholder with an embedded placeholder. For example, a splitter that contains the Tabs rendering. Both the Splitter and the Tab rendering have caching applied. You can disable caching for one of the tab items to enable personalization and testing.

To set specific rendering caching options:

  1. In the Experience Editor, click the relevant rendering, click More and click Edit component properties.

    Set rendering caching options in the Experience Editor.
  2. In the Control Properties dialog box, in the Caching section, select the Ignore other caching settings and the Cacheable check boxes, and then select other caching options. Alternatively, to prevent the rendering from being cached, clear the Cacheable check box.