Improving page load speed when using the Usercentrics cookie consent tool

Modified on Mon, 10 Aug at 10:46 AM

Page load speed is important, as is complying with applicable privacy laws. These two goals can sometimes conflict when features like consent solutions are required to be provided for website visitors. It is important to note that due to how cookie consent solutions work, all solutions will cause a slight decrease in page load speed. The good news is that Usercentrics meets the industry standard by averaging by less than 250ms or less when initially loading.

Reminder: If you have a Wordpress website, you can use the Termageddon + Usercentrics plugin to install the usercentrics consent script at the top of the header (necessary for it to control all other third party scripts) while providing geolocation features to block the consent solution from showing based on a user's location. This plugin is available only for Wordpress websites.

In this article, we’ll highlight two options to help improve page load speed even further:

NEW OPTION: The most recent Usercentrics version now allows for significant performance improvements. You can simply upgrade your consent to Version 3 and then test in a fresh incognito window to see if this helps with performance.

Option 1: (Easy route) - defer js and delay js with a tool like Perfmatters

The easiest way to improve page load speed will be to utilize an optimization tool that offers the ability to delay JS from loading first. By delaying JS, you delay scripts from loading on the website until the rest of the page renders and loads first, massively improving both user experience and online page load speed tests.

If you are using WordPress, we recommend using Perfmatter Pro, which is an excellent, highly recommended, performance plugin just in general. Their tool provides the ability to enable the option to ‘delay JS’ which can significantly improve page load speed results. All you have to do is ‘enable’ the feature within their plugin settings (see instructions here).

Here's what your settings will end up looking like in Perfmatters within your admin area (under "Tools" -> :

In the area "Excluded from Delay" and "Excluded from Defer", make sure to add the following:

app.usercentrics.eu/browser-ui/latest/loader.js
privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js
termageddon-usercentrics
termageddon
usercentrics

If you have a website built outside of WordPress, see if there are any plugins/widgets/apps available for you to install to allow for delaying JS.

After implementing, test to not only make sure users have to give consent first prior to scripts loading, but also for page speed improvements.

Option #2 - WordPress Websites Only

We offer a Manual Script Controller feature within the Termageddon plugin that, when used for all third party tracking technologies, you can then deactivate the Usercentrics auto-blocker feature (via the plugin), which will signficantly improve page load speed. See this article on how to use the Manual Script Controller.

Option #3: (Advanced route) - Remove Smart Data Protector and manually insert code into each <script> into the website:

The “Usercentrics cookie consent embed code” has two parts to it. Part one is the ‘Smart Data Protector’, which in real time grabs and controls predefined scripts that are placed in your website that would otherwise fire and put non-essential cookies on your website visitors’ browsers. A good example here would be a Microsoft Clarity embed script or Facebook pixel script for advertising.

The second part of the embed code is the part that actually approves/denies those scripts from firing based on the individual’s website consent preferences.

So when you install the entire embed code into your <head>, two things are happening:

Script #1 (Smart Data Protector) identifies all third party non-essential scripts, and updates each of these scripts to not load until a user gives consent first.
Script #2 (consent management) is the part that actually let’s the scripts turn on/off based on the individual website visitor’s choice.

Here is a screenshot highlighting Script #1, the Smart Data Protector:

Here is a screenshot highlighting Script #2, the actual Consent Management portion:

Takeaway: if you load in just the Consent Management portion of your script, you will significantly improve the page load speed of your website. However, with the auto-blocker deactivated, you will have to set up manual control fro each and every third party script loading on your website.

To do this, you would need to insert the following into each script on your website:

type="text/plain" data-usercentrics="XXX"

Replace "XXX" with the respective service, such as "Google Analytics".

To identify the title of each script and perform the update:

In your account, click into your license
Click “edit” for the “Cookie Policy and Consent Tool questionnaire”
At the bottom of this page, each third party Service is listed.
Identify the non-essential Services, aka ‘functional’ or ‘marketing’ Services (you can ‘edit’ a script and view if it is ‘essential’, ‘functional’, or ‘marketing’ under the ‘general’ dropdown on the right side).
Take the name of a non-essential script (such as “YouTube Video”) and replace the “XXX” in the text above with this name.
Now go into your website’s backend, and within the respective script, add in this text (immediately after "<script "). If you're script already has a 'type' listed, replace it with type=text/plain.

Example:

If you have "Facebook Pixel" listed as a Service in your questionnaire, and your standard Facebook Pixel embed code is:

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script',

'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '{your-pixel-id-goes-here}');

fbq('track', 'PageView');

</script>

<img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>

</noscript>

You would then insert the following:

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script',

'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '{your-pixel-id-goes-here}');

fbq('track', 'PageView');

</script>

<img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>

</noscript>

Now test your website to verify non-essential scripts won’t load until you give consent first. By removing the need for Smart Data Protector, you should see an improvement in page load speed as well.

Does the Usercentrics script cause significantly more than >250ms in additional load speed?

If yes, then your website is in need of general optimization improvements. Usercentrics meets the industry standard for consent solutions by fully loading within 250ms or less. If your website is consistently impacted by significantly more than 250ms, then general improvements are likely needed to be made to the website. There are many articles online with how to optimize websites; just as a reminder, be sure you have pasted the Usercentrics script at the top of the <head> as this tends to be the #1 reason why people have load speed issues beyond 250ms if the website is already optimized for fast page load speeds.