RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations
  • Optimizely Classic

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

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

Optimizely normally serves experiments on your site without any visual hiccups. 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 guides to QA can help you identify issues with your experiment before you launch it. Here are resources for Optimizely X and Optimizely Classic.

1. Check your snippet size and location

The snippet is a line of code that you implement on your site to run Optimizely. It contains information about your experiments and 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's 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's 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.

Next, consider reducing the size of your snippet to decrease page load times. The snippet size for an empty project is ~60KB. To check your snippet size, navigate to Settings > Implementation.

  1. Exclude draft and paused experiments: in Optimizely Classic, draft and paused experiments are saved in the snippet by default. If your project has a lot of them, changing this setting can significantly reduce the size of your snippet. The Optimizely X snippet only includes live experiments by default.

     
    Important:

    In Optimizely Classic, you won't 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 or events to reduce your snippet size. You'll need to unarchive them if you want to use them again later.

  3. Don't include jQuery in project code:  By default, Optimizely Classic includes a trimmed version of jQuery in the snippet. If your site already loads jQuery, remove this from the snippet to reduce its size. If your site doesn't load jQuery, however, this option won't work. Optimizely X doesn't include jQuery by default.

  4. Switch to the standalone snippet: If you're using both Optimizely Classic and Optimizely X, the bundled mode adds ~50kB to your snippet size. Consider switching fully to Optimizely X.

     
    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.

  5. 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 won't begin to execute until that element loads. So, know what each change is; don't change the footer first, then the header. 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. Streamline style changes in your variation code. Variation code runs line by line and waits for an element to appear on the page in order to execute. Variation-level CSS runs immediately when it's set to synchronous timing.

    Here's how to move variation code to CSS for an individual variation in Optimizely X.

    In Optimizely Classic, look for duplicate changes you can streamline. 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 will be 22 px, so remove the top four lines of code. Duplicate changes like this are automatically streamlined in Optimizely X.

    If you have many visual changes in your variation code, consider moving them to Experiment CSS.

3. Check for timing issues

If your changes look right in the Editor but you don't see them in Preview mode, you may have a timing issue. Here's how to check for timing issues.

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, that hides the body of the page, before your existing variation code. Then insert another line of jQuery after your existing variation code to reveal the body again. 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.

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 seeing this issue? Reach out to the Optiverse community, and we can help troubleshoot further!