Lazy Loading

The Widget Framework uses Bootstrap-based CSS to enable responsive web sites that adjust page layout to fit the available screen space. A page displayed on a mobile phone (or in a small window on a PC) is formatted differently to the same page displayed full-screen on a PC.

This mechanism provides a good basis for making web sites that perform well on a wide range of devices, but it is not sufficient in all cases. With the Widget Framework's lazy loading feature you can also prevent parts of a web page from loading on certain devices.

You can individually configure the loading behavior of every part of a template (areas, groups and the widgets placed in the template). By default all components are loaded in the normal way but you can specify that certain components should only be loaded if the browser window is a certain size.

The loading behavior is controlled by options displayed in the Content Studio template editor:

graphics/lazy_loading_widget.png
graphics/lazy_loading_group.png

When you select an area, group or widget, the options displayed on the right include the following lazy loading options:

Lazy loading

Select the required value:

Enabled

This page component (area, group or widget) is not loaded if the browser window matches a selected "skip" size.

Disabled (default)

This page component (area, group or widget) is always loaded.

Skip on device

Check the window sizes for which loading is to be skipped.

Large

If checked, and Lazy loading is Enabled, then this component will not be loaded into large browser windows.

Medium

If checked, and Lazy loading is Enabled, then this component will not be loaded into medium browser windows.

Small

If checked, and Lazy loading is Enabled, then this component will not be loaded into small browser windows.

You can determine the meaning of Large, Medium and Small yourself by setting section parameters in the root section of your publication. The parameters (and their default settings) are:

  • wf.clienttype.large=(min-width: 992px)

  • wf.clienttype.small=(max-width: 767px)

  • wf.clienttype.medium=(min-width: 768px) and (max-width: 991px)

Fragment token

An automatically generated ID is written to this field the first time a template is saved. You should not modify this value.

Widget Framework's lazy loading mechanism is SEO-friendly. The fragments that are lazily loaded are indexed by search engines. In order to make them indexable by search engines, Google's Ajax Crawling Scheme is used.

Nested lazy loading is not supported. If you enable lazy loading for a group or area, then the loading rule you specify is applied to that component and everything it contains. You cannot switch off lazy loading for one of its child components, or apply a different loading rule. Any lazy loading changes you make to child components will be ignored.