Move variation code to CSS

  • Updated

Relevant products:

  • Optimizely Web Experimentation
  • Optimizely Performance Edge

This topic describes how to:

Fix flashing or flickering variation content on your website, and streamline visual changes so they run immediately.

The Optimizely Web Experimentation and Optimizely Performance Edge Editor usually serves experiments and campaigns without any visual hiccups, but you may occasionally encounter an issue with flashing or flickering content: when the original page appears briefly before your variation.

Optimizely Web Experimentation and Optimizely Performance Edge's variation code waits for an element to be available to make a visual change. The code runs from top to bottom, and blocks changes to the elements below it as it waits. If you have a large number of visual changes in your variation code, you may see flashing.

One way to streamline your visual changes and reduce flashing is to move the visual changes to CSS.

The CSS in the Variation Code Editor runs immediately when you set it to synchronous timing. It applies only to the variation you are editing.

  1. Go to the experiment or campaign, select a variation, and click Variation Code Editor
  2. Click CSS to write CSS for this variation.