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.
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, test content variations, and target different audiences, right? So what do you do?
How do you Avoid Flicker?
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.