Automattic / Automattic/jetpack
Improve performance of Like button
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
#### Steps to reproduce the issue
- Profile a post page with [Lighthouse](https://github.com/GoogleChrome/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
Contributor guide
Assessment
This issue has not been assessed yet.