Complianz Website Speed Fix

Introduction

Complianz is a popular cookie banner plugin trusted by many website owners. However, it is also known to increase LCP (Largest Contentful Paint) scores, especially on mobile devices. This can hurt your PageSpeed Insights results and Core Web Vitals metrics.

We have a simple Complianz Website Speed Fix that can help improve your LCP score and make your site faster.

What is LCP and Why Does It Matter?

Largest Contentful Paint (LCP) measures how quickly the main content of a webpage becomes visible to visitors. It is one of the key metrics in Google’s Core Web Vitals, which affect your SEO rankings and user experience.

A faster LCP means visitors see your content sooner, reducing bounce rates and improving engagement.

How Complianz Affects Your LCP Score

Complianz shows a cookie banner immediately when the page loads, covering a large part of the screen. This often causes the banner itself to be counted as the LCP element, especially on mobile devices.

As a result, the loading of other important content like images or text can be delayed, leading to a higher LCP score. The problem is more noticeable on mobile where slower processors and network speeds make these delays more obvious.

How to Fix Complianz LCP Issue

Our fix hides the cookie banner by default and displays it after the user scrolls 5% down the page (you can change this easily in the code).

Delaying the banner reduces the initial loading time and allows the actual LCP element to load faster.

This significantly improves your LCP score and overall Core Web Vitals metrics without sacrificing compliance.

Adding the Code to Your Site

Add the following code snippet to your WordPress website by either adding it to your child theme’s functions.php file or using the Code Snippets plugin.

function cmplz_delay_banner() {
  ob_start();
  ?>
<script>
document.addEventListener("cmplz_cookie_warning_loaded", function() {
    window.addEventListener("scroll", () => {
        let scrollTop = window.scrollY;
        let docHeight = document.body.offsetHeight;
        let winHeight = window.innerHeight;
        let scrollPercent = scrollTop / (docHeight - winHeight);
        let scrollPercentRounded = Math.round(scrollPercent * 100);

        // Adjust the scroll threshold below
        if (scrollPercentRounded > 5) {
            const cookieBannerContainer = document.querySelector('#cmplz-custom-wrapper');
            if (cookieBannerContainer) {
                cookieBannerContainer.classList.remove('cmplz-hidden');
            }
        }
    });
});
</script>
<?php
$script = ob_get_clean();
  $script = str_replace(array('<script>', '</script>'), '', $script);
  wp_add_inline_script('cmplz-cookiebanner', $script);
}
add_action('wp_enqueue_scripts', 'cmplz_delay_banner', PHP_INT_MAX);

// Make the cookie banner hidden by default
function wpff_wrap_cookiebanner_with_custom_div($html) {
  return '<div id="cmplz-custom-wrapper" class="cmplz-hidden">' . $html . '</div>';
}
add_filter('cmplz_banner_html', 'wpff_wrap_cookiebanner_with_custom_div', 9999);

Alternatively,

You can download this code, save it into your /wp-content/mu-plugins/ folder as complianz-display-after-scroll.php to run it as a must-use plugin.

Testing the Impact

Use tools like Google PageSpeed Insights or Debugbear to test your LCP score before and after applying the fix.

You should see a noticeable reduction in LCP time, especially on mobile.

If you are familiar with using Chrome Dev Tools, right click anywhere on one of your pages and click Inspect.

Scroll through the elements, and close to the top, you should see the div with the id cmplz-cookiebanner-container.

Our fix adds a second wrapper to the div with the class cmplz-cookiebanner and makes it hidden by adding the cmplz-hidden class.

Using JavaScript, we calculate how much the user has scrolled. When the threshold is reached, cmplz-hidden class is removed, and the cookie banner becomes visible.

Additional Tips to Improve Website Speed

• Tracking your Core Web Vitals regularly helps ensure your site stays fast and user-friendly.
• Use caching plugins, such as Litespeed Cache and a content delivery network (CDN) to reduce TTFB and speed up your site.
• Optimize images and defer non-critical JavaScript.
• Avoid plugin bloat by removing unused plugins that are installed on your WordPress website.

Conclusion

Complianz can affect your LCP and Core Web Vitals, but this simple fix can make a big difference.

By delaying the cookie banner display until after a small scroll, you improve your site speed and SEO rankings.

Feel free to reach out with questions or share your results.