Optimizing Website Performance with the Installation of a Cookie Consent Notice

In this document, we will discuss how to optimize website performance when using a cookie consent notice script. The goal is to compare website performance in four scenarios: without installing the consent notice, installing the consent notice immediately, installing the consent notice immediately with the "async" attribute, and installing the consent notice after a delay or after the user's mouse movement. We will analyze the performance implications of each of these scenarios.

Scenario 1: Without the Consent Notice

In this scenario, the site does not have a cookie consent notice. Performance is maximized since no additional script is being executed.

Performance Without the Consent Notice

Performance Graph - No Notice

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Performance Test</title>
    <meta name="description" content="This is a performance test" />
  </head>
  <body>
    Performance Test
  </body>
</html>

Scenario 2: Installing Immediately

In this scenario, the cookie consent notice is installed immediately upon page load. This can affect the site's performance.

Performance with Immediate Consent Notice

Performance Graph - Immediate Notice

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Performance Test</title>
    <meta name="description" content="This is a performance test" />
    <meta
      name="adopt-website-id"
      content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    />
    <script
      src="//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      class="adopt-injector"
    ></script>
  </head>
  <body>
    Performance Test
  </body>
</html>

Scenario 3: Installing Immediately with Async

In this scenario, the cookie consent notice is installed immediately upon page load with the 'async' attribute. This improves site performance as the script runs in parallel.

Performance with Immediate Consent Notice and Async

Performance Graph - Immediate Notice with Async

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Performance Test</title>
    <meta name="description" content="This is a performance test" />
    <meta
      name="adopt-website-id"
      content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    />
    <script
      async
      src="//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      class="adopt-injector"
    ></script>
  </head>
  <body>
    Performance Test Async
  </body>
</html>

Scenario 4: Installing After a Delay or Mouse Movement

In this scenario, the cookie consent notice is installed after a delay or in response to user mouse movement. This can enhance user experience and minimize the negative impact on performance by not loading large scripts immediately.

Performance with Consent Notice After Delay/Mouse Movement

Performance Graph - Notice with Delay/Mouse Movement

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Performance Test</title>
    <meta name="description" content="This is a performance test" />
    <meta
      name="adopt-website-id"
      content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    />
    <script>
      var scriptLoaded = false;

      function loadScript() {
        if (!scriptLoaded) {
          var script = document.createElement("script");
          script.src =
            "//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
          script.classList.add("adopt-injector");
          document.head.appendChild(script);
          scriptLoaded = true;
        }
      }

      setTimeout(loadScript, 4000);

      document.addEventListener("mousemove", function () {
        loadScript();
        document.removeEventListener("mousemove", loadScriptOnMouseMovement);
      });
    </script>
  </head>
  <body>
    Performance Test
  </body>
</html>

Scenario Comparison

Here are some conclusions based on the comparison of the four scenarios:

Scenario 1: Without the consent notice, performance is the best, but it may not comply with data privacy regulations.
Scenario 2: Immediate installation of the consent notice may negatively impact site performance. Since this is a matter of milliseconds, this performance change can affect search engine systems and reduce the site's ranking, without impacting user experience significantly.
Scenario 3: Installing the consent notice with the "async" attribute slightly improves performance compared to the previous scenario. However, it may still cause ranking issues in search engine systems.
Scenario 4: Installing the consent notice after a delay or in response to mouse movement can balance data privacy compliance and site performance. However, user experience might be affected if the delay is too long.

This document aims to provide an overview of the performance implications when using a cookie consent notice and offer guidance on how to optimize site performance. The choice of the appropriate scenario will depend on the specific needs and priorities of your site and audience.

Address: 7345 W Sand Lake Road, Ste 210 Office 5898 Orlando, FL 32819

EIN: 86-3965064

Phone: +1 (407) 768-3792

AdOpt

Resources

Legal Terms

🍪