Automattic / Automattic/jetpack

Improve performance of Like button

Open
#8,195 2 comments 0 reactions 2 assignees Claimed by @ebinnion View on GitHub
[Feature] Comment Likes [Feature] Likes [Focus] Performance [Pri] Normal Enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.