Add missing parsing time #541
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kpelelis
requested changes
Mar 29, 2024
packages/web-sdk/src/instrumentations/performance/performanceUtils.ts
Outdated
Show resolved
Hide resolved
packages/web-sdk/src/instrumentations/performance/performanceUtils.ts
Outdated
Show resolved
Hide resolved
kpelelis
approved these changes
Apr 2, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
When comparing page-load time with time spent in the browser, let's say dom and render timings + response time, there is notable delta between the sum of the latter timings and page-load time.
After some investigation, the results are:
Faro is working correct and we derive all timings as they should be, but why the delta?
We did some manual math and it turns out that the delta is mostly related to the time the browser needs to parse the document.
So the plan is calculate parser time as well.
How to calculate the parser time
Unfortunately the current performance timeline doesn't provide and event to retrospectively get the timestamp when the parser is starting it's work. In the image below you can see that we have
responseEndfollowed bydomInteractive.One could argue that we simply can use
domInteractive - responseEnd, but this can not be used because the browser may start parsing even before the last bit of the response has arrived.When reading the docs for domInteractive we see that this property represents the time immediately before the documents ready state is set to "interactive"
So let's have a look if we can utilize the documents
readyStateto get that timestamp.Turns out: yes, but!
When the parsers start it's work the
document.readyStateproperty changes to 'loading' (see mdn Document: readyState property).This could be a suitable strategy in case we fetch the
readyStateat the beginning of the<head>of theindex.htmlfile.But this is not working for us because we can't control when Faro is initialized. Some user may defer loading and so on.
Also we need a good mechanism to ensure that fetching the
readyStateis done before everything else.Another option would be to put this work on the user side and have user adding extra logic specific to enable use fetching that timestamp. Even if we provide copy&paste code this is no option and very error prone because people will likely forget to do that.
PerformanceTiming: domLoading property to the rescue
The old, deprecated,
performance.timingobject provides thedomLoadingproperty which is moment when the parser is starting its work.performance.timing.domLoading is deprecated but still supported in all browsers.
According to the w3 docs for domLoading the reason for the deprecation is:
Solution
The
domLoadingproperty can be used to calculate the parser time.Even if the metric is different across user agents I still see value in providing the information and close the gap in numbers mentioned above.
One downside is that we are using a deprecated API, so we need to:
What
domLoadingpropertyLinks
Checklist