Lighthouse: First Interactive need an explanation

[wizardnet972]

I'm trying to understand the logic of lighthouse.

There are three steps that indicate the performance right?

• First Meaningful Paint
• First Interactive
• Consistently Interactive

Let's talk about "First Interactive" state. when does lighthouse indicate that it's done waiting? when the all the scripts are loaded? when the DOMContentLoaded event starts firing/done? some other event? or maybe just after specific seconds?

[vinamratasingal-zz]

Hi! We have some docs that might be able to help:

CI: https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive
FI: https://developers.google.com/web/tools/lighthouse/audits/first-interactive
FMP: https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint

Let us know if you have questions after reading the docs.

[wizardnet972]

@vinamratasingal thank you for your quick reply.

Yes. I read all those links before I asked. but this is not understandable enough in my opinion.

What exactly does it mean? I still can not figure out when the lighthouse indicates pass or fail for the "First Interactive" stage.

The "First Interactive" link says:

Minimize the number of required or "critical" resources that must be downloaded or executed before the page can load.

According to what I understand from this quote the test should pass if the page load finished quickly.
But what If I run script from another library That I could not expect what it does? for example:
```js
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
somelib.scriptThatTakeMoreThen10MinutesToComplete();
});

This kind of script I never pass the test.
**So, If I understand correctly, what can I do?**

I made a test to understand when the lighthouse indicate that the stage was failed.
 ```js
function sleep(miliseconds) {
  var currentTime = new Date().getTime();
  while (currentTime + miliseconds >= new Date().getTime()) {
  }
}
scriptThatTake20SecondsToComplete() {
 setTimeout(() => {
      sleep(20000);
 },5000);
}
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
    scriptThatTake20SecondsToComplete();
});

[paulirish]

@wizardnet972 this recent deck should also help: Perf Metrics - #PerfMatters March 2018 - Google Slides

And the reference docs it mentions:

• Time To Interactive Explainer
• Time to Interactive: v1.0
• Time to First Interactive - Task Cluster Definition

---

also sounds like Patrick answered your concerns on gitter.