Content Flashing / Flicker

Updated:

Javascript-based personalization products all tend to have some flash of content. Some applications offer a variety of ways to minimize the flicker but in reality this flash happens because of a conscious choice: The choice to dynamically modify content based on an external factor (such as a third-party data feed) while not making that external factor a blocking script that prevents your site from loading at all in the rare event that it is delayed or unavailable. In the safe async world, you can't expect 0 flicker. By definition, you're sacrificing a little flashing of content for the safety of your content.

Why are so many companies ok with it?

Many companies are ok with flicker because when they end up analyzing the positive impact of personalization through their analytics platform before scrutinizing the site performance they see a lot of value such as higher engagement and click through rates. It's normal to have scrutiny on site performance, nearly every company does but every company has to make a choice between performance and marketing/sales results. If the business sees value in personalization and can measure it or even attribute real impact then they will also make the case to sacrifice performance a bit.

What is flicker and what causes it?

Flicker is when content loads and then flashes to something else. To really understand the cause of flicker, you have to understand the HTML elements and how they interact with Javascript.

Demandbase is an ASYNC call - this means if the service is down for some odd reason, your content continues to load as pictured in the blue graph below. Otherwise if you loaded Demandbase Synchronously, as picture in the red line, there is a chance that your content will get blocked from loading. Also by definition, the more the content that is "to-be-changed" physically renders on the page, the more it will flash because there is more of it rendered.

In the Async world, while the data is being fetched, the banner is loading various images, text and buttons are also loading. By definition the content MUST load prior to changing it, you can't change something that doesn't exist.

In the synchronous world, the data is fetched prior to creating any elements. This dramatically reduces flicker from happening but it increases the risks of site performance for those rare occasions the service is delayed or not ready.

 

 

 

 

How to reduce flicker?

In the safe async world, you can't expect 0 flicker. By definition, you're sacrificing a little flashing of content for the safety of your content.

  1. Make sure the Tag is deployed as high as possible on the page to grab the data quicker
  2. You can add extra logic to hide the elements being modified with CSS and show them AFTER they have been modified. CSS hiding immediately hides elements before they get fully rendered vs using Javascript which relies on elements loading before accessing them.
  3. Don't switch giant images that are heavy on the browser, it makes it super obvious

 

 

 

Was this article helpful?
0 out of 0 found this helpful