okor / justice

Embeddable script for displaying web page performance metrics.
MIT License
1.45k stars 56 forks source link

domContentLoaded vs. window.chrome.loadTimes().firstPaintTime #40

Open jonascript opened 8 years ago

jonascript commented 8 years ago

Hi, First just want to say I really like this plugin and find it useful. It gives really easy access to important metrics.

I'm trying to investigate critical rendering and I was wondering how firstPaintTime compares to domContentLoaded and why you are using firstPaintTime and domContentComplete, but not domContentLoaded.

Does firstPaintTime actually match critical render or is just when something happens when anything starts to be painted on the screen? I've tried to find some docs on firstPaintTime but can't find anything specific and what it indicates.

On google's page regarding critical rendering time, it doesn't reference the paint time. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=en

For example, what would be the difference between what these two indicate?

1: ((window.chrome.loadTimes().firstPaintTime * 1000) - (window.chrome.loadTimes().startLoadTime*1000)).toFixed(0);

2: (window.performance.timing.domContentLoadedEventStart - window.performance.timing.domLoading)

Do you know which one of these would be closer to critical rendering time?