Will my CMP affect my Core Web Vitals score?
Consent management platforms are not a feature that publishers really choose to have. They are a regulatory necessity that fulfills a purpose and, frequently, are run from a third-party service. Because of this, it's easy to think of CMPs as 'outside' the regular website and not subject to the same expectations for performance and experience as actual content.
But, because CMPs can have a significant impact on page performance, they can also have a significant effect on your Core Web Vitals score. In fact, CMPs can impact every metric - some more severely than others.
In this post, we’re going to explain the ways your CMP can harm your Core Web Vitals scoring and best practices to make sure you still score high while complying with data and regulations.
How CMPs impact Core Web Vitals: CMPs are not exempt from core web vital scoring because they are a fundamental part of the page loading experience. They are one of the first elements users see, they are shown to all users, and they affect how ads and other page content is loaded as the experience continues.
Even if your CMP is managed by a third-party it is still considered part of your page loading experience. Because third-party scripts are often built for a singular function in mind, they often affect web performance more than in-house solutions, so you may need to check your scores when running your CMP.
Test your Core Web Vitals with your CMP
Test your Core Web Vitals with your CMP Tools such as Webpagetest enable the option to test as a visitor viewing the page for the first time so it will consider the CMP.
Here you can see that CMP is registered as a visual change in the frame, but it is not the LCP which is the title text, occurring long before the CMP is loaded.
Once tested, you can start to see how your CMP is affecting your scores, and then begin to optimize it.
But, the consent managed by the CMP can impact other elements that may have a significant impact on page interactivity - namely advertising and tracking scripts.
Delay these scripts The best practice is to delay advertising and tracking scripts until cookie acceptance has been given. Starting the process before consent is given can lead to a 'pause' in which the main thread is occupied. Until the wrapper knows the user consent level it is unable to complete the task. This prevents user inputs being handled by the main thread, causing a long delay.
Delaying these scripts until user consent has been given can serve as a technique to decrease First Input Delay (FID).
Custom styling can bring delays Custom styling can bring delays Although there are not infinite styling options, most CMPs tend to load styling at the end of long request chains.
For a fast FID, long tasks need to be broken up, so adding more work to long chains can lead to poor performance.
Long tasks are defined as anything over 150ms as this is the point at which humans can perceive this delay as a pause. Splitting and bundling using tools like Webpack can break these up and help you prioritize the order.
Largest Contentful Paint Largest Contentful Paint Although consent pop-ups are singular and contained units, elements within the CMP can still be classed as the largest contentful paint. Often, this happens when there is a large block of text in the first screen of the CMP, like in this example:
To prevent this from slowing down your LCP, CMP scripts should be loaded asynchronously, by adding the async attribute to the script tag. Synchronous scripts block the browser parser which delays the page load and, in turn, the LCP score.
It's also recommended to load the platform directly, with a script in the head tag, rather than using a tool like a tag manager.
Cumulative Layout Shift Cumulative Layout Shift Consent management platforms frequently move. This is a concern when it comes to CLS. There are some practices to do, and some to avoid, to ensure your CMP doesn’t cause too much CLS.
Top of screen consent pop-ups Although consent pop-ups are traditionally served from the bottom of the screen, it is possible for them to flow from the top of the screen. If this element is inserted into the DOM after the page has rendered, it will push all of the page elements below down the page, rather than flowing over them.
This shift can be prevented by reserving space in the DOM for the consent management platform. If the pop-up is dynamic depending on factors like the locations, it’s more advisable to use a sticky footer or modal. Both of these solutions overlay the notice on top of the content rather than shifting it down or up to make space.
Web fontsIf your CMP uses a font that has to be downloaded, it can block render and or cause layout shifts as the default font loads, the switches to the custom font.
Add a performant CMP with Marfeel Your CMP should be a seamless and clear experience for your users. But, it should also not affect the performance of your site when it comes to ranking signals like Core Web Vitals.
If you would like to find out how you can add the Marfeel CMP to your website and score high in Core Web Vitals, click here to get a demo.