I'm working on optimizing the Interaction to Next Paint (INP) metric i discover there is a hight INP on the page with a summary of anchor links. These anchors allow users to jump to specific sections within the same page. According to my analysis through the Search Console, the INP values are moderately high, ranging from 200-250 ms, which I'm aiming to improve.
The anchor tags are implemented in a straightforward manner within the HTML, and I'm using CSS scroll-behavior: smooth; to enable a smooth scrolling experience when users click on these links. However, I suspect that this smooth scrolling might be contributing to the increased INP, as it introduces a delay between the user interaction and the final paint of the targeted section.
To address this, I'm considering changing the scroll-behavior from smooth to auto, hoping to reduce the presentation delay and, consequently, the INP. This change should make the scrolling instant, potentially lowering the INP by reducing the time it takes to travel from the click to the target section.
Before I make this change, I'm interested in learning from the community:
Has anyone experienced similar challenges with INP on pages using anchor links for navigation?Would changing the scroll-behavior to auto significantly impact the INP, or are there other factors at play that I should consider?Are there alternative strategies or best practices for optimizing INP on such pages without sacrificing the user experience of smooth scrolling?Any insights or experiences with optimizing INP, especially in contexts involving internal navigation via anchors, would be greatly appreciated.