Perfs : The editor loads a HUGE amount of javascript

[corentin-gautier]

What problem does this address?

Currently, opening the editor (with just Twenty Twenty Three, no plugins) loads about 1.3 mB of javascript, which is a lot, with multiple files being over 100 kB in size. I'm wondering why so much javascript is loaded and if there's room for improvements here.

(comparatively, the list of posts has 88 kB of javascript)

Screen.Recording.2023-01-31.at.16.43.12.mov

Here's a list of the scripts and their sizes

index	file	size
0	'wp-includes/js/dist/components.min.js?ver=4b876f1ff2e5c93b8fb1'	'203.27 KB'
1	'wp-includes/js/dist/block-library.min.js?ver=8adfaccd027d4d509d5e'	'193.09 KB'
2	'wp-includes/js/dist/block-editor.min.js?ver=0c7c9b9a74ceb717d6eb'	'169.35 KB'
3	'wp-includes/js/tinymce/tinymce.min.js?ver=49110-20201110'	'125.78 KB'
4	'wp-includes/js/dist/date.min.js?ver=ce7daf24092d87ff18be'	'53.84 KB'
5	'wp-includes/js/dist/blocks.min.js?ver=69022aed79bfd45b3b1d'	'51.66 KB'
6	'wp-includes/js/dist/editor.min.js?ver=c9102d37531f38da0681'	'42.53 KB'
7	'wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.17'	'39.59 KB'
8	'wp-includes/js/dist/vendor/react-dom.min.js?ver=17.0.1'	'39.40 KB'
9	'wp-includes/js/dist/edit-post.min.js?ver=2baffbeec6cbe5171dee'	'31.54 KB'
10	'wp-includes/js/media-views.min.js?ver=6.1.1'	'26.47 KB'
11	'wp-includes/js/dist/vendor/lodash.min.js?ver=4.17.19'	'25.49 KB'
12	'wp-includes/js/dist/vendor/moment.min.js?ver=2.29.4'	'18.99 KB'
13	'wp-includes/js/dist/core-data.min.js?ver=d8d458b31912f858bcdf'	'16.06 KB'
14	'wp-includes/js/dist/compose.min.js?ver=37228270687b2a94e518'	'12.31 KB'
15	'wp-includes/js/dist/rich-text.min.js?ver=c704284bebe26cf1dd51'	'10.99 KB'
16	'wp-includes/js/dist/data.min.js?ver=d8cf5b24f99c64ae47d6'	'8.61 KB'
17	'wp-includes/js/backbone.min.js?ver=1.4.1'	'8.20 KB'
18	'wp-includes/js/underscore.min.js?ver=1.13.4'	'7.64 KB'
19	'wp-includes/js/jquery/ui/core.min.js?ver=1.13.2'	'7.42 KB'
20	'wp-includes/js/dist/block-directory.min.js?ver=000a47d4ebe2ceac3593'	'7.33 KB'
21	'wp-includes/js/dist/format-library.min.js?ver=57876a359eac66da202b'	'7.08 KB'
22	'wp-includes/js/jquery/ui/sortable.min.js?ver=1.13.2'	'6.95 KB'
23	'wp-admin/js/common.min.js?ver=6.1.1'	'6.85 KB'
24	'wp-includes/js/dist/element.min.js?ver=47162ff4492c7ec4956b'	'5.17 KB'
25	'wp-includes/js/dist/dom.min.js?ver=133a042fbbef48f38107'	'5.09 KB'
26	'wp-admin/js/editor.min.js?ver=6.1.1'	'5.04 KB'
27	'wp-includes/js/dist/vendor/react.min.js?ver=17.0.1'	'4.77 KB'
28	'wp-includes/js/media-models.min.js?ver=6.1.1'	'4.44 KB'
29	'wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'	'4.33 KB'
30	'wp-includes/js/wplink.min.js?ver=6.1.1'	'4.19 KB'
31	'wp-includes/js/dist/i18n.min.js?ver=9e794f35a71bb98672ae'	'4.17 KB'
32	'wp-admin/js/image-edit.min.js?ver=6.1.1'	'4.08 KB'
33	'wp-includes/js/mce-view.min.js?ver=6.1.1'	'4.07 KB'
34	'wp-includes/js/dist/url.min.js?ver=bb0ef862199bcae73aa7'	'4.05 KB'
35	'wp-includes/js/imgareaselect/jquery.imgareaselect.min.js?ver=6.1.1'	'4.00 KB'
36	'wp-includes/js/media-editor.min.js?ver=6.1.1'	'3.91 KB'
37	'wp-includes/js/quicktags.min.js?ver=6.1.1'	'3.81 KB'
38	'wp-includes/js/media-audiovideo.min.js?ver=6.1.1'	'3.66 KB'
39	'wp-includes/js/clipboard.min.js?ver=2.0.11'	'3.45 KB'
40	'wp-includes/js/jquery/ui/menu.min.js?ver=1.13.2'	'3.34 KB'
41	'wp-includes/js/dist/media-utils.min.js?ver=17f6455b0630582352a4'	'3.23 KB'
42	'wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.13.2'	'3.19 KB'
43	'wp-includes/js/dist/redux-routine.min.js?ver=c9ea6c0df793258797e6'	'3.18 KB'
44	'wp-includes/js/plupload/wp-plupload.min.js?ver=6.1.1'	'2.62 KB'
45	'wp-includes/js/dist/api-fetch.min.js?ver=bc0029ca2c943aec5311'	'2.58 KB'
46	'wp-includes/js/dist/preferences-persistence.min.js?ver=c5543628aa7ff5bd5be4'	'2.57 KB'
47	'wp-includes/js/dist/reusable-blocks.min.js?ver=3fb4b31e589a583a362e'	'2.53 KB'
48	'wp-admin/js/postbox.min.js?ver=6.1.1'	'2.53 KB'
49	'wp-includes/js/dist/autop.min.js?ver=43197d709df445ccf849'	'2.45 KB'
50	'wp-admin/js/svg-painter.js?ver=6.1.1'	'2.43 KB'
51	'wp-includes/js/heartbeat.min.js?ver=6.1.1'	'2.33 KB'
52	'wp-includes/js/dist/plugins.min.js?ver=0d1b90278bae7df6ecf9'	'2.26 KB'
53	'wp-includes/js/dist/keyboard-shortcuts.min.js?ver=b696c16720133edfc065'	'2.10 KB'
54	'wp-includes/js/dist/keycodes.min.js?ver=6e0aadc0106bd8aadc89'	'2.09 KB'
55	'wp-includes/js/tinymce/plugins/compat3x/plugin.min.js?ver=49110-20201110'	'2.04 KB'
56	'wp-includes/js/dist/priority-queue.min.js?ver=99e325da95c5a35c7dc2'	'1.90 KB'
57	'wp-includes/js/dist/style-engine.min.js?ver=10341d6e6decffab850e'	'1.88 KB'
58	'wp-includes/js/dist/server-side-render.min.js?ver=ba8027ee85d65ae23ec7'	'1.88 KB'
59	'wp-includes/js/dist/shortcode.min.js?ver=7539044b04e6bca57f2e'	'1.82 KB'
60	'wp-includes/js/admin-bar.min.js?ver=6.1.1'	'1.69 KB'
61	'wp-includes/js/dist/preferences.min.js?ver=5e6c91c252c0e040f379'	'1.58 KB'
62	'wp-includes/js/wp-backbone.min.js?ver=6.1.1'	'1.48 KB'
63	'wp-includes/js/shortcode.min.js?ver=6.1.1'	'1.45 KB'
64	'wp-includes/js/dist/block-serialization-default-parser.min.js?ver=eb2cdc8cd7a7975d49d9'	'1.41 KB'
65	'wp-includes/js/dist/viewport.min.js?ver=a9868d184d07e4c94fe4'	'1.41 KB'
66	'wp-includes/js/jquery/ui/mouse.min.js?ver=1.13.2'	'1.39 KB'
67	'wp-includes/js/dist/primitives.min.js?ver=ae0bece54c0487c976b1'	'1.37 KB'
68	'wp-includes/js/dist/wordcount.min.js?ver=feb9569307aec24292f2'	'1.36 KB'
69	'wp-includes/js/dist/a11y.min.js?ver=ecce20f002eda4c19664'	'1.29 KB'
70	'wp-includes/js/dist/notices.min.js?ver=9c1575b7a31659f45a45'	'1.28 KB'
71	'wp-includes/js/wp-auth-check.min.js?ver=6.1.1'	'1.07 KB'
72	'wp-includes/js/wp-util.min.js?ver=6.1.1'	'1.06 KB'
73	'wp-includes/js/hoverintent-js.min.js?ver=2.2.1'	'1.02 KB'
74	'wp-includes/js/dist/token-list.min.js?ver=f2cf0bb3ae80de227e43'	'0.95 KB'
75	'wp-admin/js/media-upload.min.js?ver=6.1.1'	'0.91 KB'
76	'wp-includes/js/api-request.min.js?ver=6.1.1'	'0.89 KB'
77	'wp-includes/js/dist/escape-html.min.js?ver=03e27a7b6ae14f7afaa6'	'0.84 KB'
78	'wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=6.1.1'	'0.84 KB'
79	'wp-includes/js/dist/is-shallow-equal.min.js?ver=20c2b06ecf04afb14fee'	'0.83 KB'
80	'wp-includes/js/dist/deprecated.min.js?ver=6c963cb9494ba26b77eb'	'0.81 KB'
81	'wp-includes/js/dist/blob.min.js?ver=a078f260190acf405764'	'0.79 KB'
82	'wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=6.1.1'	'0.78 KB'
83	'wp-includes/js/dist/html-entities.min.js?ver=36a4a255da7dd2e1bf8e'	'0.75 KB'
84	'wp-includes/js/dist/dom-ready.min.js?ver=392bdd43726760d1f3ca'	'0.63 KB'
85	'wp-includes/js/dist/warning.min.js?ver=4acee5fc2fd9a24cefc2'	'0.57 KB'

