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.

[jornfranke]

Is underscore.min.js even needed? I do not find evidence in the code, but it is still loaded. It may block the media library to be displayed when having CSP without unsafe-eval enabled (it is recommended to not allow unsafe-eval due to security issues).
If underscore is not needed then I recommend to remove it with priority due to CSP issue.

See also: jashkenas/underscore#2995

[tyxla]

Underscore is still needed for the media library popup in wp-admin, which is part of the editor experience. That's how the UI template is managed. If you're just using @wordpress packages and not the WordPress core directly, underscore isn't needed and it's actually not a Gutenberg dependency.

[jornfranke]

I see. This means we still have CSP issues as underscore will not fix the insecure approach and media library uses underscore.

Does it make sense to create a new issue for this?

[tyxla]

Does it make sense to create a new issue for this?

Yes, but not in Gutenberg because the actual underscore usage is in the WP core. Creating a core ticket does make sense.