docs: Expand react performance guidelines #37849

MajorLift · 2025-11-14T11:11:03Z

Description

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

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.
… in our codebase

… in our codebase

github-actions · 2025-11-14T11:11:15Z

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 · 2025-11-14T11:35:14Z

Builds ready [6d2baff]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
- content-script: 0
- offscreen: 0

UI Startup Metrics (1145 ± 91 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1145	982	1516	91	1201	1279
			load	988	805	1350	84	1046	1098
			domContentLoaded	980	798	1342	86	1036	1091
			domInteractive	21	14	106	15	18	58
			firstPaint	610	88	1153	386	1022	1096
			backgroundConnect	195	175	303	17	198	223
			firstReactRender	28	16	187	18	30	41
			getState	21	6	55	9	26	41
			initialActions	0	0	1	0	0	1
			loadScripts	793	622	1109	84	852	909
			setupStore	10	7	26	3	11	18
			numNetworkReqs	13	6	76	20	6	73
	Browserify	Power User Home	uiStartup	1715	1475	2780	348	1946	2780
			load	1059	905	1614	207	1308	1614
			domContentLoaded	1052	899	1607	205	1300	1607
			domInteractive	44	15	144	46	106	144
			firstPaint	677	184	1614	439	944	1614
			backgroundConnect	238	223	278	13	241	278
			firstReactRender	29	25	50	6	31	50
			getState	178	154	229	23	185	229
			initialActions	0	0	1	0	0	1
			loadScripts	823	682	1353	200	1073	1353
			setupStore	13	10	28	6	11	28
			numNetworkReqs	119	72	253	61	168	253
	Webpack	Standard Home	uiStartup	815	696	1141	88	815	1039
			load	605	559	926	77	600	823
			domContentLoaded	598	553	906	73	593	807
			domInteractive	16	12	59	10	14	41
			firstPaint	192	59	913	195	174	759
			backgroundConnect	25	12	72	15	29	65
			firstReactRender	29	17	64	10	34	55
			getState	11	5	22	3	13	16
			initialActions	0	0	1	0	0	1
			loadScripts	595	551	896	71	590	797
			setupStore	12	5	32	5	13	20
			numNetworkReqs	13	6	74	19	8	71
	Webpack	Power User Home	uiStartup	1009	854	1435	213	1343	1435
			load	632	566	835	100	780	835
			domContentLoaded	616	551	813	95	741	813
			domInteractive	29	12	83	28	69	83
			firstPaint	400	118	811	232	565	811
			backgroundConnect	63	17	182	60	121	182
			firstReactRender	26	24	29	2	28	29
			getState	136	83	167	24	149	167
			initialActions	0	0	1	0	0	1
			loadScripts	612	549	803	92	731	803
			setupStore	11	6	25	7	21	25
			numNetworkReqs	110	71	170	39	165	170
Firefox	Browserify	Standard Home	uiStartup	1473	1297	2052	128	1500	1749
			load	1252	1122	1516	85	1288	1436
			domContentLoaded	1251	1122	1516	85	1288	1435
			domInteractive	103	33	330	36	116	163
			firstPaint	-	-	-	-	-	-
			backgroundConnect	46	24	159	26	50	118
			firstReactRender	26	21	54	7	26	46
			getState	11	7	35	4	11	23
			initialActions	0	0	1	0	0	1
			loadScripts	1224	1106	1482	78	1264	1393
			setupStore	15	7	264	26	11	35
			numNetworkReqs	14	6	77	20	7	76
	Browserify	Power User Home	uiStartup	2103	1784	2677	284	2363	2677
			load	1400	1167	1686	168	1608	1686
			domContentLoaded	1400	1166	1685	168	1607	1685
			domInteractive	121	38	422	125	198	422
			firstPaint	-	-	-	-	-	-
			backgroundConnect	96	27	282	74	109	282
			firstReactRender	43	29	80	12	48	80
			getState	118	83	181	30	132	181
			initialActions	1	0	6	2	1	6
			loadScripts	1361	1137	1644	165	1554	1644
			setupStore	30	6	91	29	60	91
			numNetworkReqs	136	70	239	65	223	239
	Webpack	Standard Home	uiStartup	1603	1387	2274	167	1619	2014
			load	1358	1196	1740	117	1387	1640
			domContentLoaded	1358	1196	1740	117	1386	1640
			domInteractive	96	31	369	50	98	203
			firstPaint	-	-	-	-	-	-
			backgroundConnect	48	26	217	29	49	121
			firstReactRender	36	24	95	17	35	82
			getState	14	7	144	15	11	41
			initialActions	0	0	2	0	0	1
			loadScripts	1329	1176	1659	109	1365	1587
			setupStore	15	7	113	17	12	58
			numNetworkReqs	13	6	73	17	7	64
	Webpack	Power User Home	uiStartup	2300	1874	3598	474	2688	3598
			load	1514	1242	1983	221	1676	1983
			domContentLoaded	1513	1241	1983	221	1675	1983
			domInteractive	178	36	573	176	407	573
			firstPaint	-	-	-	-	-	-
			backgroundConnect	104	31	351	83	112	351
			firstReactRender	40	31	52	6	45	52
			getState	134	95	198	35	176	198
			initialActions	2	0	7	2	1	7
			loadScripts	1478	1219	1956	214	1652	1956
			setupStore	37	4	292	68	38	292
			numNetworkReqs	136	66	337	84	217	337

📊 Page Load Benchmark Results

Current Commit: 6d2baff | Date: 11/14/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.05s (±78ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
domContentLoaded-> current mean value: 734ms (±73ms) 🟢 | historical mean value: 730ms ⬆️ (historical data)
firstContentfulPaint-> current mean value: 77ms (±14ms) 🟢 | historical mean value: 79ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.05s	78ms	1.01s	1.38s	1.30s	1.38s
domContentLoaded	734ms	73ms	699ms	1.04s	978ms	1.04s
firstPaint	77ms	14ms	60ms	196ms	88ms	196ms
firstContentfulPaint	77ms	14ms	60ms	196ms	88ms	196ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

metamaskbot · 2025-11-14T17:29:55Z

Builds ready [d1c703c]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
- content-script: 0
- offscreen: 0

UI Startup Metrics (1224 ± 88 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1224	1065	1469	88	1280	1388
			load	1065	926	1299	81	1126	1199
			domContentLoaded	1059	919	1293	80	1112	1193
			domInteractive	23	13	108	17	20	66
			firstPaint	664	87	1246	421	1062	1187
			backgroundConnect	235	219	263	8	238	255
			firstReactRender	25	17	49	6	26	41
			getState	21	7	56	8	25	37
			initialActions	0	0	1	0	0	1
			loadScripts	830	666	1061	79	879	963
			setupStore	10	6	21	3	11	16
			numNetworkReqs	13	6	76	19	6	68
	Browserify	Power User Home	uiStartup	1687	1463	2326	262	1941	2326
			load	1060	912	1613	213	1274	1613
			domContentLoaded	1053	906	1604	211	1266	1604
			domInteractive	38	16	122	35	85	122
			firstPaint	659	139	1650	462	935	1650
			backgroundConnect	239	219	278	16	252	278
			firstReactRender	30	26	54	7	31	54
			getState	180	160	204	15	195	204
			initialActions	0	0	1	0	1	1
			loadScripts	823	681	1334	202	1046	1334
			setupStore	16	10	36	9	26	36
			numNetworkReqs	120	74	254	59	169	254
	Webpack	Standard Home	uiStartup	811	691	1099	81	815	1011
			load	602	557	895	72	599	790
			domContentLoaded	594	550	880	68	590	767
			domInteractive	17	12	90	13	14	50
			firstPaint	211	56	884	204	198	770
			backgroundConnect	24	11	66	13	34	51
			firstReactRender	28	18	62	8	33	37
			getState	11	6	31	4	13	16
			initialActions	0	0	1	0	0	1
			loadScripts	591	548	870	66	588	756
			setupStore	11	5	32	4	13	17
			numNetworkReqs	13	6	76	19	8	71
	Webpack	Power User Home	uiStartup	1010	853	1549	216	1106	1549
			load	652	566	979	129	718	979
			domContentLoaded	638	551	962	124	708	962
			domInteractive	35	12	150	41	68	150
			firstPaint	375	63	965	294	600	965
			backgroundConnect	48	9	235	62	46	235
			firstReactRender	26	24	29	1	27	29
			getState	139	93	160	22	151	160
			initialActions	0	0	1	0	1	1
			loadScripts	634	549	952	121	698	952
			setupStore	12	6	31	8	23	31
			numNetworkReqs	100	65	166	37	130	166
Firefox	Browserify	Standard Home	uiStartup	1487	1284	2018	129	1503	1811
			load	1261	1111	1479	83	1305	1437
			domContentLoaded	1260	1110	1479	83	1305	1437
			domInteractive	57	33	193	35	59	149
			firstPaint	-	-	-	-	-	-
			backgroundConnect	42	24	146	21	49	95
			firstReactRender	26	21	51	5	27	41
			getState	13	7	216	21	11	21
			initialActions	0	0	2	0	0	1
			loadScripts	1236	1093	1423	77	1283	1395
			setupStore	14	7	115	15	12	41
			numNetworkReqs	12	6	75	16	7	59
	Browserify	Power User Home	uiStartup	2166	1807	3022	346	2356	3022
			load	1387	1180	1787	189	1614	1787
			domContentLoaded	1387	1179	1787	189	1613	1787
			domInteractive	146	41	457	143	308	457
			firstPaint	-	-	-	-	-	-
			backgroundConnect	95	29	235	71	168	235
			firstReactRender	50	30	87	15	55	87
			getState	139	97	211	36	171	211
			initialActions	1	0	1	0	1	1
			loadScripts	1349	1159	1751	185	1586	1751
			setupStore	33	5	132	38	44	132
			numNetworkReqs	132	72	249	64	171	249
	Webpack	Standard Home	uiStartup	1624	1471	2142	139	1648	1996
			load	1379	1243	1726	103	1397	1663
			domContentLoaded	1379	1243	1725	103	1396	1663
			domInteractive	56	30	228	30	64	114
			firstPaint	-	-	-	-	-	-
			backgroundConnect	50	24	132	25	58	113
			firstReactRender	32	24	92	10	32	50
			getState	12	7	50	8	12	23
			initialActions	0	0	2	0	0	1
			loadScripts	1349	1213	1690	95	1366	1581
			setupStore	17	7	98	17	14	55
			numNetworkReqs	13	6	67	17	8	64
	Webpack	Power User Home	uiStartup	2210	1821	3009	327	2434	3009
			load	1517	1234	1812	171	1651	1812
			domContentLoaded	1516	1234	1812	171	1651	1812
			domInteractive	104	33	359	110	215	359
			firstPaint	-	-	-	-	-	-
			backgroundConnect	100	24	292	75	140	292
			firstReactRender	39	29	54	8	42	54
			getState	114	78	190	24	116	190
			initialActions	1	0	6	1	1	6
			loadScripts	1478	1215	1770	175	1625	1770
			setupStore	35	6	171	46	70	171
			numNetworkReqs	134	65	261	73	211	261

📊 Page Load Benchmark Results

Current Commit: d1c703c | Date: 11/14/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.04s (±39ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
domContentLoaded-> current mean value: 723ms (±36ms) 🟢 | historical mean value: 718ms ⬆️ (historical data)
firstContentfulPaint-> current mean value: 77ms (±12ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.04s	39ms	1.02s	1.32s	1.06s	1.32s
domContentLoaded	723ms	36ms	704ms	984ms	745ms	984ms
firstPaint	77ms	12ms	60ms	176ms	88ms	176ms
firstContentfulPaint	77ms	12ms	60ms	176ms	88ms	176ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

MajorLift added 3 commits November 14, 2025 06:06

Expand react performance guidelines draft with antipatterns prevalent…

959a4bd

… in our codebase

Incomplete draft for performance audit

ec8293f

unit, integration test output

6d2baff

metamaskbot added the team-extension-platform Extension Platform team label Nov 14, 2025

github-actions bot added the size-XL label Nov 14, 2025

MajorLift added 3 commits November 14, 2025 10:41

Add two critical entries to selectors section

b087852

Remove sections

ab2bc49

Add section on selectors and deeply nested state

d1c703c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: Expand react performance guidelines #37849

docs: Expand react performance guidelines #37849

MajorLift commented Nov 14, 2025 •

edited by github-actions bot

Loading

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

metamaskbot commented Nov 14, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Nov 14, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

docs: Expand react performance guidelines #37849

Are you sure you want to change the base?

docs: Expand react performance guidelines #37849

Conversation

MajorLift commented Nov 14, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

metamaskbot commented Nov 14, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Nov 14, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MajorLift commented Nov 14, 2025 •

edited by github-actions bot

Loading