Changeset 60902

Timestamp:

10/06/2025 04:49:13 AM (6 days ago)

Author:

westonruter

Message:

Emoji: Move printing of emoji loader script module from wp_head to wp_print_footer_scripts.

This removes ~3KB of HTML from the critical rendering path of markup in the head, thus marginally improving FCP/LCP in slower connections. It also fixes a Firefox issue with script modules by ensuring the emoji loader script module is printed after the importmap.

Existing plugins that disable emoji by unhooking the action as follows will continue to work as expected:

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

Additionally, some obsolete DOMReady and readyCallback logic was removed. A script module (as it has a deferred execution) only ever executes when the DOM is fully loaded. This means there was no need for a DOMContentLoaded event which was removed in [60899], and the remaining ready detection logic can be removed.

Follow-up to [60899].

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10145.

Props westonruter, wildworks.
Fixes #63842.
Fixes #64076.

Location:

trunk/src

Files:

• js/_enqueues/lib/emoji-loader.js (modified) (4 diffs)
• js/_enqueues/wp/emoji.js (modified) (1 diff)
• wp-includes/formatting.php (modified) (1 diff)

trunk/src/js/_enqueues/lib/emoji-loader.js

@@ -2 +2 @@
  * @output wp-includes/js/wp-emoji-loader.js
  */
+
+/* eslint-env es6 */
 
 // Note: This is loaded as a script module, so there is no need for an IIFE to prevent pollution of the global scope.
@@ -13 +15 @@
  * @property {?string} source.twemoji
  * @property {?string} source.wpemoji
- * @property {?boolean} DOMReady
- * @property {?Function} readyCallback
  */
 
@@ -21 +21 @@
 );
 
-// For compatibility with other scripts that read from this global.
+// For compatibility with other scripts that read from this global, in particular wp-includes/js/wp-emoji.js (source file: js/_enqueues/wp/emoji.js).
 window._wpemojiSettings = settings;
 
@@ -423 +423 @@
             ! settings.supports.flag;
 
-        // Sets DOMReady to false and assigns a ready function to settings.
-        settings.DOMReady = false;
-        settings.readyCallback = () => {
-            settings.DOMReady = true;
-        };
-    } )
-    .then( () => {
         // When the browser can not render everything we need to load a polyfill.
         if ( ! settings.supports.everything ) {
-            settings.readyCallback();
-
             const src = settings.source || {};
 

trunk/src/js/_enqueues/wp/emoji.js

@@ -278 +278 @@
         }
 
-        /**
-         * Initialize our emoji support, and set up listeners.
-         */
-        if ( settings ) {
-            if ( settings.DOMReady ) {
-                load();
-            } else {
-                settings.readyCallback = load;
-            }
-        }
+        load();
 
         return {

trunk/src/wp-includes/formatting.php

@@ -5913 +5913 @@
     $printed = true;
 
-    _print_emoji_detection_script();
+    if ( did_action( 'wp_print_footer_scripts' ) ) {
+        _print_emoji_detection_script();
+    } else {
+        add_action( 'wp_print_footer_scripts', '_print_emoji_detection_script' );
+    }
 }