Opened 8 days ago
Last modified 7 days ago
#64259 new enhancement
Convert emoji detection script from inline script module to external script module
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | 7.0 | Priority: | normal |
| Severity: | normal | Version: | 4.2 |
| Component: | Emoji | Keywords: | |
| Focuses: | performance | Cc: |
Description (last modified by )
This was raised by @jonsurrell in 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.
It's worth noting that deprioritising fetching/loading/execution of the emoji detection script would increase the load time of a page where emoji translation occurs - resulting in a faster initial load but resulting in a higher chance of a repaint or jumping of affected text.
That might be a worthwhile tradeoff though.
There might be other optimizations that can be done, such as detecting emoji-like characters in main content outputs before inlining it, to prevent an ASCII-only site prioritising a script that is unlikely to ever be used.