perf(cherry-pick): use an interstitial page to load popup.html; load scripts using defered script tags (#26555)

[davidmurdoch]

This PR removes load-*.js helpers and load scripts using the defer property instead.

This change drastically improves the performance of the extension but greatly reduces perceived performance because the browser won't display the popup until the DOMContentLoaded event.

But improve perceived performance is mostly regained by initially loading an asset-less HTML file, popup-init.html, that then redirects to the slower (but much faster than before this PR) popup.html.

This was initially authored by @Gudahtt, I've just updated and optimized it to work with the both build systems.

One change I did not make was moving scripts to the head. I don't think putting the scripts in the head does anything in our case¹ other than potentially require that we wait for DOMContentLoaded before querying for the app container.

Note: In Firefox we continue to use popup.html. Firefox is very slow to render the popup-init.html redirect, and it renders the page only partially anyway, making the UX feel very janky. It also doesn't delay opening the popup until DOMContentLoaded, like Chrome does, so the issue popup-init.html solves doesn't do anything anyway.

---

Here is side-by-side video comparison of develop vs popup-defer-scripts.

This video displays the elapsed time from clicking the MetaMask Fox to Lock Screen render.

The end of the video is a frame-by-frame comparison of the new "jank" this PR introduces. The develop branch renders the fox immediately, whereas the popup-defer-scripts branch renders an empty page for about 15 milliseconds.

These stats aren't representative of real world performance, but are intended to illustrate relative performance and perceived performance.

Both builds were created by running yarn build dist.

develop-vs-propup-defer-scripts.mp4

---

1. build with yarn dist
2. install into your browser and go through onboarding
3. open MetaMask
4. Marvel at how much faster it is

---

Closes
#25721

Description

Cherry picks the popup loading changes.

Warning

There was a conflict around webpack changes since those aren't included in v12.2.0

Specifically, the build's script and some html files changed in the webpack PR as well as in #26555.

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Footnotes

1. our HTML files are very tiny, and thus will be loaded all in one go, we don't have to worry about packets being lost and retransmitted over the network, delaying the browser's preload scanner. ↩

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [d1a0c12]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1619 ± 37 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1493	1796	1624	73	35
		domContentLoaded	1485	1783	1603	74	36
		load	1492	1793	1619	76	37
		domInteractive	14	65	33	14	7

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.41%. Comparing base (945b77c) to head (d1a0c12).
Report is 19 commits behind head on Version-v12.2.0.

Additional details and impacted files

@@                 Coverage Diff                 @@
##           Version-v12.2.0   #26822      +/-   ##
===================================================
+ Coverage            70.16%   70.41%   +0.25%     
===================================================
  Files                 1402     1398       -4     
  Lines                49435    49476      +41     
  Branches             13585    13588       +3     
===================================================
+ Hits                 34685    34837     +152     
+ Misses               14750    14639     -111     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Gudahtt]

The "blank screen" portion of the popup UI page load is much more pronounced when I am testing this locally. Here are some videos for comparison (production v12.1.1 versus the most recent build on this PR)

Before

Edit: Updated to show a video of the wallet in a locked state, to match the "After" video

Screen.Recording.2024-09-03.at.14.17.38.mov

After

Screen.Recording.2024-09-03.at.13.24.53.mov

[darkwing]

Nit: If this screen has no content, do we need these two extra meta tags?

[Gudahtt]

LGTM! After consulting about the blank popup UI impact, we've decided to fix that in a future release