Poor INP caused by <a>
202 views
Skip to first unread message
juewei lin
Jun 24, 2024, 3:47:55 AMJun 24
to web-vitals-feedback
Hi!
I'm trying to solve our INP problem. With the help of web-vitals, I find that a large number of poor INP are coused by <a> tag with href. We do have a lot of <a> tags on our home page.
Supposedly, href should not trigger INP, what is going on here? And what can I do?
Barry Pollard
Jun 24, 2024, 3:53:39 AMJun 24
to web-vitals-feedback
In general, plain old <a> elements do not tend to cause INP issues, but there are a few reasons why they might:
- Are there any event handlers attached to the <a> tags? For example, analytics to log external links that cause a lot of processing?
- Is there a beforeunload handler which popups up a "Please don't leave!" message that takes a lot of processing.
- Is this an SPA so the <a> elements are overridden and replaced with a so-called "soft navigation" handled by the JavaScript app and that takes time.
- Is the main thread just really, really busy so clicking on an <a> element doesn't register the click until much, much later anyway.
Can you repeat slow INP in a DevTools trace? Or using the Web Vitals extension? With 6x (or even 20x) slowdown if necessary?
Is it particular links causing this? Are they internal/external?
As you can tell without any detail it's difficult to diagnose further...
王康文
Jul 1, 2024, 9:33:34 PMJul 1
to web-vitals-feedback
Another insight could be provided here: Setting up GTM Trigger Type with 'Link' or 'All Element' did slightly contribute to some INP metrics in our test. Be sure to only trigger clicks on specific elements rather than all links or elements
Bernhard Finkbeiner
Jul 5, 2024, 4:10:49 AMJul 5
to web-vitals-feedback
Not sure if my message yesterday went through, I am not seeing it. Is there a way to configure gtag.js in a way that the trigger type is "Click - Just links"? I am trying to get rid of the click event handler on the document element.
Bernhard Finkbeiner
Jul 5, 2024, 4:10:53 AMJul 5
to web-vitals-feedback
is there a way to tell gtag.js to configure GA4 to use "Click - Just Links"?
王康文 schrieb am Dienstag, 2. Juli 2024 um 04:33:34 UTC+2:
王康文
Jul 10, 2024, 9:33:31 AMJul 10
to web-vitals-feedback
I think if you configure GA4 manually rather than inside Tag Manager, it all depends on your hard-coded event handlers in JavaScript. Gtag does not automatically set any event handlers other than the pageview event. So in your case, your site should not automatically bind any click handlers by default.
The picture I'm providing shows a setup by GTM container which has a configuration to trigger links using only a GUI. These mechanisms/tools tends to allow those who are not familiar with coding (e.g., Site Product Managers) to write any event, particularly a click event on a specific button, using CSS selectors. However, if not configured properly, it may cause unintended click handlers on all links or elements.
The picture I'm providing shows a setup by GTM container which has a configuration to trigger links using only a GUI. These mechanisms/tools tends to allow those who are not familiar with coding (e.g., Site Product Managers) to write any event, particularly a click event on a specific button, using CSS selectors. However, if not configured properly, it may cause unintended click handlers on all links or elements.
Reply all
Reply to author
Forward
0 new messages