Perfs : The editor loads a HUGE amount of javascript

corentin-gautier commented 1 year ago

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)

https://user-images.githubusercontent.com/4660731/215814345-a122f26b-3a51-4187-b7f1-484a81c12ae9.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 commented 1 year ago

Probably related to #36716.

ciampo commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

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

gziolo commented 1 year ago

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:

https://github.com/WordPress/gutenberg/blob/e5ce4e9b0ee5048ee0c772ff4309d2ef607867eb/lib/client-assets.php#L215-L217

More in https://github.com/WordPress/gutenberg/issues/32665.

WordPress / gutenberg

Perfs : The editor loads a HUGE amount of javascript #47619

What problem does this address?

What is your proposed solution?