Make WordPress Core

Opened 7 years ago

Last modified 19 months ago

#37788 new enhancement

dns-prefetch conditionally via javascript

Reported by: superpoincare's profile superpoincare Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.6
Component: Emoji Keywords:
Focuses: performance Cc:


For many users, dns-prefetch to is not needed if they aren't using Jetpack or any plugin which connects to it. It's because:

  1. A page may not have an emoji
  2. Even if the page has it, the browser may support emojis. Going forward the support will increase.

Hence I propose the dns-prefetch to be made only if the feature detection detects wp-emoji-release needs to be loaded or if possible page needs an emoji svg.

Attachments (1)

long-task.png (252.4 KB) - added by westonruter 19 months ago.
Long task

Download all attachments as: .zip

Change History (7)

#1 @SergeyBiryukov
7 years ago

  • Component changed from General to Script Loader

#3 @garrett-eclipse
4 years ago

Related - #44001
*If emoji scripts gets internalized due to privacy concerns then the need to prefetch will be gone.

19 months ago

Long task

#4 @westonruter
19 months ago

  • Focuses performance added

We should consider doing more detection for whether to print emoji detection script as well. Not only is the dns-prefetch to potentially a wasted connection, if a page lacks any emoji then the emoji detection script causes a long task.

For example, at see the above screenshot for the long task that print_emoji_detection_script() causes. If this script were removed, ~90ms could be shaved off of page load time. Also removing a needless dns-prefetch would improve things yet more.

There is prior discussion in #37817, but it it was about about improving the emoji detection script not detecting whether emoji is present. It's difficult to do this emoji detection in a traditional theme without using output buffering, since it's not known in the head what the body will include (other than looking at the main query). However, with full site editing this may indeed be doable as the entire page would be rendered as blocks and be in memory prior to printing. In this way, the blocks could be inspected for whether or not they contain emoji server-side, and only then print the dns-prefetch link to and the emoji detection script.

#5 @westonruter
19 months ago

Aside: I don't think it makes sense to conditionally add the dns-prefetch link as part of the emoji detection script since at that point the emoji would be injected into the page, meaning the dns-prefetch link would be added during the same task that adds the emoji images. I don't believe there would be any performance benefit since adding the emoji image will immediately establish the DNS connection.

#6 @westonruter
19 months ago

  • Component changed from Script Loader to Emoji
Note: See TracTickets for help on using tickets.