Typically when recommendations appear “late” by causing flickering is because Nosto starts loading the recommendations late during the page load. Normally Nosto starts loading recommendations once the DOMContentLoaded event happens. Nosto waits for the event and once it takes place, Nosto’s script reads the DOM to see what Nosto recommendations are on the page and then sends a request to Nosto to load the recommendations.
On most websites, the DOMContentLoaded event happens early enough to load the recommendations in time so that they seem to be a part of page’s native elements. On sites where the DOMContentLoaded event happens relatively late, recommendations might take longer to load as Nosto itself is unable to load the recommendations, occasionally causing annoying reflows of the website’s UI where the recommendations move the other page content down.
In such an event here are some things you can try to improve site’s UX and also Nosto’s load times.
1. Review your web-page and look for synchronous scripts. A typical case is that you might have many different script tags on your page which are all loaded synchronously. All these scripts need to load one after another before DOMContentLoaded event can happen and if any of scripts load slowly, or there simply are many of them, the event will happen late. Optimise this by reducing the number of scripts or change some of them to execute asynchronously, which will make your page load times overall a lot faster and will simultaneously make Nosto load times faster too.
2. Initiate Nosto earlier. If you can’t change your site, another thing you can do is to tell Nosto that it’s safe to start earlier. This is done by adding a direct call for Nosto into your HTML. Here’s how to do it:
Make sure the Nosto embed script is at the beginning of the page (start of body element or within the head element)
Find the last Nosto element div on the site
Under the last Nosto element div, insert the following script block to invoke Nosto earlier
<script>nostojs(function(api){ api.loadRecommendations(); });</script>3. Reserve container with CSS. If you still have visible reflows in the UI, another trick you could try is to modify your site’s CSS so that it reserves the space for the recommendation element by default preventing at least annoying flickering. This can be done by inspecting the size of the Nosto element div once the page is loaded and then adding a CSS rule with the div’s id which sets the slot to a predefined size. If you have a responsive site, make sure you set the size right for mobile rules too!
4. If you are still having trouble with loading recommendations on time, please be in touch with our support.
Worried about Nosto slowing down your site, read more about Nosto’s behaviour here.