Press enter to see results or esc to cancel.

How to minimize layout shift

A layout shift occurs when a visible element on your page changes position or size, affecting the position of content around it. Sometimes the shift is intended, such as when a container expands as a result of a user action. However, the dynamic nature of ads in combination with client-side functions can lead to unexpected layout shifts, which have a negative effect on the user experience and can cause serious usability problems.

The Cumulative Layout Shift (CLS) metric helps you address this problem by measuring how often it’s occurring for real users. CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

Unexpected movement of page content usually happens because ad blocks are loaded asynchronously or DOM elements get dynamically added to the page above or between the existing content. The culprit might be an ad with unknown dimensions (created by responsive code) or a client-side function that inserts ad code after the page is loaded.

To prevent layout shift when the block is loaded, you need to define block height. This will reserve the space for the ad block so the layout will not shift when the ad will be loaded. You can define block height on the block Display settings (button Misc / tab Display) or directly with custom CSS code. The example below sets block height to 250px:

ad inserter display height

and adds height: 250px; code to the CSS code of the wrapping div. When Default alignment is used the following CSS code will be used:

margin: 8px 0; clear: both; height: 250px;

Client-side device detection

When using client-side device detection CSS media queries and viewport widths are used to determine if the block will be visible or not. However, when using the Insert method, the block is not inserted until the page is loaded and the Javascript code for the client-side functions runs. When you define block height the space for the block will be reserved and empty (blank) space will be shown for wanted (enabled) devices until the ad is loaded and consequently no layout shift will occur. For unwanted (disabled) devices nothing will be shown or inserted.

VIEWPORT separators

Ad Inserter allows to separate different ad codes for different devices using a single block. For example:

[ADINSERTER VIEWPORT="Desktop"]
Desktop ad code

[ADINSERTER VIEWPORT="Phone"]
Phone ad code

In terms of layout shift this approach slightly differs in how the block space is reserved. With this approach each VIEWPORT device option generates a block with a wrapping div. When you define a block height, it will be applied to all device options (each having a wrapping div). Consequently, for a unwanted (disabled) device this will cause a blank space to be displayed, however, there will be no layout shift for any device.

Insertion before/after HTML element

If you are using client-side insertion before/inside/after HTML element there will always be layout shift as the insertion is done after the page is loaded. To prevent layout shift use server-side insertion and define ad height as described above.