Policy embed is causing layout shift

When embedding policy documents using the GetTerms embed function, you may notice a brief delay while the content loads. This can occasionally cause a visible layout shift, negatively affecting the page’s Core Web Vitals score, particularly the Cumulative Layout Shift (CLS) metric.

This article explains how to mitigate layout shift issues by reserving space for the embedded policy and improving the overall page experience.

A message on core web vital scores from an SEO specialist

After nearly a decade in SEO, my advice is simple: Please don’t waste time chasing perfect Core Web Vitals scores on privacy or cookie policy pages.

Google’s core ranking systems generally evaluate content on a page-specific basis; these pages don’t compete for rankings, and their performance has no impact on how your main content ranks.

Take it from Google: Focus your efforts on great content, backlinks, and indexability.

"Google Search always seeks to show the most relevant content, even if the page experience is sub-par. But for many queries, there is lots of helpful content available. Having a great page experience can contribute to success in Search"

That said, a small fix like adding a min-height can easily prevent layout shifts if it really bothers you, we'll show you how to do that below.

Why it's impossible to completely prevent layout shifts if you're embeding a policy

When embedding content via external scripts, it is not possible to fully prevent layout shifts with loaders or placeholders because the embedded content can vary in length and update dynamically. Browsers cannot predict the final size of this content, which leads to natural layout adjustments after loading. While reserving space with CSS (e.g., min-height) reduces visible shifts, perfect stability is not achievable in this setup.

If you want to completely remove any layout shift, the only solution is to copy the raw HTML from your policy preview and paste it directly into your sites content editor.

How to minimise layout shift when embedding a policy

Embed the script manually not using our plugin

The plugin automatically handles many aspects of embedding. We are actively working on improvements to reduce layout shifts in future updates, but if this fix is a priority for you, please embed the script manually.

You can significantly reduce layout shifts by adding a CSS style directly to the embed code, reserving space for the policy to load.

Add inline CSS to your embed script

When embedding the policy manually, simply add a min-height style attribute to your embed container. For example:

<div
  class="getterms-document-embed"
  data-getterms="[Your GetTerms token]"
  data-getterms-document="cookies"
  data-getterms-lang="en-us"
  data-getterms-mode="direct"
  data-getterms-env="https://gettermscdn.com"
  data-getterms-styles="true"
  style="min-height: 100vh;"
>
</div>
<script type="text/javascript">
(function(d, s, id) {
  var js, ref = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://gettermscdn.com/dist/js/embed.js";
  ref.parentNode.insertBefore(js, ref);
})(document, "script", "getterms-embed-js");
</script>

Why This Works

The min-height: 100vh; CSS rule reserves at least one full viewport height for the embedded content, which prevents any noticeable layout shift while the policy loads.

Since policy pages typically include only the embedded document and the content usually exceeds the viewport height, any minor shift that does occur happens below the fold, reducing its impact on user experience and SEO.