[wp-trac] [WordPress Trac] #63842: Emoji detection inline script introduces needless parser/render blocking

[WordPress Trac]

#63842: Emoji detection inline script introduces needless parser/render blocking
-------------------------------------+-------------------------------------
 Reporter:  westonruter              |       Owner:  westonruter
     Type:  enhancement              |      Status:  closed
 Priority:  normal                   |   Milestone:  6.9
Component:  Emoji                    |     Version:  4.6
 Severity:  normal                   |  Resolution:  fixed
 Keywords:  has-patch has-unit-      |     Focuses:  javascript,
  tests                              |  performance
-------------------------------------+-------------------------------------
Changes (by westonruter):

 * status:  accepted => closed
 * resolution:   => fixed


Comment:

 In [changeset:"60899" 60899]:
 {{{
 #!CommitTicketReference repository="" revision="60899"
 Emoji: Convert the emoji loader from an inline blocking script to a
 (deferred) script module.

 This modernizes the emoji loader script by converting it from a blocking
 inline script with an IIFE to a script module. Using a script module
 improves the performance of the FCP and LCP metrics since it does not
 block the HTML parser. Since script modules are deferred and run
 immediately before `DOMContentLoaded`, the logic to wait until that event
 is also now removed. Additionally, since the script is loaded as a module,
 it has been modernized to use `const`, `let`, and arrow functions. The
 `sourceURL` comment is also added. See #63887.

 The emoji settings are now passed via a separate `script` tag with a
 `type` of `application/json`, following the new "pull" paradigm introduced
 for exporting data from PHP to script modules. See #58873. The JSON data
 is also now encoded in a more resilient way according to #63851. When the
 `wp-emoji-loader.js` script module executes, it continues to populate the
 `window._wpemojiSettings` global for backwards-compatibility for any
 extensions that may be using it.

 A new `uglify:emoji-loader` grunt task is added which ensures `wp-
 includes/js/wp-emoji-loader.js` is processed as a module and that top-
 level symbols are minified.

 Follow-up to [60681].

 Props westonruter, jonsurrell, adamsilverstein, peterwilsoncc.
 See #63851, #63887.
 Fixes #63842.
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63842#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform