As Captivate is mainly for creating eLearning type of things, the majority of the Captivate project contains heavy assets like Video, Audio, animation and what not. Also, due to, HTML5 has become the de facto standard for delivering any project output, chances are there that our project may perform slower. And the SAD part is that, developer rarely notice that till he finishes the project (as he is Testing on the same machine where Captivate output is.) In that situation, there are three TAGS of HTML5, which can help us to improve project performance.

They are:

1. Preload
2. Prefetch
3. Prerender

By Name itself, all TAGS are self-explanatory and goal of all three TAGS is indirectly same. Is to improve performance of project (HTML 5 pages). The difference is in their approach. One TAG may be useful in one scenario while other Tag may be better for some other scenario. Let us see these three Tags in more detail.

preload:

Using <link rel=”preload”>, browsers can be informed to prefetch resources without having to execute them, allowing fine-grained control over when and how resources are loaded.

Different content types that can be preloaded are as follows:

• audio: Audio file.
• document: An HTML document intended to be embedded inside a <iframe>.
• embed: A resource to be embedded inside an <embed>
• fetch: Resource to be accessed by a fetch or XHR request, such as JSON file.
• font: Font file.
• image: Image file.
• object: A resource to be embedded inside an <embed>
• script: JavaScript file.
• style: Stylesheet.
• worker: A JavaScript web worker or shared worker.
• video: Video file.

 Example:
<link rel=”preload” href=”ckshah_intro.mp4″ as=”video” type=”video/mp4″>

Browser Support:

• Chrome, safari,Opera etc support ‘PreLoad’.
• MS Edge : Partial support (In Development)
• Firefox : Disabled by default behind the network.preload flag.

Prefetch:

Prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be needed later, and store them in the browser’s cache. Once a page has finished loading it begins downloading additional resources and if a user then clicks on a prefetched link, it will load the content instantly.

Example:
<link rel=”prefetch” href= “/images/pic.png”>

Browser Support:
Majority of Browser supports ‘prefetch’.

Both prefetch and `preload` declare a resource and its fetch properties, but differ in how and when the resource is fetched by the user agent: prefetch is an optional and often low-priority fetch for a resource that might be used by a subsequent navigation; `preload` is a mandatory fetch for a resource that is necessary for the current navigation. Developers should use each one accordingly to minimize resource contention and optimize load performance.

Prerender:

‘prerender’  can be used by the application to indicate the next likely HTML navigation target: the user agent will fetch and process the specified resource as an HTML response. <link rel=”prerender” href=”(url)”>

Example:
<link rel=”prerender” href=”//example.com/next-page.html”>

Browser Support:
prerender is mainly supported by chrome & IE, and not supported by Firefox, Microsoft edge etc.

Although Captivate does not directly entertain all such modifications, we have 2 points to add these stuff in our Captivate project.

• In index.html of our project output.
• Inserting Web object on appropriate slide.

Note:

• Remember that every time we publish a project, the index.html file get overwritten (get created fresh). So whatever changes we made externally will get wiped off. So we must add all such modifications at the end.
• Although all browsers supports HTML5, all above three Tags are not always supported by all browsers (particularly with reference to mobile browsers…) So before bating on these Tags in a particular project, it is advisable to check project on major browsers.
• You may get frustrated that even after doing all above points perfectly, why the project is slow? The reason may be that there are many ‘Buts and if’ condition which is beyond the scope of this article to discuss. So be cool even if you are not getting desired results.
• IF you are even an intermediate Captivate developer (forget about fresher), but have only little knowledge of HTML 5, better not to do this as it may create problems in your project.

For Further reading…

• more on preload : https://w3c.github.io/preload/
• more on prefetch: https://www.w3.org/TR/resource-hints/#dfn-prefetch
• more on prerender: https://www.w3.org/TR/resource-hints/#prerender
• https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf