When authenticated, the toolbar's user button displays the username. This username is delivered via a #lazy_builder, which makes it possible for the toolbar to load without waiting on the logic that retrieves the username. I believe that was implemented to improve perceived performance/load time, but in this case it may be adversely impacting perceived AND actual performance more than it benefits it.
When the toolbar loads, before the lazy builder has completed, the user button is empty, and the icon is incorrectly positioned as the styles are dependent on the button having text content.
When the lazy builder completes, the icon is moved to the correct position and the width of the button changes. At best, the icon moving causes a visually jarring flicker that adversely impacts perceived performance. It may also require a reflow/repaint which would be an objective performance hit. The width of the button changing definitely causes a reflow/repaint due to the width changing. If there are items to the right of this button, it will slow the repaint process to the browser needing calculate the new positions.
These rendering performance problems could also be addressed with just CSS by min-width-ing the user button so the width is unchanged, but that would need account for long usernames and would result in big buttons for little names.
I removed the lazy builder for the user button title and it only seems to benefit the perceived load performance of the toolbar - and certainly stops an objectively expensive reflow/repaint.
Remove the lazy builder for the user button title?
| Comment | File | Size | Author |
|---|---|---|---|
| post-renderDisplayName.png | 50.79 KB | bnjmnm | |
| pre-renderDisplayName.png | 43.59 KB | bnjmnm |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !3207
Comments
Comment #3
bnjmnmComment #4
bnjmnmDiscovered after the fact that the issue this addresses overlaps with #2951268: Improve rendering account link in the toolbar. One of these issues should be closed as a duplicate and a solution approach agreed on. I like the approach here as there are fewer overall changes, it will work even if a theme styles the toolbar differently, and it addresses vertical and horizontal repaints, while the other issue only addresses vertical ones.
Comment #5
lauriiiRemoving the lazy builder could certainly help with the repaint but would likely cause other issues. 🤔 It looks like the removal of the lazy builder would require us to change the cache contexts because currently the only cache context that the
user_toolbaris setting isuser.roles:anonymous. The required cache context would beusersince the toolbar item contains the name of the currently logged in user.Adding the
usercontext would re-introduce #2899392: user_hook_toolbar() makes all pages uncacheable and should lead into\Drupal\Tests\toolbar\Functional\ToolbarCacheContextsTest::testCacheIntegrationfailing. 😭 Even with auto-placeholdering this would lead into more problems than it's solving because this would likely make the whole toolbar flicker. I'm personally leaning towards the approach similar to what is being proposed in #2951268: Improve rendering account link in the toolbar since it's less likely to have adverse side-effects.