Block Editor: Preload together with Post Editor section

[tyxla]

Currently, at multiple places, when the user intends to click on a link to open the post editor, we preload the post editor section. That helps with perceived performance, because the section starts loading immediately, and when the user navigates to the post editor, it loads faster because it had already loaded.

However, for many of the users, we use the block editor, and this introduces a couple of problems:

• We're still preloading the post editor section, which is totally unnecessary for those users because it never gets used.
• We're not preloading the block editor section, so we're missing out on an opportunity to improve the loading speed.

This PR introduces a common preloader helper that preloads both sections, and updates all the locations that were previously preloading the post editor to preload both sections. That resolves both of the abovementioned problems.

Ideally, we would know which section to preload and would preload only that section, but at this point, I expect the positive impact of preloading both sections to be higher than the negative one.

Changes proposed in this Pull Request

• Block Editor: Preload together with Post Editor section

Testing instructions

• Checkout this branch.
• Go to /posts/:site
• Open your network tab
• Roll over a post
• Verify the gutenberg-editor section chunk gets preloaded.

[matticbot]

Test live: https://calypso.live/?branch=update/preload-editor-add-gutenberg

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~25 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main       +123 B  (+0.0%)      +25 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~100 bytes removed 📉 [gzipped])

name          parsed_size           gzip_size
posts-custom       -112 B  (-0.0%)      -23 B  (-0.0%)
posts              -112 B  (-0.0%)      -26 B  (-0.0%)
pages               -66 B  (-0.0%)      -27 B  (-0.0%)
reader              -64 B  (-0.0%)      -24 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~63 bytes removed 📉 [gzipped])

name                                         parsed_size           gzip_size
async-load-design-blocks                          -138 B  (-0.0%)      -39 B  (-0.0%)
async-load-components-web-preview-component        -64 B  (-0.0%)      -24 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sarayourfriend]

I only see gutenberg-editor being loaded.

This branch

Production

I believe this would be solved by the suggestion I left but I may be confused about the intention.

[sarayourfriend]

Should this function also include preload( 'post-editor' )?

Suggested change

	export function preloadEditor() {
	preload( 'gutenberg-editor' );
	}
	export function preloadEditor() {
	preload( 'gutenberg-editor' );
	preload( 'post-editor' );
	}

[tyxla]

Uh, sorry @saramarcondes - this is expected behavior.

It was changed because of this review request: #45934 (comment) but I forgot to update the PR description.

Could you take another look?

I forgot to update PR description and testing instructions, so Sara was following old ones.

[sarayourfriend]

Oh gosh sorry @tyxla I should have read the existing discussion but my mind glossed right over it. I'll dismiss my review and this LGTM and is behaving as expected. The refactor into a single function for preloading the editor is a great idea too, glad you were able to make that improvement.