FlexView API - Early Loading

When FlexView is the main visible component: Speed up the rendering of the FlexView API

The content rendered by the FlexView API is often the main content of the integrating html page. Users perceive the time until the FlexView API is finally rendered as the critical part.

As many html pages load a lot of script libraries, style sheets, ads and large media files (images/video) the performance of the initial rendering of the FlexView API on page load may become very unsatisfying when the many resources are loaded in a suboptimal order.

This tips help to speed up the rendering of the FlexView API:

  • load CSS early
  • load all JavaScript that is not needed for page rendering (e.g. website analytics) as late as possible
  • load images lazily (at least those visible only after user interaction)
  • load the Outdooractive JavaScript API as soon as possible (recommendation: early in html head)

Here is an example with some JavaScript libraries and hidden images that slow down the rendering of the FlexView API:

The same page that prioritizes the loading of the FlexView API to speed up its rendering:

The FlexView API loads JavaScript code, CSS styles and your content asynchronously and fast. The loading process is prioritized by what the users sees after page load. But the individual implementation of your website decides how much content is loaded before it’s FlexView API’s turn.

When Flexview is NOT the main visible component

On the other hand, when the FlexView API is NOT the main visible component right after page load (e.g. when a user interaction is required to display the FlexView), then it may well be preferable to switch to an async implementation:

Jens Schwarz