Repository navigation
Command Palette: Make every admin screen faster by loading the palette only when it is opened - #15871
rene-hermenau wants to merge 2 commits into
Conversation
Every admin screen enqueued `wp-commands` and `wp-core-commands`, which pull in about 40 block editor scripts and the `wp-components` stylesheet before `DOMContentLoaded`, although the palette is only needed once it is opened. Admin screens now enqueue a small loader instead. The palette's scripts and styles are printed into an inert template in the footer and added to the page on the first Ctrl/Cmd+K or click on the toolbar button. Screens that already load the commands package, such as the block editor, keep loading the palette up front, as does `wp_enqueue_command_palette_assets()`. On `options-general.php` this drops the scripts on the page from 80 to 39 and the median DOMContentLoaded with a warm cache from 127 ms to 57 ms. See #66642.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
|
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
|
A side effect of this PR is that plugins like User Switching that register their commands behind checks like this will find their commands missing from the palette: The PR also exposes an existing bug in the Fresh admin color scheme, where styles don't look correct until the command palette is invoked. I'm not seeing this in Playground, but I see it locally using To reproduce:
I asked Claude to debug this, and it found the following: |
Plugins that add commands to the palette, such as User Switching, enqueue their script only when `wp_script_is( 'wp-commands', 'enqueued' )` is true. Since the palette is now loaded on demand on classic screens, that check is false there and their commands were missing. The new `enqueue_command_palette_assets` action fires wherever the palette's assets are enqueued: right away on screens that load the palette up front, and in the admin footer on screens that load it on demand, where whatever is enqueued on it is printed into the palette's template and loaded together with the palette. `wp_enqueue_command_palette_assets()` now enqueues `wp-commands` and lets `wp_enqueue_command_palette_loader()` take the up-front path, so the action fires for its direct callers too. See #66642.
This makes wp-admin pages ready about twice as fast for everyone who works in the dashboard, by loading the Command Palette only when someone actually opens it instead of on every page.
On a Settings screen, the page becomes usable in 57 ms instead of 127 ms with a warm cache, and in 299 ms instead of 910 ms on a simulated slower device, with less than half the scripts. The palette works exactly as before: Ctrl/Cmd+K and the toolbar button still open it, and the editors are unchanged.
Why
Since 6.9, every admin screen enqueues
wp-commandsandwp-core-commands, which pull in about 40 block-editor scripts (React,wp-components,wp-block-editor,wp-core-data, …) and thewp-componentsstylesheet, although the palette is only needed after Ctrl/Cmd+K or a click on its toolbar button.How
wp_enqueue_command_palette_loader()replaceswp_enqueue_command_palette_assets()onadmin_enqueue_scripts. It builds the same settings and menu commands, attaches theinitializeCommandPalette()call towp-core-commands, and enqueues only the new 1.4 KBwp-command-palette-loaderscript.wp_print_command_palette_assets_template()prints the palette's not-yet-printed styles and scripts, with their inline scripts and translations, into an inert<template>in the footer, usingWP_Styles::do_items()/WP_Scripts::do_items().wp-commands(post editor, site editor) keep loading the palette up front.wp_enqueue_command_palette_assets()still loads everything up front for direct callers such as the Font Library and Connectors pages.enqueue_command_palette_assetsaction lets plugins add their commands without checkingwp_script_is( 'wp-commands', 'enqueued' ), which is now false on classic screens. It fires right away where the palette loads up front, and in the footer where it loads on demand; what is enqueued on it goes into the template and loads together with the palette.onclick(which needswp.data); the loader handles the click.wp-commandsstylesheet, since admin screens no longer load it up front.Measured on the local env,
wp-admin/options-general.php,SCRIPT_DEBUGoff, headless Chromium, 8 rounds, median DOMContentLoaded:<script src>on the pageThe first open of the palette on a page takes 200–260 ms with an empty cache and about 100 ms with a warm cache. Full numbers and method are in the ticket.
Tests: new
tests/phpunit/tests/dependencies/wpCommandPaletteLoader.php, updatedwpPrefetchAdminAssets.php, and a new Playwright spectests/e2e/specs/command-palette.test.js.Trac ticket: https://core.trac.wordpress.org/ticket/66642
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Implementation, tests, measurements and the ticket text, under my direction; I reviewed the change and take responsibility for it.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.