- Troubleshoot "page flashing" or "flickering" (the original page appears briefly before loading the variation)
- Troubleshoot slow page loading caused by an Optimizely experiment
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
Preview mode uses a different snippet than the one used in production, and the preview snippet tends to be slower than the production one. If you notice flashing in preview mode, make sure the problem also affects the production snippet before proceeding further, ideally by starting the experiment with a QA audience and testing in a fresh incognito tab.
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.
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.
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.
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.
Streamline style changes in your variation code. 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.
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.