Identify UI performance improvement opportunities using Chrome tracing / Firefox profiler

[Gudahtt]

What is this about?

Use chrome://tracing to identify opportunities for improving UI performance.

We should focus on optimizing steps prior to the ui.js execution; that's mainly where the tracing tool is useful. We can more easily measure performance of ui.js using the console and Performance APIs.

See here for guidance on using the Chrome tracing tool: https://www.notion.so/metamask-consensys/Measurement-b75b7c8682e1422e81a91e6956b454c3
Note that that document was written for service worker tracing. In this case we'd want to focus on UI page load instead. The suggested categories for recording are v8 and extensions, though feel free to experiment with others.

We should also try using the Firefox profiler tool

Scenario

No response

Design

No response

Technical Details

No response

Threat Modeling Framework

No response

Acceptance Criteria

• We have investigated extension UI performance using the tracing tool and written up a report about it
  • This could be shared just as a GitHub comment
• Separate issues have been created for each identified opportunity for optimizing performance

Stakeholder review needed before the work gets merged

• Engineering (needed in most cases)
• Design
• Product
• QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
• Security
• Legal
• Marketing
• Management (please specify)
• Other (please specify)

References

No response

[rvelaz]

MetaMask/contributor-docs#159