Lighthouse: "First meaningful paint, "First Interactive" values are mapped to

[vikramvi]

Please refer to 2 screen shots attached.

1. First one is from Network tab under chrome tool

1. Second one is report generated by lighthouse tool

Please clarify how does "First meaningful paint, "First Interactive" values can be mapped to values seen under Network tab ?

[vinamratasingal-zz]

Hi Vikram- I think there might be some confusion here. The values for First Meaningful Paint don't map to network activity, but rather map to paint values. Therefore, there shouldn't be a consistency with what you see in the networks tab and in the LH report.

[vikramvi]

@vinamratasingal Thanks for answer but still it's not clear to me

1. Without LH how to view values of First meaningful paint, First Interactive in chrome developer tools ?

2. Can you please explain in detail the terms First meaningful paint, First Interactive ?

[patrickhulce]

Answers to your questions are below @vikramvi but they may not be exactly what you were hoping for. Lighthouse provides these metrics to you precisely because they are relatively difficult to obtain on your own and on the cutting edge :)

1. You can see FMP in DevTools by first enabling the "Timeline: paint timing markers" setting and recording a trace of your page load in the performance tab.
   
   You cannot see first interactive anywhere, but on a recorded trace in the performance tab you can examine the trace manually to determine where First Interactive should be by following the algorithm outlined in "TTI explainer" link.

2. FMP explainer
   TTI explainer

[vikramvi]

Thanks for detailed info @patrickhulce

[shuangq]

@patrickhulce Are the experiment settings still available in later version of Chrome? I'm using ver 67 but didn't find 'Experiments' in the settings. Or do I need to turn it on somewhere else?

[patrickhulce]

@shuangq you'll need to enable DevTools experiments Chrome-wide at chrome://flags, beware all the usual caveats when playing with experimental features :)

[shuangq]

@patrickhulce Thanks a lot 😃

[lmakarov]

@patrickhulce has this changed in Chrome 68 (Version 68.0.3440.84 (Official Build) (64-bit), Mac)?

After enabling "Developer Tools experiments" in chrome://flags/ I still don't see an option to enable Timeline: paint timing markers in DevTools > Settings.

[lmakarov]

Finally found the answer to this. You have to press "Shift" six times in DevTools > Settings > Experiments to uncover the hidden experiments.

[shrutiseth]

Hello @lmakarov
Am still not getting the option for Timeline: paint timing markers in DevTools > Settings.

[shrutiseth]

I want to get FMP and FCP for a URL. Please help

[patrickhulce]

@shrutiseth it might have been taken out of experiments. I'm seeing a much better UI for the timing markers now in Canary 😍