Delayed loading using load=”async and load=”sequence”

Custom Layout views enable the display of content using a set of widgets.  The custom <element> tag enables TACTIC views to reference other widgets.  A complex page can be broken down into smaller reusable components.

<div>

 <element view=”content.view1” mode=”XYZ”/>

</div>

<div>

 <element view=”content.view2” mode=”XYZ”/>

</div>

Here, a master view can reference two smaller views, each passing in the kwarg “mode” with the value “XYZ” to the referenced view.  When a call is made to draw the overall view, TACTIC will build the entire view with all the reference view on the server and then serve up the entire content to the client.  If “content.view1” or “content.view2” are either large or take up a lot of processing time, the user experience is compromised as they will have to wait for the entire view to be processed before seeing anything on the screen.

To improve the user experience, it is possible to delay the processing of a referenced view.  So for example:

<div>

 <element view=”content.view1” mode=”XYZ”/>

</div>

<div>

 <element view=”content.view2” mode=”XYZ” load=”async”/>

</div>

<div>

 <element view=”content.view3” mode=”XYZ” load=”async”/>

</div>

The server will only process “content.view1” and send that to the client.  Only fter the main view and “content.view” have be been drawn, will the client make asynchronous requests for both “content.view2” and “content.view3” simultaneously.

This has two advantages:

1. The user experience is improved because content will show up much more quickly as the server only has to process “content.view1”.  The views “content.view2” and “content.view3” are processed after “content.view1” is visible.
2. The view in its entirety will load much more quickly because “content.view2” and “content.view3” will both be processed simultaneously by the server on two separate processes, making use of load balancing on the server

However, making a lot of heavy simultaneous requests all at once on the server could stress the server.  While desirable to process and receive the content as quickly as possible, it is not always necessary when the content is “below the fold” and falls below the cut-off at the bottom of the page, This problem can be solved with “sequence” loading.

<div>

 <element view=”content.view1” mode=”XYZ”/>

</div>

<div>

 <element view=”content.view2” mode=”XYZ” load=”sequence”/>

</div>

<div>

 <element view=”content.view3” mode=”XYZ” load=”sequence”/>

</div>

This will initially load only “content.view1” with the main view.  Once these are loaded, TACTIC will send a request for “content.view2” and once that is loaded, it will send another request for “content.view3” in sequence.  These views end up being loaded over time in sequence without the user really being aware that the content is missing until they scroll down.

Having control of how and when a page loads content improves the user experience.  Content immediately needed is loaded first and other content can be delayed.  Mixing and matching async loading and sequence loading provides a flexible means of loading heavy content views.