[Bug]: INP issue in Google Search Console

Expected Behavior

No INP issues in Google Search Console, INP below 200ms

Current Behavior

Google Search Console (Core Web Vitals) reports a problem with INP: "INP issue: longer than 200ms (mobile)". The problem regards the action of pushing Accept button. You can confirm the problem with debugbear inp-debugger report. Correct me if I'm wrong, but I suspect that click action triggers some code that takes long to process (long in terms of INP metric).

consent

Duration breakdown: Input Delay | 28 ms Processing Time | 50 ms Presentation Delay | 130 ms

I might have found the bottleneck, however the script is minified and thous hardly readable. The click event takes a lot of time.

Recalc recalc2

There is as whole article on this topic at https://web.dev/articles/cookie-notice-best-practices

Steps to reproduce

Either look into your Google Search Console - Core Web vitals Report, or use debugbear inp-debugger report.

Proposed fix or additional info.

The proposed solution is to defer code execution. So visually code looks like it has been executed successfully while some work is still underway in the background.

The logic is as follows:

function saveSettings () {
  // Do critical work that is user-visible:
  validateForm();
  showSpinner();
  updateUI();

  // Defer work that isn't user-visible to a separate task:
  setTimeout(() => {
    saveToDatabase();
    sendAnalytics();
  }, 0);
}

Version

3.0.0

On which browser do you see the issue?

No response

orestbida / cookieconsent