"As a developer who is tasked with improving INP, I want to know what to focus on and be helped in understanding the problem / solving the issue, quickly, so I can get this sh1t done asap and spend my time on fun stuff"
"Don't overload me with all the usual line charts, histograms, tables etc. and leave it to me to figure it out. That is too time consuming!"
"First, give me the overview: What's the current situation, based on very recent INP data?"
INP p75 was 525 on mobile and 300 on desktop, based on 126 and 602 interactions respectively.
The 3 elements that stand out (many interactions, high INP) are #tool-form-main (92%), #tool-form>button.btn (7%) and #hostname-or-url (1%).
For all 3 elements, most of the INP time was spent in the Presentation Delay phase (68% - 73%).
Most interactions happened after page load finished (99%).
On mobile, INP was relatively high on devices with low memory but only 4% of devices had low memory.
"For each of the top 3 elements, give me the overview, the details and guide me (!) so I can get to a solution asap"
In this section, for each of the top 3 elements there is similar/same 'story telling', plus the data that backs up the statements in the story telling but only if that data adds value. Keep the noise down!
The details are important here because the developer is going to dive into one or all of these high INP elements.
Guidance is provided based on the data.
For example, if most INP time is in Input Delay phase, the guidance is tailored to that.
Selector: #tool-form-main
Text: innerText or similar (maybe)
Image: screenshot of the element
Summary: ...
Details: the service has processed all beacons for this element and presents various data (by dimension and dimension combos) and - important - the insights that are derived from the data.
If for example Load State is irrelevant, there will be no details/data for that.
The user gets:
Multiple percentiles (25/50/75/90), spot-on visualizations and clear, concise guidance including references to help docs.
Selector: #tool-form>button.btn
Selector: #hostname-or-url