[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:  accepted
 Priority:  normal                   |   Milestone:  6.9
Component:  Emoji                    |     Version:  4.6
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  javascript,
  needs-unit-tests                   |  performance
-------------------------------------+-------------------------------------
Description changed by westonruter:

Old description:

> The inline script used for emoji detection, output in the `head` by
> `_print_emoji_detection_script()`, needlessly adds parser/render blocking
> to the page. If emoji loader already waits for `DOMContentLoaded` before
> it proceeds to load the add load the `wp-emoji.js` and `twemoji.js`
> scripts. This means the inline script need not be in the `head` at all.
> It could be moved to the footer, and it would also be better if it were
> added as an inline script module so that its execution is deferred until
> the DOM has loaded. Similarly, the emoji settings object exported from
> PHP need not be added as an inline script but it can instead be
> [https://core.trac.wordpress.org/ticket/58873#comment:4 output as JSON]
> to be parsed when the emoji detection script module executes.
>
> This is closely related to #58472 which eliminated a long task in the
> emoji loader which caused significant render blocking on low-tier
> devices.

New description:

 The inline script used for emoji detection, output in the `head` by
 `_print_emoji_detection_script()`, needlessly adds parser/render blocking
 to the page. If emoji loader already waits for `DOMContentLoaded` before
 it proceeds to load the add load the `wp-emoji.js` and `twemoji.js`
 scripts. This means the inline script need not be in the `head` at all. It
 could be moved to the footer, and it would also be better if it were added
 as an inline script module so that its execution is deferred until the DOM
 has loaded. Similarly, the emoji settings object exported from PHP need
 not be added as an inline script but it can instead be
 [https://core.trac.wordpress.org/ticket/58873#comment:3 output as JSON]
 (as is the method employed for script modules) to be parsed when the emoji
 detection script module executes.

 This is closely related to #58472 which eliminated a long task in the
 emoji loader which caused significant render blocking on low-tier devices.

--

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