Introduction
If you follow our snippet installation articles and snippet placement best practices (below), your web page should load Optimize before other resources that are required to display the page. When your page loads Optimize first, you won't see flicker and you shouldn't install the anti-flicker snippet.
Page flicker occurs when a web page briefly appears with the browser's default styles before loading an external CSS stylesheet which re-renders it causing the restyled elements to momentarily 'jump' on the page.
The most effective way to mitigate page flicker when loading Optimize is to temporarily hide the page while the Optimize container loads. This is accomplished by adding the anti-flicker snippet as the first script on your page(s).
If you notice page flicker, confirm that you've followed all of the steps in our snippet installation articles (and best practices) before doing any other troubleshooting.
Specifically, ensure that the Optimize snippet is installed as high as possible in the<HEAD> of your website's HTML. Putting the snippet at the top of the <HEAD> addresses most flicker issues.Audience
This article is intended for customers that have observed page flicker on their Optimize experience pages.
Do not install the anti-flicker snippet:
- ...if your Optimize snippet isn't at the top of the
<HEAD>. - ...if you haven't observed page flicker.
- ...if you use activation events that don't fire changes on the first load.
- ...with a tag management system (TMS) like Google Tag Manager (GTM).
AFS with a TMS?
Mitigate page flicker
If you notice page flicker – despite following the steps above – the most effective way to mitigate it when loading Optimize is to temporarily hide the page while the Optimize container loads. This is accomplished by adding the anti-flicker snippet as the first script on your page(s).
How it works
Optimize displays variants to your website visitors by modifying the DOM (Document Object Model). In some instances, changes are made to elements that are already visible to the end user. These visible changes are referred to as page flicker.
Page flicker occurs when a web page briefly appears with the browser's default styles before loading an external CSS stylesheet which re-renders it causing the restyled elements to momentarily 'jump' on the page.
Deploy the anti-flicker snippet
To install the anti-flicker snippet:
- Copy the full code below and add it to every page with Optimize as early in the
<HEAD>as possible, but after any dataLayer declaration, if used. - Ensure that your Optimize snippet or Tag Manager container immediately follows the anti-flicker snippet.
Example: anti-flicker snippet
<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<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>
Note: Replace CONTAINER_ID with your Optimize container ID. If you're using Google Tag Manager to deploy Optimize, replace CONTAINER_ID with your Tag Manager container ID.
Snippet placement best practices
For optimal performance, place the Optimize snippet at the top of the <HEAD> tag on every web page you wish to optimize.
The only items that should appear above the Optimize snippet are:
- Any dataLayer initialization code. Note: the dataLayer variable should never be reassigned after the anti-flicker snippet (when used).
- Any scripts that declare JavaScript variables, functions, or set cookies you use in Optimize, like jQuery or JavaScript libraries used in implementation or targeting. Note: jQuery isn't installed by Optimize by default.
- The optional anti-flicker snippet, when used to mitigate page flicker.
If you use a content security policy, see Optimize security requirements to make sure your content security policy allows for the domain in the snippet on your site (i.e., google-analytics.com or googleoptimize.com).
Customize the anti-flicker snippet
The anti-flicker snippet includes a settable timeout functionality that stops trying to apply the experiment changes if too much time has passed. When the timeout expires, the page will unhide, the user won't see the new experience, and they'll just see the default content instead.
Learn more about customizing the anti-flicker snippet.
Tag Manager users
Note: If you’re using Google Tag Manager to deploy Optimize, populate the anti-flicker snippet with your Tag Manager container ID, not your Optimize container ID.
Adding the Optimize tag to your Tag Manager container will prevent page flicker until Optimize loads, but your page will not be affected if you later disable that tag.
Learn more about how to Install Optimize with Google Tag Manager.
Name check
Page flicker is also known as JavaScript flicker, DOM flicker, Flash of Unstyled Content (FOUC), and Flash of Unstyled Text (FOUT). The page-hiding snippet was previously known as the anti-flicker snippet.