RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations
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

Note that our Preview mode is using different snippet than the one used in the production on the live site and the preview snippet tends to be slower than the production one. If you notice flashing in the Preview mode, we recommend verifying the problem affects also the production snippet before proceeding further with your troubleshooting - ideally by starting the experiment with a QA audience and testing in a fresh incognito tab.

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. Below, we walk you through what that means and how to troubleshoot it. We also recommend following best practices for optimal site performance with Optimizely.

 
Tip:

If you're experiencing flashing on your live site, pause the experiment immediately before following this troubleshooting guide.

For future reference, our QA guide for Optimizely X helps you identify issues with your experiment before you launch it.

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.

  • 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.

  • You can 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.

Each experiment is limited to a maximum of 1,048,572 bytes.

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

  1. 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.

  • Try moving the snippet closer to the opening <head> tag of your page, to allow Optimizely to complete changes sooner. If possible, the snippet 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.

Start variation changes earlier

After 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.

  • 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.

  • 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.

  • Streamline style changes in your variation code. In both Optimizely X and Optimizely Classic, variation code runs line by line and waits for an element to appear on the page 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.

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

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 in Optimizely X.

Check for other issues

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

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

  • 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.

  • 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 internet service provider (ISP) to optimize your domain name system (DNS) performance.

Still seeing this issue? Reach out to the Optiverse community, and we can help troubleshoot further.