INP - some confusing moments

[Bohdan Kladkovyi]

Hi there!

I have some question for this community and pretty hope you have such expertise.

1. Our team started research of new INP metric and we have found some confusing issues with target_blank on <a/> tag? Might someone knows how to fix it or some best practises? We tried to play with presentation delay and remove active state from link after click, it works, but it is not so elegant solution

2. Maybe someone used or uses web-workers on your projects to minimize main-thread work. Our stack Next.js and React.  Could you share your experience?  

3. Are there who knows how to measure responsiveness(INP) as a lab metric(not field data from Crux) not using chrome extensions? Because it is really tough to understand real key problem of responsiveness


Thanks a lot!  


Bohdan

[Michal Mocny]

On Thu, Sep 1, 2022 at 5:59 AM Bohdan Kladkovyi <bohdan.k...@amo.tech> wrote:

Hi there!

I have some question for this community and pretty hope you have such expertise.

1. Our team started research of new INP metric and we have found some confusing issues with target_blank on <a/> tag? Might someone knows how to fix it or some best practises? We tried to play with presentation delay and remove active state from link after click, it works, but it is not so elegant solution

You didn't mention what the issue is, but I suspect it's this bug.  Basically, we measure from Interaction to Next Paint, but when you open a link in a new tab, the previous tab contents does not typically get a new frame presentation.  We mis-report this time to Event Timing at the moment and are working on a fix in Chrome.

Hopefully this is the issue?

 

2. Maybe someone used or uses web-workers on your projects to minimize main-thread work. Our stack Next.js and React.  Could you share your experience?

We have had some anecdotes reported here, but I would also love to hear more.

Generally, web workers do help with web performance and can help with responsiveness, especially if they take long tasks off the main thread and if that helps reduce Input Delay.

However, for INP specifically, because we are measuring the critical rendering path after a single interaction, very often that critical path is constrained to Events updating state, state update causing render update, causing page DOM update, all of which takes time (and especially on complex framework pages such as you may build with next.js).  That means that the type of work you can typically move off thread with workers is not typically inside your event handlers, render update, or framework code.

In practice, I have found the the simplest strategies for improving INP on React sites are:

• Confirm you do not suffer from input delay (web-workers, incremental rendering, concurrent features, suspense boundaries, can all help here)
• Split up the work you do in event handlers: critical update first, non-critical remainder later (I think transitions help here)
• Ensure that any rendering updates to the page, even if your app + React can apply them quickly, are not too heavy for the browser rendering/GPU to present within deadline.  I see this with rich animations or large page updates in one frame, etc.

But I have limited experience and maybe folks have had more success there.

3. Are there who knows how to measure responsiveness(INP) as a lab metric(not field data from Crux) not using chrome extensions? Because it is really tough to understand real key problem of responsiveness

You can use DevTools on Chrome as of M105 to visualize Interactions right from performance traces.  It doesn't just tell you the overall INP score, but it also shows the duration of every part of every interaction.

If you do not want to use the Chrome extension, you can also just use the Event Timing API (something like this) and add your own way measure.

 

Thanks a lot!  


Bohdan

--
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/453045b5-1aa8-4929-a201-235461c5ee76n%40googlegroups.com.

[Angie Biron Ren]

Is INP measured for hyperlink clicks/taps that load the page in the same window? I haven't tested myself yet, but it seems flawed if that's true since it would require a <200ms TTFB which is ambitious for some servers let alone for requests on slow connections. 

[Michal Mocny]

On Fri, Sep 9, 2022 at 10:24 AM 'Angie Biron Ren' via web-vitals-feedback <web-vital...@googlegroups.com> wrote:

Is INP measured for hyperlink clicks/taps that load the page in the same window? I haven't tested myself yet, but it seems flawed if that's true since it would require a <200ms TTFB which is ambitious for some servers let alone for requests on slow connections. 

INP will measure the click on the link -- but it wont wait for the network reply or the new page to load -- it only measures the interaction of clicking the link itself.  (i.e. to make sure the link can appear clicked, etc).

 

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/f1a4e102-b578-4a3f-bf89-ceeaacca7c9an%40googlegroups.com.

[Bohdan Kladkovyi]

Hi! Thank you so much! I really appreciate you answering me! Very helpful!