Opened 4 weeks ago
Last modified 8 days ago
#63486 new defect (bug)
Script modules should support being printed in the footer the same as classic scripts
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 6.5 |
Component: | Script Loader | Keywords: | has-patch |
Focuses: | javascript, performance | Cc: |
Description (last modified by )
Script modules are always printed at wp_head
in block themes. This makes sense in that script modules have the defer
behavior by default, so they do not block rendering. By placing them in the head
, they can be discovered early which is helpful when any script modules are in the critical rendering path. However, all script modules in WordPress core are for the Interactivity API which has server-side rendering as a top goal/requirement:
It must support server-side rendering. Server-rendered HTML and client-hydrated HTML must be exactly the same. This is important for SEO and the user experience.
Therefore, all script modules for the Interactivity API should be deprioritized to not compete with the loading of any resources needed in the critical rendering path, especially any image resource for the LCP element. One way to reduce the priority of the script modules is to add fetchpriority=low
to the script
tags (#61734), and the other way is to print the script module in the footer. Implementing both deprioritization techniques yields the highest improvement to LCP in my testing.
I published an in-depth post (Improve LCP by Deprioritizing Script Modules from the Interactivity API) with benchmarking results, showing that moving Interactivity API script modules from wp_head
to wp_footer
alone can improve LCP by ~7%.
Change History (4)
This ticket was mentioned in Slack in #core-performance by westonruter. View the logs.
3 weeks ago
This ticket was mentioned in PR #8995 on WordPress/wordpress-develop by @vipulpatil.
8 days ago
#4
- Keywords has-patch added; needs-patch removed
## Summary
This PR adds support for printing script modules in the footer.
It also works with
premap
loaded in the header.### Changes Made
$in_footer
to thewp_register_script_module
function.wp_default_script_modules
remains unchanged to avoid any potential breakage. If needed, we can conditionally set$in_footer
totrue
to print specific scripts in the footer.### Why
Interactivity API
module in the footer.