[wp-trac] [WordPress Trac] #64076: Emoji loader script can be moved to the footer since non-critical

[WordPress Trac]

#64076: Emoji loader script can be moved to the footer since non-critical
-------------------------+--------------------
 Reporter:  westonruter  |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  6.9
Component:  Emoji        |    Version:  4.2
 Severity:  normal       |   Keywords:
  Focuses:  performance  |
-------------------------+--------------------
 This is a follow-up to #63842, which converted the emoji loader script
 from a blocking inline script to a script module. Since the emoji
 replacement cannot be done until `DOMContentLoaded` anyway, switching to a
 module makes sense since script modules are deferred to run right before
 DCL. Additionally, an emoji is exceedingly unlikely to be the LCP element,
 and therefore it doesn't make sense to delay LCP by running emoji
 detection logic in the `head` to block rendering. This is especially so
 since the emoji loader is a fallback solution for when the browser/OS
 doesn't support the emoji natively. When throttling CPU to emulate a low-
 tier mobile phone, the performance impact of switching to a script module
 was seen to result in a ~4% improvement to LCP and ~7% improvement to FCP,
 over 100 page loads of the Sample Page in Twenty Twenty-Five without any
 plugins active:

 ||= Metric =||= Before =||= After =||= Diff (ms) =||= Diff (%) =||
 || FCP (median) || 322.4 || 300.5 || -21.9 || -6.79% ||
 || LCP (median) || 407.4 || 391.9 || -15.6 || -3.82% ||
 || TTFB (median) || 58.4 || 59.0 || 0.6 || 1.11% ||
 || LCP-TTFB (median) || 348.7 || 333.4 || -15.4 || -4.40% ||

 But the script module is still in the head, even though it is not part of
 the critical rendering path. The emoji loader script involves about 3KB of
 markup when minified. Since the script is not critical, it could be moved
 from printing at `wp_head` to print at `wp_footer` instead, leaving actual
 critical markup to remain in the head: stylesheets.

 When a script module is moved to the footer, an additional ~1.2%
 improvement is gained in LCP and ~1.8% in FCP when benchmarking without
 CPU throttling on an emulated Fast 4G connection over 100 page loads:

 ||= Metric =||= wp_head =||= wp_footer =||= Diff (ms) =||= Diff (%) =||
 || FCP (median) || 429.1 || 421.4 || -7.70 || -1.8% ||
 || LCP (median) || 526.3 || 519.9 || -6.40 || -1.2% ||
 || TTFB (median) || 59.35 || 58.5 || -0.85 || -1.4% ||
 || LCP-TTFB (median) || 466.35 || 461.8 || -4.55 || -1.0% ||

 There is also an improvement when benchmarking with a Slow 3G network
 emulation:

 ||= Metric =||= wp_head =||= wp_footer =||= Diff (ms) =||= Diff (%) =||
 || FCP (median) || 4902.4 || 4870.9 || -31.55 || -0.6% ||
 || LCP (median) || 4997.2 || 4972.9 || -24.30 || -0.5% ||
 || TTFB (median) || 60.6 || 60.6 || +0.1 || +0.1% ||
 || LCP-TTFB (median) || 4936.1 || 4912.7 || -23.40 || -0.5% ||

 (I may have obtained these benchmarks with `SCRIPT_DEBUG` enabled, so
 amount of bytes in involved would be more since no minification would be
 applied in production. So the impact to LCP/FCP may be less.)

 In any case, there seems to be no downside to moving the emoji loader
 script to print at `wp_footer` and potentially small improvements to LCP
 and FCP.

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