Performance

At Didomi, we understand the critical importance of maintaining optimal web performance while ensuring compliance with data privacy regulations through our Consent Management Platform (CMP).

CMPs, while essential, can introduce additional JavaScript and network requests that may impact Core Web Vitals—key metrics for assessing web performance and user experience. Specifically, these additional elements can affect Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

To address these concerns, the Didomi Web SDK is engineered to be lightweight and highly efficient, minimizing its impact on these vital metrics. This section of the documentation provides insights and best practices for integrating the Didomi CMP without compromising on performance, ensuring both compliance and an excellent user experience.

Load time

The Didomi Web SDK needs to be loaded and ready before the notice is displayed or third-party scripts like ads are loaded. Depending on how your website is built, this might add a delay.

There are 2 main elements that can slow down the SDK loading process:

1. Your website is loading a lot of resources and scripts. Didomi needs the DOM to be loaded for the loader script (the one included from the Console) to append our SDK in the head of the page. If your DOM is loaded after 5 seconds, our SDK will start to load after 5 seconds. Even if you add the loader at the top of the head, the progression will be stuck until the DOM is loaded. It is important for you to make sure the DOM is ready as fast as possible and that no scripts are blocking the thread and slowing down the loading process. If your website loads a lot of resources like scripts and CSS, the SDK will be placed at the end of the queue and wait until the others are loaded.

2. You are using shared consent via a custom domain. When using shared consent, the Didomi SDK uses an iframe on your designated domain to read and write cookies from that domain. This involves asynchronous operations for loading the iframe and communicating with it that will slow down the execution of the SDK. If load time is key, we recommend not sharing consent across domains.

To optimize the load time of the SDK, you can explore the following options:

• Make sure the DOM is loaded as fast as possible and no other scripts are blocking the DOM from being ready. You can read more about the use of defer or async , for example.

• Make sure the Didomi script is placed first, at the head of the page. Adding our loader in an external Javascript file or in the footer will delay its execution.

• Reduce the number of calls or scripts loaded by your page and/or move them to the body section of the page.

Core Web Vitals

Largest Contentful Paint (LCP)

LCP measures the loading performance of the largest visible element in the viewport. A slow LCP can result from heavy JavaScript, large images, or slow server response times.

Recommendations:

• Ensure that the CMP script is loaded asynchronously.

• Lazy load non-essential elements.

• Optimize images and other large assets for faster loading.

• Use efficient caching strategies to speed up server response times.

Interaction to Next Paint (INP)

INP evaluates the responsiveness of the page to user interactions by measuring the delay between user input and the next frame rendered.

Recommendations:

• Efficient Code in Callbacks:

  • Ensure that the code within these callbacks is performant and yields at appropriate points (more information about yielding on https://web.dev/articles/optimize-inp#yield_to_the_main_thread_often) to prevent lengthy tasks:

    • TCF API callbacks

    • Didomi events callbacks (e.g., consent.changed, notice.hidden)

    • Integrations and Tag Managers (e.g., dataLayer.push)

• Vendor and Purpose Limitation:

  • Limit the number of vendors and purposes in the consent notice to only those necessary. Avoid including all IAB vendors if not required.

• Deferred Loading of Third-Party Scripts:

  • Avoid loading third-party scripts immediately, as they can burden the main thread and impact performance.

• Custom UI Implementations:

  • If using custom UI elements, adhere to INP best practices for buttons, links, or any interactive components to ensure smooth user interactions.

Cumulative Layout Shift (CLS)

CLS quantifies the visual stability of a page by measuring unexpected layout shifts. High CLS can occur if the Didomi CMP dynamically inserts elements without reserving space in advance.

Recommendations:

• Pre-allocate space for the CMP elements.

• Use CSS to minimize layout shifts during loading.

• Avoid inserting elements above existing content.

• Implement placeholder elements to maintain layout stability.

Total Blocking Time (TBT)

TBT measures the total time that a page is blocked from responding to user input due to long-running tasks.

Recommendations:

• Break up long tasks into smaller chunks.

• Defer non-critical JavaScript.

• Leverage web workers where possible.

• Optimize the CMP script for minimal blocking and quick execution.

By implementing these strategies, you can significantly improve the load time and performance impact of the Didomi SDK and ensure a better user experience on your website.