Your Guide to Website Flicker and How to Deal With It

March 5, 2019

Share

Do a quick search of the term “website flicker.” You’ll see a lot of results with titles like: “Why Do I Notice Page Flicker When the Test Page is Loading;” “Troubleshooting: Page loads slowly, flashes, or flickers;” and many more. Most of these come from web optimization tools, browsers, and CRO websites. Even top ecommerce sites aren’t immune — just check out Blue Triangle or Pingdom’s performance reports. Regardless, flicker is a persistent problem for those looking to optimize their websites, but it really doesn’t have to be. Flicker undermines your optimization efforts and hurts your user experience, but it is completely avoidable. Again, you can totally avoid flicker. So, what is it, how does it happen, why is it so bad, and how do you avoid it?

What is Flicker and How Does it Happen?

Flicker refers to the experience of a webpage loading once, and then quickly changing content to display something new.

It happens when you use JavaScript tags to modify content on your sites. With most A/B testing and optimization tools, this is the only way they are able to make changes — hence the bevvy of articles troubleshooting the inevitable flicker you’ll get using their tools.

Here’s how it works. For these tools to change content they insert JavaScript that gets read on rendering to display a new piece of content. However, because of the number of JavaScript tags you may need on your page, those content-changing tags might not be read first. There are ways to reduce your risk of flicker, such as waiting for the new content before rendering the page (synchronous call), but you’ll always have to choose between slow page load time and flicker. So, when a visitor types in your url and the page begins to load, your browser needs to go through all of that JavaScript. That means that before you get to the desired content, the browser may show older content before your newer content.

Why is Flicker So Bad?

Two words: User Experience. With flicker, it’s pretty bad. Not only is it jarring and generally a poor experience to see a flashing webpage, but your site visitors may also see different versions of sales, promotions, or announcements, which is just confusing. It can undermine the credibility of your site, and give the impression of flakiness or instability. But let’s get to the stats.

It takes about 50 milliseconds for web visitors to form their opinion about your website based on a visual impression. Most visitors (~88%) won’t return to a site if they’ve had one bad experience. If your images don’t load or take too long to load, 39% of people will stop engaging with your website.

To whittle it down, flicker stinks and ruins the experience for your visitors, poisons your data, plus costs you a lot of money. The longer the right content takes to load, the more money you’re leaving on the table. And, if you’re making decisions based on bad data, you’re making bad decisions. But, you want to optimize, A/B test content variations, and target different audiences, right? So what do you do?

How do you Avoid Flicker?

There is good news and bad news here. The bad news is that if you use content-changing JavaScript tags you are going to see flicker or have slow page load times. The good news is that you do not need to use content-swapping JavaScript to do web optimization.

Flicker happens when content changes happen on render. To avoid flicker, you need to make those content changes before the experience reaches the browser.  With SiteSpect, those content modifications happen on the request, meaning that when you get to render there is only one version to load. There’s no confusion, no extra tags, and no way for any errant content to load. Instead SiteSpect sits in the flow of traffic so it can modify your content on the way to the browser.

For more detail about how SiteSpect works, check out How SiteSpect Works.

To learn more about SiteSpect, visit our website.

Share

Justin Bougher was the VP of Product at SiteSpect.

Suggested Posts

Dragon preparing to fight army of the dead

The Battle of Winterfell: A study in optimization (spoilers)

blog-06152015.jpg

3 Benefits of Cross-Silo Collaboration in A/B Testing

enhanced-analytics-featured-image9

Introducing SiteSpect Enhanced Analytics

Subscribe to our blog: