Lighthouse: Lighthouse Speed Index 100% visually completed frame definition

[MigCoder]

I'm looking for a way to optimize our website's Speed Index score on Lighthouse

I found this helpful article describe Speed Index metric very well, and help me understand how Speed Index is calculated.

https://calendar.perfplanet.com/2016/speed-index-tips-and-tricks/

But there is a key concept not being described clear on the article, and I search for a lot of other Speed Index related blogs still can't found the answer.

What is the 100% visual completeness frame?

We all know the First Frame is 0% VC because it's blank, but the VC keep increasing during the page load process, so what frame will be consider as 100% visual completeness?

The definition of 100% VC frame is important because it's the baseline for calculate all other frame's visual completeness.

If I have a page that simply print from 1 to 100 with interval 100ms and just enough to fill in the viewport, will the 100% VC frame be the frame that number 100 is printed?

[patrickhulce]

Simply put: it is the last frame that was observed

In the case of Lighthouse, we wait until page load event has fired, firstContenfulPaint has fired, the network has been quiet for at least 1s and there have been no long tasks (JS execution of more than 50ms at once) for at least 1s. So whatever we saw when all those conditions were met will be considered 100% visual completeness

[MigCoder]

Thanks for the info @patrickhulce ! It's much clear now.

In order to help other guys understand the concept, Network has been quiet for at least 1s means there is not more than 2 network requests at the same time.

[mac9416]

Simply put: it is the last frame that was observed

While it's true that the last frame is considered "visually complete," isn't it true that the "visually complete" metric refers to the first frame which "matches" the last frame?

I break down my interpretation of that calculation here: https://stackoverflow.com/a/55633660/684776

[patrickhulce]

isn't it true that the "visually complete" metric refers to the first frame which "matches" the last frame?

Yes, if you are asking at what point in time is the page "visually complete", then it's the timestamp of the first frame that matches the last frame that was observed.