What means that purple line?

Hey folks,

thanks for your great tool, i have one question for that i cant any answer anywhere (or i just missed it? :))

For what is the straight purple line, what does it show?

Please see the attached screenshot.

Best regards,
pablopaul

The purple line is the DOM Content Ready event (the width is the time it takes to execute any code atached to $(document).ready().

btw, you can save 50ms by using php flush command.

Avi.

Would be great if you can add this to the chart legend. I just spend a good amount of time to figure out the exact same thing.

Although the respective colors are missing, there is still a legend for the purple and light blue bars.

All,

Does this correspond to the domContentLoadedEventEnd from the W3C Navigation Timing Specification?

Also, some of our consumers of data would like to see the ‘Time-to-Interactive’ time, which I assume they got from seeing Keynote all the time.

The Keynote Definition is:

’ This is an approximation for when the page becomes fully interactive for the user. This corresponds to when the browser finishes processing the onload event. This is the loadEventEnd attribute of the Navigation Timing specification.’

WebPageTest has the LoadEventEnd metric in the csv/har files, is this the exact same metric?

If not, which WebPageTest metric should be used to as closely approximate the Time-to-Interactive time?

Thanks in advance,

Pete

The purple “line” is actually a bar that spans from the start to the end of the domContentLoadEvent (if a lot of code executes it can end up quite wide, spanning seconds even).

As far as finishing processing the onload event, yes that is loadEventEnd in the metrics (though the DocTime would be better even though it is the start of the load event). The navigation timing entries won’t handle javascript redirects and a few other edge cases that the DocComplete time would.

That said, the end of the onload event is a HORRIBLE proxy for being fully interactive.