This article will help you:
  • Troubleshoot "page flashing" or "flickering" (when your original page appears briefly before loading the variation)
  • Troubleshoot slow page loading caused by an Optimizely experiment

We understand that even small increases in page load times must be taken seriously, so we do everything we can to make sure that Optimizely's impact on your page is as small as possible.

Optimizely will normally serve experiments on your site without any visual hiccups or noticeable increases in page load times. That said, you may occasionally encounter the following issues:

  • Your original page "flashes" or “flickers” (in other words, appears briefly) before loading your variation content
  • The page is loading slowly because of an Optimizely experiment

If so, this article will help you get to the root cause. Usually, these issues are related to the snippet or variation code execution timing. We’ll walk you through what that means and how to troubleshoot it.

 
Tip:

If you are experiencing flashing on your live site, pause the experiment immediately before following this troubleshooting guide. For future reference, our Knowledge Base article on QAing your experiment before launch demonstrates the different ways you can preview your experiment before starting it.

1. Check your snippet size and location

The snippet is the line of code that you implement on your site in order to run Optimizely. It contains information about your experiments along with various account settings.

The snippet contains the Optimizely JavaScript file, which is downloaded by your visitors' browsers at the very beginning of the page load process. It is entirely static and will be cached in your visitors' browsers after the first request. It's also hosted on Akamai and Edgecast, our global CDN providers, so there is no load-time dependency on Optimizely's servers.

The Optimizely JavaScript file download occurs in parallel alongside other JavaScript and CSS files on your site and should take roughly 80-100ms to complete in North America.

There are two ways to modify the snippet:

  1. Reduce the size: You can reduce the size of your snippet and decrease page load times by altering the snippet settings. The snippet size for an empty project is around 50KB. To see the current size of your snippet, visit the Settings > Implementation tab of the Home Page.



    If it’s less than 60KB, jump to the next step (Relocation). If it’s larger, take the following steps:
    1. Exclude draft and paused experiments: By default, draft and paused experiments are saved in the snippet. If your project has a lot of them, changing this setting can significantly reduce the size of your snippet.
       
       
      Important:

      You will not be able to use the force parameter on draft and paused experiments once you enable this setting.

    2. Archive: Archive unused experiments, audiences, and goals to reduce the size of the snippet. These components can’t be used after archiving them, so unarchive them if you need to use them later.
    3. Do not include jQuery in project code: By default, Optimizely includes a trimmed version of jQuery in the snippet. If your site already loads jQuery, you can further reduce snippet size by selecting Do not include jQuery in project code. If your site does not load jQuery, however, this option will not work.
       
       
      Note:

      jQuery must be defined above the Optimizely snippet on the page in order for Optimizely to function.

      We recommend not having the ":active" selector on your site, as it may cause slower performance on tablets and mobile devices. This is because the CSS conflicts with elements that have a touch event listener, which is used in Optimizely's snippet for goal tracking. The ":active" pseudo-selector is actually part of an older CSS framework that is known to have slow performance. This same pseudo selector was removed in newer versions of jQuery UI (most recently 1.9.0) due to slow performance.

  2. Move the snippet higher. Moving the snippet closer to the opening <head> tag of your page will allow Optimizely to complete changes sooner. If possible, it should be the first <script> tag after the opening <head> tag of your page.

If modifying the snippet didn’t fix your issue, move to the next section on variation changes.

2. Start variation changes earlier

Once the snippet is loaded, ensure that Optimizely executes changes to your page as early as possible. The earlier the changes begin, the sooner they can be completed.

  1. Match the order of your variation code and your site code. If the first line of variation code modifies an element at the bottom of the page, the code will not begin to execute until that element loads. To make changes as quickly as possible, reorder your variation code such that the elements highest in the HTML structure are changed first, and elements lowest in the HTML structure are changed last.
  2. Check for “pure” JavaScript (instead of jQuery) or block-style comments (instead of in-line comments) in your variation code. If you include these, Optimizely will wait until DOM ready (in other words, when your page is already loaded) to evaluate all variation code. You’ll need to force pure JavaScript and use line-style comments in order to prevent unnecessary delays.
  3. Remove duplicative style changes, or move style changes to Experiment CSS. If the page flashes without the right styling changes (fonts, colors, borders) there could be a large number of CSS changes in your variation code. If not, skip to the “Alternative Options” section below.

    When you use the Edit Style tool in the Visual Editor, Optimizely generates a line of code for each change you make.



    For example, changing the font size of a .text element five times will result in five lines of code:
     
    
    1 $(".text").css({"font-size":"16px"});
    2 $(".text").css({"font-size":"28px"});
    3 $(".text").css({"font-size":"18px"});
    4 $(".text").css({"font-size":"24px"});
    5 $(".text").css({"font-size":"22px"});
    
     

    Ultimately, the font size of the element will be 22px. To quicken page load time, you can safely remove the first four unnecessary lines. Style changes generated this way are also time delayed by their position in the variation code. If your experiment still has lots of style changes in the variation code after removing duplicates, you can load the changes more quickly by moving them into Experiment CSS instead.

3. Check for timing issues

Our Knowledge Base article on Troubleshooting: Variation content doesn't appear contains a section "check for timing issues" that describes how you can check whether timing issues are causing issues with your page loading slowly or flashing. Please have a look at that section when checking for timing issues, and come back to this article if that doesn’t solve your issue.

4. Check for other issues

If you’ve checked your snippet and variation code, and they’re not the source of the problem, then try these other solutions. The first requires custom code from a technical resource, and the second is a trade-off between page load speed and flashing.

We recommend using these issues only as a “last resort” if the other solutions haven’t worked.

  1. Hide the Body of the page until Optimizely is finished running. For persistent flashing issues, you may want to hide the body of the page until the variation code has completed. With the help of a technical resource, insert a line of jQuery before your existing variation code that hides the body of the page. Then insert another line of jQuery after your existing variation code to reveal the body. This option will not decrease page load time but it will eliminate flashing.
  2. Load Optimizely asynchronously. For persistent page loading issues, the Optimizely snippet can be implemented asynchronously instead of synchronously. Asynchronous loading eliminates any delay in page load times but greatly increases the chances of flashing. Our Knowledge Base article on synchronous and asynchronous snippet loading elaborates on asynchronous snippet implementation, as well as the strengths and drawbacks of both load types.
 
Tip:

Still seeing page flashing or slow load times? The Optimizely snippet is distributed by our global CDN partners, and balanced between them to offer the best performance possible for your visitors.

Persistently long (over 1000ms) page load times are often due to circumstances beyond the scope of Optimizely. In these cases, dramatic improvements can be realized after working with your local ISP (Internet Service Provider) to optimize your DNS (Domain Name System) performance.

Still can’t fix the problem? Reach out to the Optiverse community, and we can help troubleshoot further!