Ever since Google replaced the First Input Delay (FID) with the Interactions to Next Paint (INP) metric, the developer community is looking for ways to understand the INP metric and improve it.
INP is now part of Core Web Vitals. This means that a bad INP will impact the SEO score negatively and cause the search ranking on Google to go down. As per Google, in order to measure and debug the INP, one needs to have the real user data of Core Web Vitals. While most RUM tools will give you INP core Web Vitals data to consume, Gemini stands out among the list of available RUM tools.
The Gemini RUM tool has always been known to have key extra features that help in solving the performance issues of the web site. It provides not just individual data for debugging but also aggregate direction to improve the overall performance.
Continuing on the same line, the Gemini RUM tool is now offering the ‘Interactions’ feature to understand, debug, and solve the INP problem.
INP Optimisation with Gemini
Gemini helps you understand your top page templates and their INP values as seen by Google for SEO ranking. Based on that, you can start identifying your templates to focus on improving INP. It will also tell you the user interactions and their contribution to the overall interactions. It will also tell you the slowest target elements on the page templates where the users are facing interaction delays and to add to that, will also tell you which javascripts are causing the delays. All of this in an aggregated way, considering all the interaction samples received from real users
Slowest Target Elements
Do not worry about how to find the interaction target elements on the pages. Gemini will also provide you with the xPath of the page as seen by the browser.
The user interactions involve executing some javascripts. These cause multiple Long Animation Frames. Each Long Animation Frame may happen due to multiple javascript executions.
If you want to debug and check details about how the interactions happened in one particular case, you can visit our scatter plot view and then go into the waterfall view.
INP WATERFALL
The individual Log Animation Frame Details sample will tell you even more important information to solve the problem. Gemini will tell you the individual javascript events, scripts, their timings and their code characters which caused the Long Animation Frames.
Javascript Execution Details
No need to worry if you have inline script code or external code; Gemini will identify the code section responsible for delays and precisely locate the beginning of the function.
Gemini provides the option to choose and access both aggregated and individual sample data using various filter criteria, including platform, time, page template, user action, page target elements, and JavaScript files.
On top of this rich functionality, if you are a customer of the premium subscription in Gemini, we provide an expert performance analysis every 2 weeks complementary to the customers. These calls now include debugging the INP data sessions for the customer website.
Our customers are finding this new ‘Interaction Details’ feature very useful and already improving their INP scores. If you are interested in the same, please contact us for a free trial.