What do the colored vertical lines represent in the Overview timeline of the Performance tab?

7,722 views
Skip to first unread message

Lee Backstrom

unread,
Jul 28, 2017, 4:24:02 PM7/28/17
to Google Chrome Developer Tools
In the Overview timeline of the Performance tab in Chrome DevTools there are several colored vertical lines.  Can someone tell me what they represent?  I have not been able to find any documentation on this.  I assume that the blue line is DOMContentLoaded (929 ms) and the red line is the load event (2.12 s)?  What do the other colored lines represent?  


















Also, if the blue and red lines represent DOMContentLoaded and load events, why don't they match up with what's reported for those events on the Network tab?


Kayce Basques

unread,
Jul 31, 2017, 5:39:36 PM7/31/17
to Google Chrome Developer Tools
Hover over the Frames section to see the meaning of each bar.

Red: load

Blue: DOMContentLoaded

Green: First paint... i.e. when did the browser first paint pixels to the screen

Orange: First Meaningful Paint (FMP) Candidate... i.e. an attempt to calculate when the page appears meaningfully complete to the user

Kayce Basques

unread,
Jul 31, 2017, 5:45:28 PM7/31/17
to Google Chrome Developer Tools
Regarding the mismatch between Performance panel (top photo) and Network panel (bottom photo):

I think they do match up. There's a blue line to the left of the 1000ms mark in each photo. There's also a red line to the right of the 2000ms mark in each photo. The only weird thing I see is the blue mark around 1500ms in the Network panel photo. I'll ask somebody else to check that out.













Henri

unread,
Aug 29, 2017, 1:46:51 PM8/29/17
to Google Chrome Developer Tools
bumping this instead of bombarding on twitter (sorry). 

But I was just looking at this as well and I had some q?s:

  1. saw a dashed green line in the summary section, that was displayed as a solid orange in the filmstrip area. Why? (my tweet: http://bit.ly/2xvztjZ
  2. this same green dashed line was a FMP candidate and not outright FP. expound?
  3. I've also seen more FMP candidates throughout a timeline, after the 1st FMP. What does that imply?? 
Thx!

Kayce Basques

unread,
Aug 29, 2017, 2:16:20 PM8/29/17
to google-chrome-...@googlegroups.com
The "FMP Candidate" stuff is an experiment that is accidentally leaking into Performance recordings. You're not supposed to see them unless you enable the experiment. It's behind an experiment because, as you found out for yourself, the results are often confusing / incoherent.


--
You received this message because you are subscribed to a topic in the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chrome-developer-tools/3wS7qVQ6YY8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/5e8a23e3-fc15-4ca9-b63b-a104eba76644%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Henri

unread,
Aug 29, 2017, 4:30:30 PM8/29/17
to Google Chrome Developer Tools
I see. So I've stumbled on my own Russia investigation. ;) Thx.

I've had a few FP come up after FMP, which seems off (like 15ms after) - but I'll try to reproduce again. I've also had some FB marks that supply no info on hover, and this was on stable.

Anyhow, thx again.  

H!
Reply all
Reply to author
Forward
0 new messages