Page is Interactive?

I read this definition of Page Is Interactive metric from below:

Question: I thought this metric would mean I cannot scroll up and down on the page or cannot click on any links on the page (based on the results I have below). But I am still able to do all of that. Then what exactly does having all of the red on Page is Interactive mean?

Scrolling will generally be fine since it is usually handled off-thread for most browsers as long as there are no active scroll events attached. Clicking should be delayed but not necessarily for the full duration of the red (though the first one looks like a single executing JS function so it would be for the full duration of that block).

The red blocks are any point where the main thread is blocked (including from input) for 100ms. A lot of separate 100ms events can make it look like a long block or a single really long event can also show up (which could be a way worse experience).

How did you measure being able to click on a link during one of the red blocks? You’d have to have a test machine handy with a similar CPU and connectivity and then try to click in the UI immediately after it starts to render.

I just tried it myself. Loading the page and clicking on links as fast as possible. They seem to click every time. Never seen a lag.

I do see the loading donut on the browser tab for longer, which I assume is because of the longer page load time.

I guess I am trying to figure out how much to worry about this Red block then. Mostly assuming this will impact SEO as Google will see this as well probably?