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 can lead to unexpected layout shifts, which have a negative effect on the user experience and can cause serious usability problems.

This guide explains how to measure and minimize layout shift when working with Google Publisher Tags (GPT).

How ads cause layout shift

Ads are usually requested asynchronously and dynamically add content to your page during or after page load. While ads are being fetched, the rest of the page continues to load and non-ad content may become visible to the user. If you don’t reserve sufficient space for the ads being loaded, they can end up displacing visible non-ad content when they are eventually added to the page.

When working with Google Publisher Tags, there are a few points in the ad lifecycle where layout shift can occur:

  1. When display() is called. A slot may expand or collapse, depending on how it was configured.
  2. When ad content is rendered. A slot may be resized if served a fluid ad or if insufficient space is otherwise available. A slot may also expand or collapse at this point, depending on how it was configured.
  3. After ad content is rendered. Certain creative types are designed to expand after they appear on the page.

Keep in mind that the higher an ad slot is within the viewport, the more content it has the potential to displace. Take special care with slots near the top of the initial viewport (above the fold). These slots can cause a disproportionate amount of layout shift because they are more likely to be visible when their ad content is loaded.

Measuring layout shift

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that you can use to quantify the impact of layout shifts on your site, both in the lab and in the field.

In the lab

Lab tools measure CLS synthetically. This means that they don't rely on real user interaction, making them well suited for use in continuous integration and local development workflows. However, these tools usually only measure performance during page load and are limited in the conditions they can simulate, so reported values may be lower than what a real user would experience.

You can use the Publisher Ads Audits for Lighthouse lab tool to measure CLS specifically attributable to GPT ads. For details, see the reduce ad-related layout shift audit documentation.

In the field

Field tools measure CLS experienced by real users as they interact with your site. This process is commonly known as real user monitoring (RUM). RUM allows you to observe how CLS is affected by real-world factors—such as device capabilities, network conditions, user interaction, and page personalization—which are often difficult or impossible to simulate with synthetic tests.

Minimizing layout shift

The only guaranteed way to avoid layout shift is to reserve a sufficient amount of space for a given ad slot before calling display(). Setting a fixed height and width directly on the ad slot div is the most effective way to do this. However, while this works well for static, fixed-size ad slots, more complicated scenarios may require a more nuanced approach. Some common scenarios are explained in the following sections.

Multi-size ad slots

For ad slots that accept multiple sizes, we recommend that you do one of the following:

  • Reserve space for the largest size configured to serve.
  • Reserve space for the size most likely to serve, determined by examining historical fill data from Google Ad Manager reporting.

While these techniques minimize the chance of layout shift, they come with a risk of your ad slot not being sized perfectly for the creative that's actually served. When this happens, the ad slot doesn’t automatically resize to fit the creative content and the content may not display the way you intend.

If blank space is visible

In the event a creative smaller than the reserved size is served, blank space may be visible around the ad. You can mitigate this somewhat by limiting the range of sizes able to serve to the slot, especially those above the fold. You can also use vertical and horizontal centering to reduce the impact of excess blank space.

If creative content doesn't fit into the ad slot

If a creative larger than the reserved size is served, the creative content may appear cut off or extend outside of the ad slot. To address this, resize the ad slot to fit the creative content. Be aware that this may cause a layout shift, so ensure you are reserving enough space to avoid this situation in most cases.

We recommend tackling this issue by specifying the size of your ad slot via min-height and min-width CSS properties:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

This lets you reserve a minimum amount of space for your ad slot, while still allowing the browser to increase the size of the container as necessary. You can combine this technique with CSS media queries to specify different minimums for different screen sizes:

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}
Resizing with JavaScript

If a pure CSS solution isn't an option, you can use JavaScript to manually resize an ad slot after creative content is loaded. To determine when a slot has been filled and decide whether resizing is necessary, use the GPT library's slotRenderEnded event:

googletag.pubads().addEventListener('slotRenderEnded', function(event) {
  var size = event.size;
  if(size === null) return;

  var slot = event.slot;
  var slotDiv = document.getElementById(slot.getSlotElementId());

  if (size[0] > slotDiv.clientWidth) {
    slotDiv.style.width = size[0] + 'px';
  }

  if (size[1] > slotDiv.clientHeight) {
    slotDiv.style.height = size[1] + 'px';
  }
});

Fluid ad slots

Fluid ad slots do not specify a fixed set of sizes that they support. Instead, these slots automatically resize to fit the creative content served to them, allowing them to support creatives of indeterminate size. As a result, it's not possible to reserve space for these slots prior to requesting ad content, and fluid sized ads always cause layout shifts.

To mitigate the effects of layout shifts when working with fluid ad slots, we recommend the following:

  • Only use the fluid size for slots below the fold.
  • Fetch fluid slots as early as possible to minimize the chance of a user scrolling them into view before the slot is resized.

Collapsing and expanding ad slots

The collapseEmptyDivs() method allows you to collapse ad slot divs so that they don't take up space on the page when there is no ad content to display. However, this feature should be used with caution because it can introduce unintended layout shifts. As noted in the preceding section, collapsing and expanding ad slots can cause layout shifts at two different points in the ad lifecycle.

If you need to make use of this feature, you can reduce the impact of layout shifts by using historical fill data from Ad Manager reporting to implement the following best practices:

  • Slots which are likely to be filled should always start out expanded.
  • Slots which are unlikely to fill should always start out collapsed.

For an example implementation, see the Collapse empty ad slots sample.