[wp-trac] [WordPress Trac] #63613: Bundled theme "twentytwentyone" menu toggle is not responsive until after "load" event

[WordPress Trac]

#63613: Bundled theme "twentytwentyone" menu toggle is not responsive until after
"load" event
---------------------------+-----------------------------
 Reporter:  gernberg       |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  trunk
 Severity:  minor          |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 The bundled theme "Twenty Twenty-One" primary navigation / menu toggle is
 not functional until the `load` event triggers on mobile.

 This means that the menu might be unusable for multiple seconds.

 Can be reproduced by:
 1. Pick a page with this theme and some heavier resources / images.
 2. Simulate a mobile browser + slow connection speed.
 3. Attempt to open the primary navigation between the DOMContentLoaded
 (DCL) and `"load"` events.

 Reading the code for `primary-navigation.js`, it looks to me like the only
 dependency for this script would be that the DOM element for the menu
 exists.

 As of #59316, the script is loading as `defer`, meaning that the required
 DOM elements for the menu will always be ready by the time `primary-
 navigation.js` executes.

 I would suggest to improve page responsiveness by removing the event
 listener completely and initializing the menu immediately when `primary-
 navigation.js` executes.

 One alternative considered would be to change from "load" to
 "DOMContentLoaded", but I don't think that brings any benefits compared to
 just getting rid of the event listener logic completely.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63613>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform