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:

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

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: (Advanced route) - Remove Smart Data Protector and manually insert code into each <script> into the website:

Please note this is for advanced users only who are comfortable editing scripts within their website’s backend. This option only works if you apply the change to all scripts within the website, as that is what removes the need for the Smart Data Protector, which is discussed further below.

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 youtube embed script or Meta pixel 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: you could manually insert some code into each non-essential script/iframe on your website, and thus would only need to embed the Consent Management script (Script #2) into the top of the <head> of your website. This can significantly improve page load speed depending on your website structure. And if you are using only a few third party scripts, this update will only take a couple of minutes.

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 policy details” for the “Cookie Policy and Consent Tool questionnaire”
Go to the final submit page
On the left hand column, each third party Script 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.
Last but not least, grab the final two scripts within the embed code area (see screenshot above for reference) and paste this into the top of your <head>

Examples:

YouTube Video i

If your standard YouTube Video embed is:

You would insert:

Or update 'src' to 'uc-src':

Google Maps (and other iframes)

If your standard Google Map embed is:

You would change 'src' to 'uc-src':

Meta Pixel

If your standard Meta 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 insert:

!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.

Improving page load speed when using the Usercentrics cookie consent tool Print

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

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

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

Related Articles