Interactivity API: Hydration causes long task #58225
Labels
[Feature] Interactivity API
API to add frontend interactivity to blocks.
[Status] In Progress
Tracking issues with work in progress
[Type] Performance
Related to performance efforts
Description
When there are a number of interactive blocks on the page, there is a good chance that browsers will experience a significant long task caused by
init()
, especially on lower-powered devices.On a page with 20 interactive blocks and without any throttling on my HP Elite Dragonfly Chromebook (Intel i7), profiling a page load in DevTools results in a 64 ms long task (trace.cafe):
Not terrible, but when I throttle the CPU 6x then the task gets looooong at 309 ms (trace.cafe):
Reminder that a task is considered long if it is longer than 50 ms.
There is a discussion about lazy-hydration of interaction blocks in which @luisherranz acknowledges this:
However, lazy hydration may not be sufficient if there are too many interactive blocks in the initial viewport. To deal with this, the work in the
init()
function could be broken up so that iteration over an interactive block yields after hydration.Step-by-step reproduction instructions
I configured a site with 20 interactive blocks:
"buttonPosition":"button-only","buttonUseIcon":true,"isSearchFieldHidden":true
"openSubmenusOnClick":true,"overlayMenu":"always"
"openSubmenusOnClick":true,"overlayMenu":"never"
, where there are two submenus (each of which is an interactive block), so 2 interactive blocks here"displayPreview":true
"lightbox":{"enabled":true}
Then I opened DevTools and ran performance profiling with 6x CPU throttling and without any throttling.
Screenshots, screen recording, code snippet
No response
Environment info
WordPress 6.5-alpha-57345
Gutenberg 17.6.0-rc.1
HP Dragonfly Elite Chromebook
Twenty Twenty-Three theme
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: