Anti-flicker influence on Speed Performance

By Azamat K., 27 April 2021

How anti-flicker can distort Pagespeed Insights Score

About our customer: 

TwoTags is an activewear brand based in Perth, Western Australia, founded by Max & Rachel in 2017. TwoTags has grown from humble beginnings in a single bedroom, into one of the fastest growing and more recognised fitness brands in Australia.

Problem:

During the A / B test, a Flicker Effect is possible when one version of the content on the website is shown before the test content. Or vice versa, the test content is shown first, then it is changed to another version.

When multiple versions are displayed, even for a split second, the effect is called Flicker, and it can greatly confuse the test results.

Therefore Anti-flicker is used, to avoid this effect.

In our case, we are considering Anti-flicker in terms of performance. When connecting the Anti-flicker snippet, you need to specify the style below.

<style>.async-hide { opacity: 0 !important} </style>

Then the snippet itself is connected.

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'CONTAINER_ID':true});</script>

The problem is with opacity. Because of this, Pagespeed Insights(PSI) can not accurately evaluate the store, namely, such metrics as First Contentful Paint(FCP) and Speed Index (SI) are distorted. And this has a negative impact on the PSI score.

Below are the results before our optimization:

Pay attention to the timeline. Each frame is white, except the last one. Naturally, we did the optimization, the metrics have improved significantly, except for FCP and SI. And we further understood what could be the reason and came across the Anti-flicker snippet. Most likely, our client forgot to delete this snippet after A / B testing. Our optimization generally improved all the metrics, but by removing the snippet, we managed to achieve significant rendering improvements.

Result after optimizing and deleting the Anti-flicker snippet:

Result:

Also pay attention to the timeline. Due to the fact that opacity: 0 was issued in the first picture, the entire timeline was white. Accordingly, the rendering also suffered greatly. After removing the snippet, the content will be visible immediately, which makes it easier to analyze the page and will give out more real numbers. Thus, we managed to significantly improve the performance and make the store much more comfortable to use.

Let's talk about your project


Contact Us