What is your proposed solution?

I think auditing all those scripts, looking for redundancy and maybe lazyloading scripts that are not needed immediately could improve loading and rendering performances quite a lot

[Mamaduka]

Probably related to #36716.

[ciampo]

cc'ing @youknowriad @tyxla and @jsnajdr , in case this issue can be related to existing issues (or is a duplicate of an existing one)

[youknowriad]

This has always been a constant preoccupation for all of us. We did several iterations and improvements over time but features come with a cost. So this is more like an on-going thing. There's no solution to this issue but it's something that all developers should keep in mind.

For the next iterations, There are a few things we can try:

• import maps are probably our best bet if we want to improve things, it will allow us to potentially lazy load some parts of the UI
• TinyMCE is also something that we explored lazy loading in the past but that we should try again. Basically it's only needed for the classic block, there might be a way to only load it once that block is used.

[tyxla]

Lodash has been removed, see #17025 and #52571.

Also, there's an experiment running to stop loading TinyMCE when possible, see #50387.

[gziolo]

Also, there's an experiment running to stop loading TinyMCE when possible, see #50387.

We could explore having a similar mechanism for loading scripts handling meta boxes only when they are required for the post editor. As of today, we always enqueue postbox script handle:

gutenberg/lib/client-assets.php

Lines 215 to 217 in e5ce4e9

	case 'wp-edit-post':
	array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
	break;

More in #32665.