We will discuss the core Web Vitals, which are used by Google Optimization tools like; Lighthouse Audit, Pagespeed, and Search Console. We will explain how Complianz might interfere with these metrics and what to do about it. Prior to this discussion, we would like to note that there’s high variability in these metrics, and outcomes will differ per configuration. Although most metrics are generalized they need the context of the website to make sense.

The current set for 2020 focuses on three aspects of the user experience—loadinginteractivity, and visual stability—and includes the following metrics (and their respective thresholds):

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

We will discuss LCP & CLS, as these are most common while dealing with Web Vitals and Complianz. And the discussion is related to mobile only, as the cookie banner will overlay a large part of your webpage during first visit.

Source: web.dev/vitals/

Largest Contentful Paint

The largest element of a website should be loaded before 2.5 seconds. If the largest elements loads before 2.5 seconds, your LCP scores are fine. If not, it might need improvement. The reason why the cookie banner is considered a LCP is because of the following reasons:

  • By default the cookie banner is loaded when HTML is almost fully loaded, meaning it will be at the end of the full page load. If your website takes 2 seconds to load, this is not an issue, if it takes longer the LCP might be the cookie banner as it crosses the 2.5 second line.
  • Elements that are considered by Google for LCP includes HTML elements like . In this case most LCP warnings would consider the element of the cookie message the LCP as it is the largest element on mobile.
  • Largest element is not based on download size, but on surface in the lay-out.

For example:

  • The image on the left features the LCP
  • The right element, the element is loaded later, but is not considered for LCP

For example:

  • The image on the right features the LCP as the cookie message.
  • The left element, the video is not counted toward the metric, nor could it be bigger than the LCP.

How to improve LCP for your website

If you have the above result whereby the is the LCP, it’s good to know it’s not necessarily a bad thing. It could well be the cookie message on mobile is larger than any other element on your webpage. If you need to optimize your LCP score, it’s not always the LCP itself that needs optimization. These are some solutions to either speed up your website until LCP, or optimize the cookie message.
  • Defer javascript so these are not considered for Web Vitals
  • Shorten your cookie message
  • Do not apply Google Fonts on your cookie message.
  • Give a fixed height to the cookie message with some CSS:

Cumulative Layout Shift

I think we all know the pain of lay out shifts on websites. One second you’re ready to click on a button, the next second the button is replaced by an image and the button appears somewhere else. This is due on how the lay out of your website is built during page load. There are instances where a higher CLS score might dissappear when you deactive the cookie banner, but we have  not been able to reproduce this issue. There are 2 things that might cause this;
  1. While deactivating the cookie banner, you also deactivate the cookie blocker. A lay-out shift might happen when blocking scripts on your website if they are not properly loaded. Try deactivating the service of the related content block to see if this resolves the issue. If you can find the culprit you can choose to defer this script.
  2. In the cookie banner there’s a CSS transition of 1 second. In websites with different CSS stylesheets and slower loading time, a CSS transition might cause for a higher CLS score. To remove the transition please add this CSS:

Concluding

It’s hard not to go after every metric Google has to offer, as they seem to pushing this for Search Console, and therefore your rankings as well. However, please make sure to prioritize real user experience over metrics that will try hard to resemble users. They have deprecated First Contentful Paint and Speed Index in the same breath they are pushing newer metrics. As Google is optimizing it’s ranking factors, please look to serve your real users with great, original content while respecting their privacy and expectations of load time and usability. It has worked for us with less than stellar Web Vitals, because the chase of perfect scores might drain your websites originality and creativity, like AMP does.

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

Subscribe