So called “Layout shifts” are, in short, height changes to a website, after the user is interacting with the site.
This might lead to content changing positions while the user reads it or interactive elements vanishing shortly before the user wanted to interact with them.
Height changes to the content are often introduced by loading large-dimensioned parts of the website asynchronously, for example advertisements.
While loading ads asynchronously helps tremendously with the performance of the website, it introduces many forms of “layout shifts”
Ad Slots inside the pages can support multiple, different formats, each with a unique height.
When loading those Ad Slots, information about the delivered formats and their height are only available after ads are already rendered to the page (causing the shift).Ad Slots can be reloaded during longer sessions. Removing old ads and inserting new ads might lead to a different heights being reserved by the Ad Slot.
Ad Slots might not deliver an ad on each Page Impressions, because campaigns and advertisements might not be available.
Nevertheless the Ad Slot has to perform a call to the Ad Server to check for ads, causing a possible reservation of space on the site.
Solutions
To lessen the impact of ads to the content of the website, without sacrificing revenue potentials, Ströer TagManager supports multiple distinct solutions.
Solutions can be combined with one another, potentially removing layout shifts completely.
| Table of Contents | ||
|---|---|---|
|
Registering AdSlots on start of website
...
Strict AdSlots
...
For further information on how and when “strict AdSlots” are interacting with your page, please see our documentation: TagManager guidelines for avoiding “Layout Shifts”
This feature can be activated by contacting your Ströer representative or sending us a ticket via our Publisher Support Center (separate account required)
| Tip |
|---|
Open beta for this feature is available. |
| Info |
|---|
A current “Work in progress” Test page can be viewed here. |
LazyLoad AdSlots
When an Ad Slot is “lazy loaded”, the slot will contact the Ad Server as soon as you indicate that you like the Ad Slot to load. For example by using the Slot.load() interface.
Rendering of the content of the Ad Slot will only start as soon as the user scrolls towards the Ad Slots. The slot will be rendered when the distance to the Ad Slot is smaller then 2 times the users display height.
Example: User employs a display of 1920x1080 pixel. All Ad Slots positioned 2160 (2 x 1080) pixels around the users current view-port are starting to render.
This threshold is configurable and different thresholds are used for Desktop and Mobile devices.
Please note: To calculate when an Ad Slot starts to render, the Ad Slot will need to be registered to a HTMLElement, that is present on your page, as soon as possible. You can register the Ad Slot very early while the HTMLElement is not yet rendered (see “Registering Ad Slots on start of Webseite”), but it must be inserted into the page on earliest convenience.
| Note |
|---|
An Ad Slot is only eligible for counting towards “guaranteed traffic” if the Ad Slot starts to render. Subsequently only a rendered ad will be paid for by the advertiser. This feature might have impacts on the revenue of your website. We strongly recommend to test the effect of “Lazy Load” and weight the results against the gains of website load performance and layout shift reduction. |
This feature can be used independently from all solutions discussed here and be activated for the whole site or on a slot-by-slot basis by contacting your Ströer representative or sending us a ticket via our Publisher Support Center (separate account required)
Animations on height change
Changes to an Ad Slot height are normally executed immediately, resulting in a high amount of change from one frame to next. To remedy this the Ströer TagManager can animate these changes, stretching the change over multiple frames and making this process as transparent to the user as possible. The influence of animations on CLS scores though, is currently limited. While we have observed light improvements, it is more adviseable to avoid height changes in the first place.
| Info |
|---|
A current “Work in progress” Test page can be viewed here. |
Loading Animations
When employing “Strict Ad Slots”, it can happen that the user already will see an Ad Slot, that is not filled with an ad yet. Since strict Ad Slots will reserve a fixed height and width for the slot, this empty space might be jarring to look at or signal to the user that the website is not functioning correctly.
To solve this, we can activate icon animations inside the Ad Slot, that will imply that the content is still loading. As soon as an ad is delivered, the animations will be removed.
Loading animations can be activated for the whole site, with 3 different options available. Please contact your Ströer representative or send us a ticket via our Publisher Support Center (separate account required) to start the process.
Option 1 - Bounce
| Iframe | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Option 2 - Circle
| Iframe | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Option 3 - Wave
| Iframe | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Info |
|---|
Feature is currently in development. Release approx. second week of March. |
...
The content of this documentation has been moved to: https://stroeerdigitalgroup.atlassian.net/wiki/spaces/SDGPUBLIC/pages/51513328/English+MetaTag+Documentation#Avoiding-Cumulative-Layout-Shift%5BinlineExtension%5D