[wp-trac] [WordPress Trac] #64259: Convert emoji detection script from inline script module to external script module

[WordPress Trac]

#64259: Convert emoji detection script from inline script module to external script
module
-------------------------+--------------------------
 Reporter:  westonruter  |       Owner:  (none)
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  7.0
Component:  Emoji        |     Version:  4.2
 Severity:  normal       |  Resolution:
 Keywords:               |     Focuses:  performance
-------------------------+--------------------------
Description changed by westonruter:

Old description:

> This was raised by @jonsurrell in [ticket:64076#comment:8]:
>
> > This makes me wonder why this emoji script is an inline script instead
> of fetching a remote script. Do you know why it has special treatment?
>
> It appears to have been originally inlined to avoid the blocking external
> JS request. Also, perhaps it is to reduce the chaining, since the emoji
> detection script loads another script which actually then does the
> loading/rendering of the emoji (via Twemoji). So inlining it eliminates a
> loader of a loader.
>
> Also, perhaps it was inlined because there was already a need to inline
> some JS to export the settings, and so adding the emoji-loader inline as
> would just be part of that.
>
> We should investigate further to confirm and then consider whether this
> would be an opportunity to register `wp-emoji-loader` as a script module
> with `fetchpriority=low` (#61734) and `in_footer=true` (#63486).
>
> It looks like the script was introduced in [31875] to fix #31701, to
> avoid loading an external script unless it was needed. Back then, there
> was no support for `defer` (or script modules), so every script was a
> blocking script, so this was an optimization to avoid external blocking
> scripts.
>
> Removing the inlined emoji detection script would reduce ~3KB from every
> page.

New description:

 This was raised by @jonsurrell in [ticket:64076#comment:8]:

 > This makes me wonder why this emoji script is an inline script instead
 of fetching a remote script. Do you know why it has special treatment?

 It appears to have been originally inlined to avoid the blocking external
 JS request. Also, perhaps it is to reduce the chaining, since the emoji
 detection script loads another script which actually then does the
 loading/rendering of the emoji (via Twemoji). So inlining it eliminates a
 loader of a loader.

 Also, perhaps it was inlined because there was already a need to inline
 some JS to export the settings, and so adding the emoji-loader inline as
 would just be part of that.

 We should investigate further to confirm and then consider whether this
 would be an opportunity to register `wp-emoji-loader` as a script module
 with `fetchpriority=low` (#61734) and `in_footer=true` (#63486).

 It looks like the script was introduced in [31875] to fix #31701, to avoid
 loading an external script unless it was needed. Back then, there was no
 support for `defer` (or script modules), so every script was a blocking
 script, so this was an optimization to avoid external blocking scripts.

 Removing the inlined emoji detection script would reduce ~3KB from every
 page.

 This is a follow-up to #63842 and #64076.

--

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