How do I check more details of a long task in my Web Devtools Performance panel?

I'm trying hard to improve my INP score (from around 50).

I tried almost everything, but still couldn't work. Latest data from Cloudflare shows the same though I've even removed some features.

So I am using the Performance panel to detect those long tasks. I know that long tasks are key to optimize INP.

However, for this one, how can I dive into more details? Is the long task due to jquery itself (so I need to use vanilla js instead of jquery)? Or is the long task due to my bad use of $() function?

Is there any detailed tutorial on how to read the Bottom-Up report? Can somebody give me some help?

Thanks!

There's two ways you could start diving into this.

Bottom-Up tab

The entries are all summed up from the bottom of the call stack, so you're really interested in the Self Time column, not Total Time, since you want to find out the specific place that time was being spent (Self Time), not where time was being spent if you include time spent in any other code called within that time (Total Time).

So the readystatechange event handled within jquery was the root of a bunch of (total) time spent, but almost no (self) time occurred within the jquery code. It was the entry point but then immediately called whatever listener you (or a library) registered to fire on ready. That Function Call block at the top of the list has 91.9% of the Task time in its self time, so whatever that is, that's the culprit. Unfortunately there's no source link to click through and see what it was.

Flame chart

• The Task you have selected in the timeline is showing how the main thread is blocked
• The Task encompasses a few different pieces of main thread activity, but by far the most time is spent in that Event: load entry, which comes from the browser when the page and known resources are loaded
• The Event: load entry encompasses what looks like a few different kinds of activity, but again the vast majority of time is spent in a single event, Function Call.

So that Function Call taking up most of that part of the flame chart matches what the Bottom-Up view says. If you click on it in the flame chart and look in the "Summary" tab instead of the "Bottom-Up" tab, you'll get a few details. Usually a link to the source that ran in that time will be in there too, and you'll be able to see what code was running.

If there's not a link, though, I'd suggest

• clicking on any of the blocks in the flame chart below the Function Call entry to see if any of those have a source link. Because Chrome uses a sampling profiler, it can sometimes miss that actually one of those functions ran during most of that time, and so the one of those could be the culprit
• look at your own code to see what runs on $(document).ready() or equivalent. From the screenshot that does look like the entry point of this long task, so any code called by it could be the culprit

Just beware there could be more than one function called back by $(document).ready(), but (in this case) it appears only one function is taking a ton of time.