Page flicker is a visible glitch that occurs when a web page loads or updates content, causing it to flash or change content rapidly. This issue is common in personalization or A/B testing scenarios, where a web page’s original content is displayed momentarily before being replaced with personalized or variant versions of content.
The FlickerDefenseConfig interface helps prevent page flicker caused by rendering personalized content returned by Personalization on web pages.
The FlickerDefenseConfig interface defines the configuration settings for Flicker Defender.
1export interface FlickerDefenseConfig {
2 redisplayTimeoutMilliseconds: number
3 renderPersonalizationAfterTimeoutElapsed: boolean
4}
5
6export const DEFAULT_FLICKER_DEFENSE_CONFIG = {
7 redisplayTimeoutMilliseconds: 2000,
8 renderPersonalizationAfterTimeoutElapsed: false
9}
10satisfies FlickerDefenseConfigThe FlickerDefenseConfig interface includes the properties in this table.
| Property | Description | Type | Default Value |
|---|---|---|---|
redisplayTimeoutMilliseconds | The time (in milliseconds) to wait before redisplaying hidden elements on the page | Number | 2000 |
renderPersonalizationAfterTimeoutElapsed | Determines whether to proceed with or block the rendering of personalized content after the timeout has lapsed | Boolean | false |
You can customize Flicker Defense by specifying your own values for redisplayTimeoutMilliseconds and renderPersonalizationAfterTimeoutElapsed, as shown in this example.
1export interface FlickerDefenseConfig {
2 redisplayTimeoutMilliseconds: 3000
3 renderPersonalizationAfterTimeoutElapsed: true
4}The default values provided in the Flicker Defense configuration is sufficient for most use cases. Modify these values only if necessary.
Note
j