Tracking script causes forced reflow of the page

[mquandalle]

Past Issues Searched

• [x] I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• [x] This is a bug report and not a feature request, nor asking for self-hosted support

Using official Plausible Cloud hosting or self-hosting?

Plausible Cloud from plausible.io

Describe the bug

I noticed the following performance issue in Google PageSpeed insights for my site: https://pagespeed.web.dev/analysis/https-bonforfait-fr-forfait-mobile/cb3p4e98kp?utm_source=search_console&form_factor=mobile&hl=en

This is caused by the the Plausible tracking script:

https://github.com/plausible/analytics/blob/1531386b767c6827216ab63d87fa447c46d37bf7/tracker/src/engagement.js#L129-L136

This code is used in the getDocumentHeight function to track scrolling position.

Expected behavior

I'd like to avoid performance this penalty.

Maybe it is possible to wrap the getDocumentHeight function in a requestAnimationFrame? And to cache its value?

An alternative would be having the option to disable scroll tracking.

Screenshots

No response

Environment

[apata]

Thanks for your well formed report, @mquandalle!

It is possible to wrap those functions in requestAnimationFrame. I gave it a shot, but I wasn't able to determine whether that actually helped with the forced reflow issue. Whether that violation is reported depends on the UI and interactions.

If you could provide a minimal example with steps to reproduce where this violation comes up every time, I think it'd be a lot easier to get to the bottom of this.

[mquandalle]

It’s not any easier for me than for you to create a minimal reproduction of this issue.

From what I understand, calls like offsetWidth trigger a forced reflow of the page, which can be a performance problem for pages that are expensive to render. So ideally, the script should avoid these "layout thrashing" calls as much as possible. Maybe caching, async execution (after main tasks), or adaptive throttling could help.

I suspect this is contributing to performance issues on my page and preventing it from meeting Google’s Core Web Vitals INP criteria.

As an alternative, it might be useful to have an option to opt out of scroll height tracking, which I personally never use or need (and might now be easier to implement with the customizable tracking script and optional measurements).