Code snippets

How to Reveal an A/B Test Page After a Safety Timeout

★★★ Technical level 3 of 3

Written by Neil Webley · Last updated 31 August 2026

Add an independent A/B test reveal timeout so hidden content always returns after failed, slow or missing experiment code.

Why reveal an A/B test after a timeout?

Page hiding reduces flicker, but it introduces a worse possible failure: invisible content. A network request can fail, a selector can change, an exception can interrupt the variant, or a consent decision can prevent testing from starting. A safety timeout guarantees that the website becomes usable without depending on the code that failed.

The normal reveal should still happen as soon as the visible transformation is ready. The timeout exists only for exceptional paths.

How long should an anti-flicker timeout be?

There is no universal value. The deadline should be short enough to protect visitors and long enough for the normal experiment path on realistic devices. Start with evidence from performance testing rather than a round number copied from another site.

• Prefer hundreds of milliseconds for small, early transformations.
• Use a narrowly hidden component if it genuinely needs longer.
• A multi-second whole-page blank screen is rarely acceptable.
• Test slow mobile CPU and network conditions, not only a desktop development machine.

If the timeout regularly wins the race, fix tag delivery or transformation code. Increasing the timeout hides the symptom while worsening the visitor experience.

Independent reveal-timeout examples

Remove a named stylesheet after a delay

cro_tests.addCSS(
  'freeCROCSS_--testID--',
  '.homepage-hero { visibility: hidden !important; }'
);

// Safety fallback: seconds.
cro_tests.removeCSSAfterSeconds(
  'freeCROCSS_--testID--',
  1.5
);

removeCSSAfterSeconds measures the delay in seconds. By contrast, the duration accepted by hideElements is milliseconds. Keeping the units explicit in nearby comments prevents subtle configuration errors.

Normal reveal plus fallback

var hideId = 'freeCROCSS_--testID--';

cro_tests.addCSS(hideId, '.hero { visibility:hidden !important; }');
cro_tests.removeCSSAfterSeconds(hideId, 1.5);

cro_tests.waitForElement('.hero__title', 1200)
  .then(function (title) {
    if (title) {
      title.textContent = 'A clearer headline';
    }
    cro_tests.removeCSS(hideId);
  });

Calling removeCSS twice is safe because it does nothing when the style no longer exists. This lets the normal path and timeout remain independent.

Use Reveal After Seconds in FreeCROTool

The hand-coded test editor includes a Reveal After Seconds snippet:

window.cro_tests.removeCSSAfterSeconds(
  'freeCROCSS_--testID--',
  5
);

Five seconds is the editable sample value, not a recommendation for every test. Change it to a duration justified by the scope of hiding and measured load behaviour. Pair it with Reveal Page on the successful path. The case-sensitive --testID-- placeholder is replaced during publishing.

Project-wide initial hide CSS also has a configured hide timeout. Review that setting when many tests appear to reveal late; do not stack several unrelated hiding systems without understanding which one owns each style ID.

Test the failure path deliberately

• Block the published test script in developer tools.
• Use a selector that cannot match.
• Throw a temporary error before the normal reveal.
• Reject analytics or experimentation consent.
• Throttle CPU and network speed.
• Confirm navigation and consent controls remain usable while content is hidden.
• Confirm only the experiment style is removed.

Continue with revealing immediately after successful changes and the broader guide to preventing flicker without risking a blank page.