User experience is an integral part of your business. We’ve no doubts that you always take it seriously. But, from June 2021, you’ll have to pay even more attention to your site’s experience because it can impact your traffic. Google has started using Core Web Vitals as ranking signals, and the update is all about user experience.
To help you out, we started with our ultimate guide to Core Web Vitals, and we also discussed how ads impact Core Web Vitals and what publishers can do about it. Moving further, we’ll discuss Core Web Vitals in the context of the cookie banners on your site. Our attempt here is to understand and minimize any negative impact of the cookie consent banner on your site’s CWV metrics so that you are not losing your SERP rankings. let’s understand how to how to optimize cookie banners for core web vitals.
Table of Contents
Three Core Web Vitals
Core Web Vitals analyze the user experience on your site by measuring its speed, responsiveness, and visual stability. To do so, they rely on three metrics:
- Largest Contentful Paint (LCP) to measure the time taken by the largest web element (be it content or an image) to load on the screen.
- First Input Delay (FID) to calculate time from the first user interaction with the page (by clicking a link/button, etc.) to the time taken when the browser responds to that interaction.
- Cumulative Layout Shift (CLS) to measure how much the web elements move around the viewport when the page loads.
Impact of a Cookie Banner on LCP
How do cookie banners affect a page’s LCP?
A cookie banner can influence your LCP metric if it contains the largest block of content in the viewport. If Google’s bots consider your banner’s element the largest, your LCP score will depend on how fast your banner loads. However, Google has earlier said that consent pop-ups shouldn’t affect your site’s SEO, but we’ve seen exceptions.
So, your job is to either avoid your banner from containing LCP or make it load so fast that it doesn’t matter if it has the largest element on the screen. We suggest you go with the first option because speeding up the cookie banner would be very tough. Here are some cases where your banner can spoil your LCP score:
Case #1: Your banner covers most of the screen
When your banner is already the biggest on the screen, it’s more likely to contain the largest block. Desktop sites may not suffer from this problem because of the available screen real estate, but mobile sites don’t enjoy the same luxury.
Source: Forbes
The solution is obvious, make the banners as small as possible. Don’t add too much text to it and keep the message as short as possible. Use a ‘Learn more’ link for additional information. Use fonts that don’t take too much space.
Case #2 Your banner has scrollable text
If you look at this community thread on Google’s forum, you’ll find that the publisher’s banner is already small, but it contains a scrollable text block. The block is forming the LCP of the page. The probable reason can be that even when the text block is partially visible, its actual size is still the largest on the page. So, the bots are counting it as an LCP element. As we mentioned earlier that loading the cookie banner faster can be difficult due to its third-party integrations, this situation can lead to a poor LCP score.
An example of a cookie banner with a scrollable text block.
To avoid this problem, go with the type of banner we suggested in the previous case. Don’t add scrollable items to your consent banner.
Case #3: Your banner loading speed is slow
A slow banner can affect your LCP score in two ways. We’ve already discussed the first where it contained the largest text block. The second is when the banner’s loading speed is causing other elements to slow down. In such a case, the LCP element will be delayed, and the score will be hampered.
The best practice would be to load the banner asynchronously so that the page load is independent of the banner. It’ll have a significant impact on your page load speed. Just ask your developers to implement asynchronous calling to your consent banner/CMP. You can render the banner outside of the viewport and make it slide in as an overlay later.
Another suggestion is to implement pre-fetch or pre-connect so that the browser connects with your banner/CMP in optimum duration. You can refer to this article for help. Preloading your cookie consent script can also be helpful to speed up the process.
Case #4 Your banner loads too early
Scripts are render-blocking resources. It means if you’re loading them synchronously, your browser can stop rendering page elements while parsing synchronous JavaScript tags. As a result, it can delay the LCP and lead to a poor score.
So, prioritize your page’s native elements if taking users’ consent is not necessary during the initial few seconds of the session. Once LCP is rendered, you can ask for consent with a small banner.
Impact of Cookie Banner on FID
How do cookie banners affect a page’s FID?
First Input Delay is primarily dependent on the browser’s background processes. So, if your site makes the browser run too many tasks, it’ll sporadically become unresponsive to user inputs. Since FID measures the time between the user’s first interaction till the browser’s response, an unresponsive browser will negatively impact your score. Whether you are optimizing for the cookie banner or any other element for FID, the ultimate solution would be to minimize browser processes.
The solution is to reduce the load. Work with your developers to lower the amount and size of CSS and javascript on your site. Get rid of all unnecessary scripts with no value for the user. Focus on making the page lightweight, compress files, implement Lazy Loading, etc. Doing so will free up your browser from unnecessary network requests and lighter files will allow faster processing.
We’ve also covered a lot of ground about increasing your site’s performance. Begin with our article on measuring your ad load speed, and use the mentioned tools to understand your current state of ads. Advanced publishers can read about reducing latency with Header Bidding ads and implement the suggestions given in the article. Later, make sure you are following all the general best practices to deal with latency issues. Additionally, all the tips that we gave to improve your banner’s loading speed will also be applicable here.
Impact of Cookie Banner on CLS
How do cookie banners affect a page’s CLS?
Cookie banners generally appear after some content has already loaded on the page. If your implementation is imperfect, the cookie banner can push the content up or down when it loads on the screen. This movement can appear as a layout shift to Google bots, and your CLS score can suffer. So, you want to make sure that the cookie banner appears without disturbing the content on your page.
Case #1: Content shift due to loading sequence
Every site renders in a tree structure at the backend. The structure is called Document Object Model, or DOM. The DOM follows a sequence, and if you add your cookie banner to it after it has loaded, the content will shift to make room for the banner.
Source: Wikipedia
Ask your developers to reserve space for the banner to avoid shifting. Alternatively, you can create a sticky consent banner or an overlay. You can also set a fixed position for your banner. All these implementations require simple changes in your CSS. You can refer to W3School’s guide on element positioning.
Case #2: Content shift due to animation
Complex animations like zoom-out or slide-in can cause layout shifts. It’s advisable to either not use animations at all or try simple ones like fade-in. If you’re an animation fan and can’t let it go, render the cookie banner outside the viewport and make it slide in as an overlay (only after it has loaded completely).
Case #3: Content shift due to fonts
Fonts are styling elements, and they are mostly one of the last to render on third-party cookie banners. When your selected font replaces the unstyled text, the spacing and size can change and cause a layout shift. The same problem can occur if your site doesn’t show any text (invisible text) until the font is loaded.
It’s best to test your fonts before making them live. Use the ones that have no impact on the layout. If changing the font isn’t an option, you can pre-fetch them so they are rendering at the right time. Also, make sure you’re not showing invisible text because it can cause Google’s policy violation.
What’s Next?
You can’t avoid consent due to the growing number of privacy policies around the world. A cookie banner isn’t necessarily part of your webpage but if you don’t implement it properly, it can have a significant impact on your CWV metrics — hence, search traffic.
It is best to create a universal strategy that applies to all the consent banners on your site (irrespective of privacy law, geography, etc). Work closely with your CMP to make your banner load faster. Keep testing your banners from time to time to make sure they are working as expected. Prepare a testing checklist to make sure you are inspecting all the scenarios; for example, check for a list of locations, try different devices and models, etc. You can also use third-party real user monitoring (RUM) tools to keep a tab on how your cookie banner and other page elements are behaving in the real world.
