getsentry
Configure document-policy: js-profiling has a 30% impact on page load performance.
Is there an existing issue for this?
- [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- [x] I have reviewed the documentation https://docs.sentry.io/
- [x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/react
SDK Version
8.27.0
Framework Version
16
Link to Sentry event
No response
Reproduction Example/SDK Setup
No response
Steps to Reproduce
Configure document-policy: js-profiling has a 30% impact on page load performance.
Expected Result
This exceeds the 5% impact mentioned in the document.
Actual Result
How should I optimize it?
Hi @HaoZhouInRC! Could you share how you measured this performance outcome?
Hi @chargome We're gathering the performance tracing data and will be shared with you soon.
After enabling JS-Profiling, multiple PerformanceLongAnimationFrameTiming entries appear during page refresh, causing significant time fluctuations.
Explanation of Metrics
-
data.ready.messages.LoAFs
Represents the value of LoAFs (PerformanceLongAnimationFrameTiming) in the context of a refresh. For detailed documentation, refer to the MDN Web Docs on PerformanceLongAnimationFrameTiming. -
data.ready.messages
This is a business metric used to measure the loading time of our messaging service. -
data.ready.messages-LoAFs
Represents the value ofdata.ready.messagesminusLoAFs.
On
| Metric | min | top50 | mean | top90 | max |
|---|---|---|---|---|---|
| data.ready.messages.LoAFs | 3188 | 3743 | 3820.474 | 4378.2 | 4736 |
| data.ready.messages | 28244 | 30270 | 30155.316 | 31355.2 | 32921 |
| data.ready.messages-LoAFs | 24901 | 26286 | 26276.895 | 27286.4 | 28600 |
Off
| Metric | min | top50 | mean | top90 | max |
|---|---|---|---|---|---|
| data.ready.messages.LoAFs | 123 | 194 | 201.667 | 268.3 | 329 |
| data.ready.messages | 25706 | 27196 | 27599.736 | 29128.1 | 29717 |
| data.ready.messages-LoAFs | 25666 | 26986 | 27399.316 | 28962.8 | 29520 |
Does this impact happen when you also include the Sentry SDK with profiling? Or when you load a page (without Sentry) with the js-profiling document policy?
Does this impact happen when you also include the Sentry SDK with profiling? Or when you load a page (without Sentry) with the
js-profilingdocument policy?
Just enable the comparison of js-profiling.
@HaoZhouInRC so there's overhead even without Sentry on a page load, just by adding the header?
Could you provide a reproduction repo or stackblitz where we can further investigate this please?
Just add the js-profiling in repsonse header.
Does Sentry have performance comparison data for response headers with and without the document-policy: js-profiling?
@kasniRC we can't really do anything about that, that's a browser vendor thing.
We don't have performance comparison data for that to the best of my knowledge. The browser profiling integration is still in beta and we don't have immediate plans to work on it.
@kasniRC Can you share how you collect this information? We need to be able to replicate it ourselves before we can report this upstream. We do have monitoring of our own applications that use profiling (long task monitoring), and we haven't detected anything similar. The first step we need to ensure here is that the data you are collecting is correct and that there isn't anything else that is causing this.
There is a thread on the spec repository where Paul Irish did some measurements on the overhead which came down to roughly 3%, this is more in line what we would expect.
@JonasBa we added performance.mark() at where we want to measure. The first mark is under the first
quick update: I re-classified this as an improvement or rather "not a bug" because this isn't an issue in the sentry browserProfilingIntegration but rather an issue with Chrome.
@JonasBa not sure if you investigated this further or filed a bug in chrome but feel free to close this.
