Make WordPress Core

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: westonruter's profile westonruter 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 westonruter)

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)

#1 @westonruter
4 weeks ago

  • Description modified (diff)

#2 @westonruter
4 weeks ago

  • Description modified (diff)

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

  • Added a parameter $in_footer to the wp_register_script_module function.
  • The printing of default scripts using wp_default_script_modules remains unchanged to avoid any potential breakage. If needed, we can conditionally set $in_footer to true to print specific scripts in the footer.

### Why

  • This change supports the ongoing effort to print the Interactivity API module in the footer.
Note: See TracTickets for help on using tickets.