The initial loading time is extremely slow for large articles compared to TinyMCE

[rpkoller]

Describe the bug
I am using Local by Flywheel locally for testing. The created Local site uses Apache, PHP 7.2, MySQL 5.6 and WordPress 5.1. No plugins installed. I've created a post based on the following gist:
https://gist.github.com/florianbrinkmann/4e9e4d23eaefb8b23484badddd848196 and converted it into blocks. In wp-admin/edit.phppage I've clicked the Florian Brinkmann article and measured the time necessary for loading the article (caches are cleared upfront completely):

59,2 seconds white screen
78 seconds of FOIT
=> which sums up to 137,2 seconds overall.

Afterwards I've installed the Classic Editor plugin version 1.4 and reran the loading of the article (caches are cleared upfront completely again):

=> the loading time is 11,78 seconds overall

Expected behavior
The loading time should be at least en par with the loading time of TinyMCE. Gutenberg has to improve by at least 125,42 seconds

Desktop (please complete the following information):

• Computer: MBP 13" early 2011 8GB RAM
• OS: 10.13.6 (17G5019)
• Browser Safari
• Version 12.0.3 (13606.4.5.3.1)

Additional context

• @youknowriad asked me to open a new ticket for this, because the initial ticket (Performance: Improve the initial loading time and the feeling fo smoothness while typing in blocks. #11782) is way too long and hard to grasp for contributors

• When loading the article the assets by Local are loaded via http1.1 while the image assets in the article are loaded via florianbrinkmann.com which utilizes h2.

[SchneiderSam]

As I understand it, Wordpress 5.1 is not equal to Gutenberg 5.1. What are the results with Gutenberg 5.1 like?

[rpkoller]

hm I thought only at times the plugin is ahead of core. But Gutenberg 5.1 came out a few days before to WordPress 5.1 so i considered them en par patch wise. Anyway. Also tried with Gutenberg 5.1 now:

32 seconds white screen
61 FOIT

A little bit better but still way off in comparison to TinyMCE

[rpkoller]

retested with Gutenberg 5.3.

31 second white screen
33 seconds FOIT

[rpkoller]

After reading in the latest make article that the performance has further improved I retested the Florian Brinkmann article with WordPress 5.2.2 and Gutenberg 6.2.0 (tested in Safari 12.1.2)

29 seconds white screen
13 seconds FOIT

and actual typing in one block of the article is creeping slow still.

[philbuchanan]

I'm also noticing horrific performance in Safari (12.1.2). Seems to run smooth in Chrome, but often times the entire browser tab locks up, forcing me to force quit Safari to recover.

Page stats:

Words: 3142
Headings: 19
Paragraphs: 72
Blocks: 118

Load time: 20.87s.

[youknowriad]

@philbuchanan We're tracking the safari bug separately #17383

[rpkoller]

Tried the progress on the performance side and performed another test with the Flo Brinkmann article.

26,19 seconds white screen
9,33 FOIT

with Gutenberg 6.6.0 and WordPress 5.2.3 . Same test with Gutenberg plugin deactivated and Classic Plugin activated:

0,48 seconds
3,43 seconds

[rpkoller]

Another try with WordPress 5.3.0:

33,23 seconds white screen
3,95 FOIT

with WordPress 5.3.0 and Gutenberg 6.9.0:
30,20 seconds
FOIT was not really noticeable anymore

with Classic Plugin activated:
2,1 seconds until TinyMCE is loaded
1,76 seconds until the article is shown completely

[ellatrix]

We've make some performance improvements in Gutenberg 7.3.0. How does it look for you now? I don't expect it to be fully resolved, but I'm curious to know if it's better.

[rpkoller]

@ellatrix I've tested with WordPress 5.3.2 and Gutenberg 7.3.0 now:
41,18 seconds white screen
43,28 second FOIT

Performance got worse with the latest WordPress and Gutenberg version :/

[ellatrix]

@rpkoller Thanks for testing. Would you be willing to share post content that causes this?

[rpkoller]

@ellatrix I've used the content I've linked in the initial post of this issue: https://gist.github.com/florianbrinkmann/4e9e4d23eaefb8b23484badddd848196

[ellatrix]

@rpkoller That's strange, it loads quite fast for me testing locally. Maybe it's network related? I'll test more tomorrow.

[ellatrix]

@rpkoller What plugins do you have installed?

[rpkoller]

@ellatrix that the slower loading is due to network related issues i could quite certainly rule out. with tinymce the loading is more or less the same as with previous tests.

I test on a mbp 13" early 2011 with 8 gig of ram. using local from flywheel (php 7.2.0 & MySQL 5.6.34) with WordPress 5.3.2 and the only plugins installed are Classic Editor 1.5 (deactivated during the Gutenberg test) and Gutenberg 7.3.0 (activated). Spinned up that instance with the sole purpose of testing the loading and general performance with a long article like the one by florian brinkmann. and the testing was performed in safari with devtools activated to prevent loading and using cache and compare the absolute values with TinyMCEs.

[mrfoxtalbot]

I wanted to add a comment to confirm that this is still an issue and can, in fact, crash the editor altogether.

Here is a comparison (WP 6.0) of a large text being pasted in the Classic Editor....

Screen.Capture.on.2022-06-15.at.14-35-15.mp4

...vis a vi the same text being pasted in the block editor

Screen.Capture.on.2022-06-15.at.14-33-35.mp4