0

If you run confirm/alert/prompt functions and then update the screen after the function returns, the INP and CLS score will be very bad.

For instance, say I create a form to ask my students to enter their name, then I display some content after the input. After the user clicks "OK" to enter his/her name, the CLS and INS penalty score will boost.

$('button').click(()=>{
  var name =  prompt('enter your name:');
  $('#screen1').html(`${name} Hello!<p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p>`);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="screen1">



</div>
<button>
Enter Your Name
</button>

I think this is a Web vitals bug. But is there anything I can prevent this for damaging my web vitals score?

AGamePlayer
  • 7,404
  • 19
  • 62
  • 119

1 Answers1

2

For INP, this is something we're looking to fix before INP becomes a full Core Web Vitals next year: https://bugs.chromium.org/p/chromium/issues/detail?id=1435448

Technically the main thread is blocked while the confirm/alert/prompt is showing, which INP seeks to address, and the event handler is still running, hence why it currently flags. In general these prompts are discouraged for this reason. On the other hand though, a paint HAS happened and feedback HAS been given (which is what INP aims to measure) hence why we want to handle this, even if it's still discouraged.

For CLS, I am unable to see any shifts, even when running this outside of an iframe: https://www.tunetheweb.com/experiments/prompt/ Can you confirm you're definitely seeing CLS with this?

Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
  • It's weird, I can't reproduce it here on SO w/o iframe. I will do more testing and I think maybe it's my other mistakes. Thanks for letting me know that you are improving the INP issue. I'm glad that I don't need to develop customized alert/confirm/prompt since it's unnecessary. Thanks again Barry! – AGamePlayer Aug 09 '23 at 23:56
  • 1
    Well personally I’d still recommend those over the blocking ones, but depends if there’s any other background processing that can potentially happen while the alert/confirm/prompt shows. The native Dialog element makes this super easy now: https://web.dev/learn/html/dialog/ with more features than the basic alert/prompt/confirm alerts. – Barry Pollard Aug 10 '23 at 08:21
  • Oh, thanks for the tip on native dialog API. I will look into that! – AGamePlayer Aug 10 '23 at 14:26