INP issues of a bare bone html page with Anchor tags

[Gandharv Jaggi]

Hi team,

We have a news article publishing website with a lot of html coming from server which we inject into our Next.js website using dangerouslySetInnerHTML. The said html has a lot of anchor tags leading to external website, internal url with target _blank and some hashes. 

Going through the various articles and guides available online, we have setup our Google analytics account to track the INP events.

We are based in India hence our user base is 75% Mobile and much of that constitutes of mid or low end devices. 

After analysing the data, we can see that a majority of INP is caused by the Anchor tags. which we pinned down to the ones with hashes.

We initially weren't able to reproduce the INP Issues on our devices, but throttling the CPU to 6x and enabling hardware concurrency in the performance panel of Dev tools gave us results close to those of our users.

After plenty tweaking and trials we decided to check INP for raw html file with the hash anchor tag functionality. 

Demo

It is kind of disheartening to see that such a trivial code is still causing INP. The real life use cased have way more DOM elements and CSS which only make the page slower.

Is there something on our end we can work on to fix this issue.

Thanks an Regards

Gandharv

[Michal Mocny]

Thank you for providing a demo-- However, I am not able to reproduce (tried MacOS and Android with the steps suggested).

Would it be possible to ask you to upload a trace file (trace.cafe) which showcases an example where INP is large here?

I do see a that the click on a hash URL will cause some same document navigation events to fire, and then force a layout for the whole document (I guess we need to know the scroll offset).  On the simple example page you shared these are very fast even with throttling, even on a mid-tier android, but could be slow on a heavy site especially one which might have document navigation event handlers (such as a spa router).  Though I haven't tested Next.js to see if they try to handle hash fragment links...

-Michal

--
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/da538c27-ac08-41c8-8f6e-f19664113f5bn%40googlegroups.com.