Improve performance of Like button

[gravityrail]

Steps to reproduce the issue

• Profile a post page with Lighthouse, with Performance checking enabled
• Enable Likes or Comment Likes
• Profile the page again

What I expected

• Small performance impact, ~10%

What happened instead

• Large performance impact - 150-200kb of extra bytes downloaded, 1.5-3 seconds added to DOM interactive time, 10-15 points shaved off Performance score (on test site)

Why?

A bunch of reasons:

• we load jquery two extra times, once in master.html for posting messages to wpcom and once in another iframe
• we do some hacky resizing of the iframe which causes the page to reflow a few times

How should we fix?

I think a first pass to eliminate some of these extra requests for dependencies would help a lot. Inlining the button style, replacing jquery with a minimal set of polyfills and functions for ajax, finding elements via selectors, jQuery.inArray() would reduce the number of requests, and the bytes requested.

A second pass could eliminate the button iframe entirely, perhaps using the Shadow DOM API or similar to sandbox the button styles from the page.

https://developers.google.com/web/fundamentals/web-components/shadowdom

[beaulebens]

Has this changed with the performance improvements that were shipped on the WP.com side recently?

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.