Struggling with yielding on mobile

[Adam Cable]

Hi,

We're trying to use the await yieldToMain(); pattern to help with INP.

It works well on Chrome desktop, but strangely it's not particularly reliable on mobile.

A test page is @ https://www.adsar.co.uk/inp/ which shows the differences between using requestAnimationFrame and await yieldToMain();

Should see a flash of yellow before turning green.

Any ideas?

Thanks,

Adam

[Barry Pollard]

Can you explain a bit more about "it's not particularly reliable on mobile"? How are you measuring this?

FYI to remove performance differences between devices, you might want to change your slowCode to use timestamps instead:

    function doSlowInteraction() {
        var start = new Date();
        while(new Date() - start < 200) {
          // Do nothing
        }
    }

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/85a953a7-3044-4057-aa36-cf4f6b4cb97en%40googlegroups.com.

[Adam Cable]

Thanks Barry, you can see a video in action @ https://www.adsar.co.uk/inp/inp.mp4

I'm not measuring, but it's the visual feedback (or lack of!) that's the issue. You should be able to see the touches in the video above :)

Adam

[Barry Pollard]

So I can repeat this issue on Android.

I added a tweak to the demo here: https://www.tunetheweb.com/experiments/yield/ to log button clicks.

A few points to note:

- The rAF call explicitly waits until the next animation frame

- The Yield call does not use rAF (though no reason it couldn't be made to!) so it doesn't necessarily wait until the next animation frame.

- Both calls, we see the button click registering and adding the "Button clicked" output. So both are "reliable" in that the code is executed.

So it appears to me that Android just sometimes includes the setTimeout call in this animation frame and therefore both the updating of the background colour to yellow, and the reverting to green, happen in the same animation frame and so no change in colour is actually painted or seen. I'm not sure why Android does this more than Desktop (interestingly enough I can't get Safari to do this on iOS), but imagine it's a performance optimization to try to reduce the number of paints by more aggressively bundling multiple tasks into one animation frame where it can. However, as I say, both are "reliable" in that the code is executed - just your demo cancels out the update so when merged no change is seen.

If you explicitly want a paint to happen in between then you should use rAF in the yieldToMain function. I've added a third button in my demo that does this and you can look at the code to see that working.

Thanks,

Barry

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/cb33e0d1-2ea9-4434-aecb-f0330c5addd0n%40googlegroups.com.

[Adam Cable]

Thank you for your insights, Barry, really appreciated!

Just one final question if I may - lots of our legacy code isn't built with "async" javascript functions - so I assume wrapping our code in rAF&setTimeout is the only way of yielding?

Thanks,

Adam