Sorry, you need to enable JavaScript to visit this website.
logo

How to Improve CLS Scores in PageSpeed for Drupal Sites Using the EU Cookie Compliance Module for Cookie Warnings

By Dzmitry Hryn

Solving the Layout Shift Issue by Cookie Consent Pop-Ups

Now most sites use cookies to store information about a visitor’s past visit: language settings, region, preferred promotional materials, wish lists, viewed product pages, etc. This allows you to collect the information necessary to understand the target audience and personalize the site for each visitor. While the collection and storage of cookies are not limited by law, the visitor must allow you to use their personal data.

A warning about the collection and storage of cookies is a pop-up message with a "Confirm" button and a link to a document that outlines the specific information the site collects and its intended purposes. Also, the agreement may offer custom options, where the user can select which data to disclose.

On Drupal sites, the popular EU Cookie Compliance module is very often used to implement a pop-up message with flexible settings that allow you to easily create a pop-up window with the necessary information. But it can have a negative effect on the CLS score in PageSpeed, which affects the site’s download speed and ranking in Google search results. So it is very important to maintain a good low CLS to ensure your site ranks higher.

In this article, we will explore why this happens and describe one of the ways to solve this problem using the example of the site attico.io.
 

How EU Cookie Compliance Impacts CLS Score in PageSpeed

To start, let’s analyze the PageSpeed score of a site without the EU Cookie Compliance module enabled
 

Cumulative Layout Shift

The CLS indicator is in the green zone which is acceptable but not ideal as it is not equal to 0.

Now let's enable the site with the EU Cookie Compliance module

Cumulative Layout Shift 2

Here we see that CLS has grown and moved out of the green zone. Why does this happen? Let's take a closer look.

If you look at the “Avoid large layout shifts” parameter, then you will notice that the module causes a significant shift in the layout

code

Let's see how the popup animation occurs and why it shifts the layout.

code1

In the picture above, we can see that when the page loads, the popup is hidden with a negative bottom value. When it starts to appear, the bottom starts to increase and reaches the value 0 as shown in the picture below.

reaches the value 0

This animation is created using CSS properties such as top, right, left and bottom, which can cause the object to be redrawn at each step of the animation. This can result in layout shifts. However, using a CSS transform instead of the properties mentioned above ensures the object is only redrawn at the start and end points, thus avoiding such layout shifts. In the following section, we’ll describe a solution to this problem.
 

How to fix layout shift

To fix the layout shift caused by the EU Cookie Compliance module, you can delay the appearance of the pop-up window for 1-2 seconds. But there is no such setting in the module at the moment, so we will finalize the module animation and add lazy loading with our CSS code without fixing the module code itself, which will help fix this problem.

To hide the popup, we will use the transform: translateY CSS property (because on the site the popup appears from the bottom, if you have a popup appearing on the side, use transform: translateX), which we will add to the main block with the .sliding-popup-bottom class, and to animate the appearance of the window, use @keyframes

CSS code:

.sliding-popup-bottom {
  transform: translateY(100%);
  animation: cookie-animation 1s linear 1.1s forwards;
}

@keyframes cookie-animation {
  100% {
    transform: translateY(0);
  }
}

Note that the animation has a delay of 1.1 seconds, which should be adjusted depending on the animation speed set in the module settings and increased by 0.1 seconds.

Let's check the CLS score now with the module enabled and our animation

Cumulative layout shift 1

After implementing this solution, the CLS score should return to the level seen when the module was disabled as shown in the PageSpeed analysis. Hopefully, this article will be helpful in resolving a CLS issue on your website.

Get a free consultation

Related Items

Drupal security preview
Enhancing Drupal Website Security with Recommended Security Modules

Website security is not a set-it-and-forget-it task, but an ongoing process that needs constant attention. After all, it’s better to prevent a…

5 min read
Drupal
By Aliaksandr Kostsikau
less work more output
Drupal Multisite: Less Work, More Output

Maintaining an online presence often forces companies to build multiple websites, with a site for each brand, product, or country. Keeping up…

5 min read
Drupal
By Aliaksei Lyzo
Let's ask google
Is Drupal SEO friendly? Let's ask Google

Is Drupal SEO friendly? Good question. To get to the bottom of this, let's analyze the Google recommendations for website SEO optimization…

5 min read
Drupal
By Aliaksei Lyzo
less work more output
Storybook and Drupal

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

7 min read
Drupal
By Volha Tsiamliak, Yaroslav Lushnikov
Attico International's New Brand Identity
Attico Enters a New Era of Growth and Sustainability with Rebranding Efforts

Attico has been a leading provider of innovative and top-notch digital solutions to customers worldwide for years. As we continue to grow and…

2 min read
Drupal, Marketing, QA
By Editor