Yield on LiteYTEmbed click listener to reduce INP impact

[gilbertococchi]

RUM data on some project I have suggested that "lite-youtube.lyt-activated>button.lty-playbtn" interaction is causing large INP.

I would suggest yielding on the Click Event Handler doing something similar to this and improve the UX somehow like changing the Playback icon status etc to improve UX on top of INP.

this.addEventListener('click', function(event) {
            event.preventDefault();
            requestAnimationFrame(() => {
                setTimeout(() => {
                  if (this.classList.contains('lyt-activated')) return;
                  ...

[gilbertococchi]

Before Code Change (Note that code is happening in the YT Iframe Thread)

After Code Change

[paulirish]

Hmm.. Those look like other folks' event listeners.

Here's what that initial click on the play button looks like to me.. just a 20ms interaction:

[gilbertococchi]

I have RUM data that suggests it's caused by YT iFrame main thread code triggered by the play-btn click event with target attribution, no other event handlers.

It's the YouTube Iframe Thread code that increased the play-btn Click Event Handler blocking time.

It's true that my lite-youtube-embed fork acts differently, loading the YT Iframe in the background, so it's much faster to start playback.

I should have fixed it by adding the yield code to the Click event listener as described, will update you once I get new daily data.