Automattic / Automattic/jetpack

Fetch for /jetpack/v4/scan delays DOM load by several seconds

Open
#18,740 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Scan [Focus] Performance [Pri] Normal [Status] Auto-allocated Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

In experimenting with some front-end javascript, I noticed that the DOM load even was being delayed by a fetch from `index.php?rest_route=/jetpack/v4/scan`

This appears to be part of an admin bar notice.

I noticed that the admin-bar-notice.js that triggers this API request is [firing on DOMContentLoaded](https://github.com/Automattic/jetpack/blob/master/projects/plugins/jetpack/modules/scan/admin-bar-notice.js#L6), which is pretty early for a highly optional notice. It's probably much better to run it on load, or even later, since this appears to be a very long-running API call.

Delaying the `load` event can cause poor UX, as many scripts initialize user-facing elements on `load`. `DOMContentLoaded` fires before all styles have been applied and images loaded, so it's unnecessarily early.

Also, by initializing on `load` you wouldn't need to check document.readyState since `load` will _not_ fire until all the JS is loaded (including the admin-bar-notice.js)

Furthermore, this is always a "bad request" for me - if we could detect that early and not even load this JS, that would be even better.

![dom-load-delayed](https://user-images.githubusercontent.com/51896/107156513-9b055a80-6933-11eb-884c-14e872301896.jpg)

Contributor guide

Open the contributing guide

Research direction

Start with projects/plugins/jetpack/modules/scan/admin-bar-notice.js, especially the DOMContentLoaded handler at line 6, and trace the request to /jetpack/v4/scan. Confirm when the optional admin-bar notice begins its request and whether the consistently bad request can be avoided; done means it no longer delays the page's load event.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.