Skip to content

#64076: Emoji loader script can be moved to the footer since non-critical #10145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
westonruter wants to merge 7 commits into from
Closed

#64076: Emoji loader script can be moved to the footer since non-critical #10145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4a334e8
Print emoji loader at wp_print_footer_scripts instead of wp_head
westonruter Oct 4, 2025
5afbdcb
Remove unnecessary then
westonruter Oct 4, 2025
d8845a0
Remove apparently unnecessary DOMReady and readyCallback
westonruter Oct 4, 2025
ca22ac9
Update comment to note importance of wp-emoji.js reading from window.…
westonruter Oct 4, 2025
407148e
Merge branch 'trunk' of https://github.com/WordPress/wordpress-develo…
westonruter Oct 6, 2025
5f83576
Clarify where wp-emoji.js is
westonruter Oct 6, 2025
4104301
Add eslint-env es6 comment
westonruter Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 3 additions & 12 deletions src/js/_enqueues/lib/emoji-loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* @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.

/**
Expand All @@ -12,15 +14,13 @@
* @property {?string} source.concatemoji
* @property {?string} source.twemoji
* @property {?string} source.wpemoji
* @property {?boolean} DOMReady
* @property {?Function} readyCallback
*/

const settings = /** @type {WPEmojiSettings} */ (
JSON.parse( document.getElementById( 'wp-emoji-settings' ).textContent )
);

// 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;

/**
Expand Down Expand Up @@ -422,17 +422,8 @@ new Promise( ( resolve ) => {
settings.supports.everythingExceptFlag &&
! settings.supports.flag;

// Sets DOMReady to false and assigns a ready function to settings.
settings.DOMReady = false;
settings.readyCallback = () => {
settings.DOMReady = true;
};
Comment on lines -425 to -429
Copy link
Member Author

@westonruter westonruter Oct 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code appears to be a vestige of when the emoji was first introduced in 4.2:

wordpress-develop/src/wp-includes/js/wp-emoji-loader.js

Lines 65 to 85 in 7e57307

settings.DOMReady = false;
settings.readyCallback = function() {
settings.DOMReady = true;
};
if ( ! settings.supports.simple || ! settings.supports.flag ) {
ready = function() {
settings.readyCallback();
};
if ( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', ready, false );
window.addEventListener( 'load', ready, false );
} else {
window.attachEvent( 'onload', ready );
document.attachEvent( 'onreadystatechange', function() {
if ( 'complete' === document.readyState ) {
settings.readyCallback();
}
} );
}

The logic was greatly simplified since then, now that DOMContentLoaded is supported by all supported browsers. Also, now that this script is loaded as a module, the DOM will have already been loaded anyway. So it seems like this logic and the corresponding logic in src/js/_enqueues/wp/emoji.js is now unnecessary.

} )
.then( () => {
// When the browser can not render everything we need to load a polyfill.
if ( ! settings.supports.everything ) {
settings.readyCallback();

const src = settings.source || {};

if ( src.concatemoji ) {
Expand Down
11 changes: 1 addition & 10 deletions src/js/_enqueues/wp/emoji.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,16 +277,7 @@
return twemoji.parse( object, params );
}

/**
* Initialize our emoji support, and set up listeners.
*/
if ( settings ) {
Copy link
Member Author

@westonruter westonruter Oct 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this script is loaded by the wp-emoji-loader.js, we know that window._wpemojiSettings will always be defined. Otherwise, if it is not, then the load function would never be executed. So this whole block of code doesn't make sense to me.

if ( settings.DOMReady ) {
Copy link
Member Author

@westonruter westonruter Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And since wp-emoji-loader.js now runs as a script module, it is deferred to execute at the point that the DOM is constructed, so we know it is ready to go.

load();
} else {
settings.readyCallback = load;
}
}
load();

return {
parse: parse,
Expand Down
6 changes: 5 additions & 1 deletion src/wp-includes/formatting.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5912,7 +5912,11 @@ function print_emoji_detection_script() {

$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' );
}
}

/**
Expand Down
Loading