Incredibly slow to load editor for a post with 93 instances of TinyMCE

[maddisondesigns]

Describe the bug
Have just updated to v3.5.0 and it's incredibly slow to open the editor. It now takes approximately 15 seconds just to open a simple page to edit it. Not only that, it sits on a blank page (with the just main left-hand menu & admin bar) for the majority of the time so it actually looks like the page just didn't load, but if you wait long enough the rest of the editor eventually loads.

Video: https://cl.ly/3t391J1y1Z1J

To Reproduce
Steps to reproduce the behavior:

1. Update to v3.5.0
2. Edit page

Expected behavior
It shouldn't take this long just to start editing a page. It shouldn't look like it stopped working.

Desktop (please complete the following information):

• OS: macOS Sierra 10.12.6
• Browser: Firefox Quantum 61.0.1 (64-bit)
• Gutenberg: 3.5.0

[designsimply]

I tested with WordPress 4.9.8 and Gutenberg 3.5.0 and I was unable to see the same problem happen. I suspect there's something specific in your content that triggers this problem for you, and it would be really good to try to pinpoint that if possible.

Does this problem happen for you with every post you open or just some of them?

May I ask how many images are used in the post called "Images" from your video example?

I'll keep an eye out for similar reports since there isn't enough information in your report to go on yet.

Noting a similar performance issue with more detailed testing steps for reference: #8675.

[tofumatt]

That's quite strange, I can't reproduce this and haven't noticed a difference in performance lately. I'm also a MacOS Firefox user, so our browser setups are similar.

Could you give us more information about your site's environment? Are you running other plugins, any that might add extra Gutenberg blocks, etc.?

Does downgrading to 3.4.0 or another version affect performance?

[tofumatt]

@designsimply Sorry, GitHub didn't update the page with your comment, didn't mean to repeat a lot of what you said 😅

[maddisondesigns]

I tried downgrading to 3.4.0. It's still quite slow but possibly a couple of seconds quicker

Vid for 3.4: https://cl.ly/3b420T360E1t

I found these errors/messages in the Console:

paragraphs block class set is-small-text, ..., is-large-text is deprecated and will be removed from Gutenberg in 3.6. Please use has-small-font-size, ..., has-large-font-size class set instead. Note: If paragraphs using this classes are opened in the editor new classes are automatically applied the post just needs to be saved. This is a global warning, shown regardless of whether the classes are used in the current post.

Block validation: Expected attributes  
(2) […]
​0: Array(3) [ "src", "http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_4_front.jpg", true ]
​1: Array(3) [ "data-id", "54", true ]
​length: 2
​<prototype>: Array []
 , instead saw  
(3) […]
​0: Array(3) [ "src", "http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_4_front.jpg", true ]
​1: Array(3) [ "data-id", "54", true ]
​2: Array(3) [ "class", "wp-image-54", true ]
​length: 3
​<prototype>: Array []

Block validation: Block validation failed for `core/gallery` ( 
Object { name: "core/gallery", title: "Gallery", description: "Display multiple images in an elegantly organized tiled layout.", icon: {…}, category: "common", keywords: (2) […], attributes: {…}, supports: {…}, transforms: {…}, edit: (t)()
, … }
 ).

Expected:

<ul class="wp-block-gallery columns-3 is-cropped alignnone"><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_4_front.jpg" alt="" data-id="54"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_6_front.jpg" alt="" data-id="61"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_2_front.jpg" alt="" data-id="48"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_7_front.jpg" alt="" data-id="43"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_1_front.jpg" alt="" data-id="46"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_5_front.jpg" alt="" data-id="57"/></figure></li></ul>

Actual:

<ul class="wp-block-gallery columns-3 is-cropped alignnone"><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_4_front.jpg" alt="" data-id="54" class="wp-image-54"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_6_front.jpg" alt="" data-id="61" class="wp-image-61"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_2_front.jpg" alt="" data-id="48" class="wp-image-48"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_7_front.jpg" alt="" data-id="43" class="wp-image-43"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_1_front.jpg" alt="" data-id="46" class="wp-image-46"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_5_front.jpg" alt="" data-id="57" class="wp-image-57"/></figure></li></ul>

Block validation: Expected tag name `div`, instead saw `ul`.

Block validation: Block validation failed for `core/gallery` ( 
Object { name: "core/gallery", title: "Gallery", description: "Display multiple images in an elegantly organized tiled layout.", icon: {…}, category: "common", keywords: (2) […], transforms: {…}, edit: (t)()
, deprecated: (1) […], attributes: {…}, … }
 ).

Expected:

<div class="wp-block-gallery alignnone columns-0 is-cropped columns-3"></div>

Actual:

<ul class="wp-block-gallery columns-3 is-cropped alignnone"><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_4_front.jpg" alt="" data-id="54" class="wp-image-54"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_6_front.jpg" alt="" data-id="61" class="wp-image-61"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_2_front.jpg" alt="" data-id="48" class="wp-image-48"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_7_front.jpg" alt="" data-id="43" class="wp-image-43"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_1_front.jpg" alt="" data-id="46" class="wp-image-46"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_5_front.jpg" alt="" data-id="57" class="wp-image-57"/></figure></li></ul>

=========

Here's a couple of pics of the Network Waterfall from Firefox Quantum:

In case it helps, here's a pic of part of the Performance Waterfall from Firefox Developer

Along with the Call Tree for that large section

Lastly, here's the actual page content. It's basically a page with examples of all sorts of blocks. The site is a local site, so you obviously wont see the images. (If its of any help and you want them, let me know and I can provide them to you)

<!-- wp:subhead -->
<p class="wp-block-subhead">This page contains all the default Gutenberg blocks - This is a Subhead block<br/></p>
<!-- /wp:subhead -->

<!-- wp:heading -->
<h2>Images</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":2651} -->
<figure class="wp-block-image"><img src="http://dev.ephemeris.com/wp-content/uploads/2017/09/bigstock-Lighthouse-At-Night-44466193.jpg" alt="" class="wp-image-2651"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2651,"align":"wide"} -->
<figure class="wp-block-image alignwide"><img src="http://dev.ephemeris.com/wp-content/uploads/2017/09/bigstock-Lighthouse-At-Night-44466193.jpg" alt="" class="wp-image-2651"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2651,"align":"full"} -->
<figure class="wp-block-image alignfull"><img src="http://dev.ephemeris.com/wp-content/uploads/2017/09/bigstock-Lighthouse-At-Night-44466193.jpg" alt="" class="wp-image-2651"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Images with captions</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":2651} -->
<figure class="wp-block-image"><img src="http://dev.ephemeris.com/wp-content/uploads/2017/09/bigstock-Lighthouse-At-Night-44466193.jpg" alt="" class="wp-image-2651"/><figcaption>Image with caption</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2651,"align":"wide"} -->
<figure class="wp-block-image alignwide"><img src="http://dev.ephemeris.com/wp-content/uploads/2017/09/bigstock-Lighthouse-At-Night-44466193.jpg" alt="" class="wp-image-2651"/><figcaption>Wide image with caption</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2651,"align":"full"} -->
<figure class="wp-block-image alignfull"><img src="http://dev.ephemeris.com/wp-content/uploads/2017/09/bigstock-Lighthouse-At-Night-44466193.jpg" alt="" class="wp-image-2651"/><figcaption>Full image with caption</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Look again at that dot. That’s here. That’s home. That’s us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every “superstar,” every “supreme leader,” every saint and sinner in the history of our species lived there–on a mote of dust suspended in a sunbeam.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"San Juan","backgroundColor":"white-smoke"} -->
<p class="has-background has-san-juan-color has-white-smoke-background-color">A Paragraph block with background and text colours. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed erat at dolor vulputate pretium. Praesent mauris est, mollis sed dapibus at, pretium ut orci. Morbi elit felis, porttitor vel mauris nec, venenatis facilisis magna. Nunc pulvinar euismod maximus. Maecenas in ullamcorper sem. Ut tempor neque eu erat venenatis mollis. Proin consequat turpis ac metus gravida vulputate. Sed dui sem, ultricies ac sem at, ultricies vestibulum nibh. Donec eu massa sit amet ex maximus fringilla. Donec fermentum volutpat erat eget rutrum. Fusce varius, tellus vitae pretium placerat, felis ligula viverra magna, sed porta turpis diam id nibh. Praesent sit amet augue ac ligula elementum ullamcorper eget non sem. Curabitur eu metus lacus. Duis semper elementum magna, vel pharetra arcu fringilla vel.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"white","backgroundColor":"denim"} -->
<p class="has-background has-white-color has-denim-background-color">A Paragraph block with background and text colours. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed erat at dolor vulputate pretium. Praesent mauris est, mollis sed dapibus at, pretium ut orci. Morbi elit felis, porttitor vel mauris nec, venenatis facilisis magna. Nunc pulvinar euismod maximus. Maecenas in ullamcorper sem. Ut tempor neque eu erat venenatis mollis. Proin consequat turpis ac metus gravida vulputate. Sed dui sem, ultricies ac sem at, ultricies vestibulum nibh. Donec eu massa sit amet ex maximus fringilla. Donec fermentum volutpat erat eget rutrum. Fusce varius, tellus vitae pretium placerat, felis ligula viverra magna, sed porta turpis diam id nibh. Praesent sit amet augue ac ligula elementum ullamcorper eget non sem. Curabitur eu metus lacus. Duis semper elementum magna, vel pharetra arcu fringilla vel.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. This is a Paragraph block with Small text. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"regular"} -->
<p class="has-regular-font-size">This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. This is a Paragraph block with Medium text. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. This is a Paragraph block with Large text. <br/></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"extralarge"} -->
<p class="has-extralarge-font-size">This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. This is a Paragraph block with Extra Large text. <br/></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Heading 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Heading 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Heading 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Heading 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Heading 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Heading 6</h6>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Gallery Block<br/></h2>
<!-- /wp:heading -->

<!-- wp:gallery {"className":"alignnone"} -->
<ul class="wp-block-gallery columns-3 is-cropped alignnone"><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_4_front.jpg" alt="" data-id="54" class="wp-image-54"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_6_front.jpg" alt="" data-id="61" class="wp-image-61"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_2_front.jpg" alt="" data-id="48" class="wp-image-48"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_7_front.jpg" alt="" data-id="43" class="wp-image-43"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_1_front.jpg" alt="" data-id="46" class="wp-image-46"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://dev.ephemeris.com/wp-content/uploads/2013/06/hoodie_5_front.jpg" alt="" data-id="57" class="wp-image-57"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:heading -->
<h2>List Block<br/></h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul>
	<li>Items List 1</li>
	<li>Items List 2<br/></li>
	<li>Items List 3</li>
	<li>Items List 4<br/></li>
	<li>Items List 5</li>
</ul>
<!-- /wp:list -->

<!-- wp:list {"ordered":true} -->
<ol>
	<li>Items List 1</li>
	<li>Items List 2</li>
	<li>Items List 3</li>
	<li>Items List 4</li>
	<li>Items List 5</li>
</ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Quote Block</h2>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>You have my respect, Stark. When I'm done, half of humanity will still be alive. I hope they remember you.</p><cite>Thanos, son of A'lars</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:heading -->
<h2>Audio Block</h2>
<!-- /wp:heading -->

<!-- wp:audio {"id":2837} -->
<figure class="wp-block-audio"><audio controls src="http://dev.ephemeris.com/wp-content/uploads/2018/05/02-Brave-Enough-ft.-Christina-Perri.mp3"></audio></figure>
<!-- /wp:audio -->

<!-- wp:heading -->
<h2>Cover Image Block</h2>
<!-- /wp:heading -->

<!-- wp:cover-image {"url":"http://dev.ephemeris.com/wp-content/uploads/2017/11/bigstock-Beauty-Girl-Outdoors-enjoying-60280580.jpg","id":2750} -->
<div class="wp-block-cover-image has-background-dim" style="background-image:url(http://dev.ephemeris.com/wp-content/uploads/2017/11/bigstock-Beauty-Girl-Outdoors-enjoying-60280580.jpg)"><p class="wp-block-cover-image-text">Cover Image<br/></p></div>
<!-- /wp:cover-image -->

<!-- wp:cover-image {"url":"http://dev.ephemeris.com/wp-content/uploads/2017/11/bigstock-Beauty-Girl-Outdoors-enjoying-60280580.jpg","align":"wide","id":2750,"dimRatio":30} -->
<div class="wp-block-cover-image has-background-dim-30 has-background-dim alignwide" style="background-image:url(http://dev.ephemeris.com/wp-content/uploads/2017/11/bigstock-Beauty-Girl-Outdoors-enjoying-60280580.jpg)"><p class="wp-block-cover-image-text">Cover Image Wide</p></div>
<!-- /wp:cover-image -->

<!-- wp:cover-image {"url":"http://dev.ephemeris.com/wp-content/uploads/2017/11/bigstock-Beauty-Girl-Outdoors-enjoying-60280580.jpg","align":"full","id":2750,"dimRatio":10} -->
<div class="wp-block-cover-image has-background-dim-10 has-background-dim alignfull" style="background-image:url(http://dev.ephemeris.com/wp-content/uploads/2017/11/bigstock-Beauty-Girl-Outdoors-enjoying-60280580.jpg)"><p class="wp-block-cover-image-text">Cover Image Full</p></div>
<!-- /wp:cover-image -->

<!-- wp:heading -->
<h2>Video Block</h2>
<!-- /wp:heading -->

<!-- wp:video {"id":1690} -->
<figure class="wp-block-video"><video controls src="http://dev.ephemeris.com/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video></figure>
<!-- /wp:video -->

<!-- wp:heading -->
<h2>Code Block</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;?php
/**
 * Enqueue scripts and styles.
 * Our sample Social Icons are using Font Awesome to display the icons so we need to include the FA CSS
 *
 * @return void
 */
if ( ! function_exists( 'skyrocket_scripts_styles' ) ) {
	function skyrocket_scripts_styles() {
		// Register and enqueue our icon font
		// We're using the awesome Font Awesome icon font. http://fortawesome.github.io/Font-Awesome
		wp_register_style( 'fontawesome', trailingslashit( get_template_directory_uri() ) . 'css/font-awesome.min.css' , array(), '4.7', 'all' );
		wp_enqueue_style( 'fontawesome' );
	}
}
add_action( 'wp_enqueue_scripts', 'skyrocket_scripts_styles' );</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Classic Block</h2>
<!-- /wp:heading -->

<p>Look again at that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there--on a mote of dust suspended in a sunbeam.</p>
<p>The Earth is a very small stage in a vast cosmic arena. Think of the rivers of blood spilled by all those generals and emperors so that, in glory and triumph, they could become the momentary masters of a fraction of a dot. Think of the endless cruelties visited by the inhabitants of one corner of this pixel on the scarcely distinguishable inhabitants of some other corner, how frequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.</p>
<p>Our posturings, our imagined self-importance, the delusion that we have some privileged position in the Universe, are challenged by this point of pale light. Our planet is a lonely speck in the great enveloping cosmic dark. In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.</p>
<p>The Earth is the only world known so far to harbor life. There is nowhere else, at least in the near future, to which our species could migrate. Visit, yes. Settle, not yet. Like it or not, for the moment the Earth is where we make our stand.</p>
<p>It has been said that astronomy is a humbling and character-building experience. There is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world. To me, it underscores our responsibility to deal more kindly with one another, and to preserve and cherish the pale blue dot, the only home we've ever known.</p>

<!-- wp:heading -->
<h2>Custom HTML Block</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<div class="my-customer-html-block" style="color:#fff;background-color:rebeccapurple;padding:50px 0;text-align:center;font-weight:700;font-size:30px;">
	Custom HTML Block
</div>
<!-- /wp:html -->

<!-- wp:heading -->
<h2>Preformatted Block</h2>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.</pre>
<!-- /wp:preformatted -->

<!-- wp:heading -->
<h2>Pullquote Block</h2>
<!-- /wp:heading -->

<!-- wp:pullquote {"className":"alignnone"} -->
<blockquote class="wp-block-pullquote alignnone"><p>Dude, you're embarrassing me in front of the wizards.</p><cite>Tony Stark, Avengers: Infinity War</cite></blockquote>
<!-- /wp:pullquote -->

<!-- wp:pullquote {"align":"wide"} -->
<blockquote class="wp-block-pullquote alignwide"><p>Dude, you're embarrassing me in front of the wizards.</p><cite>Tony Stark, Avengers: Infinity War</cite></blockquote>
<!-- /wp:pullquote -->

<!-- wp:pullquote {"align":"full"} -->
<blockquote class="wp-block-pullquote alignfull"><p>Dude, you're embarrassing me in front of the wizards.</p><cite>Tony Stark, Avengers: Infinity War</cite></blockquote>
<!-- /wp:pullquote -->

<!-- wp:heading -->
<h2>Table Block</h2>
<!-- /wp:heading -->

<!-- wp:table -->
<table class="wp-block-table">
	<tbody>
		<tr>
			<td style="width:565px">Column 1 Row 1<br/></td>
			<td style="width:68px">Column 2 Row 1</td>
			<td style="width:565px">Column 3 Row 1</td>
		</tr>
		<tr>
			<td style="width:565px">Column 1 Row 2</td>
			<td style="width:68px">Column 2 Row 2<br/></td>
			<td style="width:565px">Column 3 Row 2</td>
		</tr>
	</tbody>
</table>
<!-- /wp:table -->

<!-- wp:table {"align":"wide"} -->
<table class="wp-block-table alignwide">
	<tbody>
		<tr style="height:74px">
			<td style="width:565px;height:74px">Column 1 Row 1<br/></td>
			<td style="width:68px;height:74px">Column 2 Row 1</td>
			<td style="width:565px;height:74px">Column 3 Row 1</td>
		</tr>
		<tr style="height:74px">
			<td style="width:565px;height:74px">Column 1 Row 2</td>
			<td style="width:68px;height:74px">Column 2 Row 2<br/></td>
			<td style="width:565px;height:74px">Column 3 Row 2</td>
		</tr>
	</tbody>
</table>
<!-- /wp:table -->

<!-- wp:table {"align":"full"} -->
<table class="wp-block-table alignfull">
	<tbody>
		<tr>
			<td style="width:565px">Column 1 Row 1<br/></td>
			<td style="width:68px">Column 2 Row 1</td>
			<td style="width:565px">Column 3 Row 1</td>
		</tr>
		<tr>
			<td style="width:565px">Column 1 Row 2</td>
			<td style="width:68px">Column 2 Row 2<br/></td>
			<td style="width:565px">Column 3 Row 2</td>
		</tr>
	</tbody>
</table>
<!-- /wp:table -->

<!-- wp:heading -->
<h2>Verse Block</h2>
<!-- /wp:heading -->

<!-- wp:verse -->
<pre class="wp-block-verse">This is the Verse block. It's totally useless but will somehow make it into core simply because Matt wanted it. So much for the 80/20 rule!<br/></pre>
<!-- /wp:verse -->

<!-- wp:heading -->
<h2>Button Block</h2>
<!-- /wp:heading -->

<!-- wp:button {"backgroundColor":"eclipse","className":"alignnone"} -->
<div class="wp-block-button alignnone"><a class="wp-block-button__link has-background has-eclipse-background-color" href="http://dev.ephemeris.com/markup-html-tags-and-formatting/">Left Align Button</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"electric-violet","align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link has-background has-electric-violet-background-color" href="http://dev.ephemeris.com/markup-html-tags-and-formatting/">Centered Button</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"san-juan","align":"right"} -->
<div class="wp-block-button alignright"><a class="wp-block-button__link has-background has-san-juan-background-color" href="google.com">Right Aligned Button</a></div>
<!-- /wp:button -->

<!-- wp:button {"align":"wide","className":"alignwide"} -->
<div class="wp-block-button alignwide"><a class="wp-block-button__link" href="google.com">Wide Button ¯\_(ツ)_/¯</a></div>
<!-- /wp:button -->

<!-- wp:button {"align":"full","className":"alignfull"} -->
<div class="wp-block-button alignfull"><a class="wp-block-button__link" href="google.com">Full Width Button ¯\_(ツ)_/¯</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"electric-violet","textColor":"titanium-yellow"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-titanium-yellow-color has-background has-electric-violet-background-color" href="google.com">This is a button</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"cerise","textColor":"eclipse","align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link has-text-color has-eclipse-color has-background has-cerise-background-color" href="google.com">This is a button</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"alizarin","textColor":"titanium-yellow","align":"right"} -->
<div class="wp-block-button alignright"><a class="wp-block-button__link has-text-color has-titanium-yellow-color has-background has-alizarin-background-color" href="google.com">This is a button</a></div>
<!-- /wp:button -->

<!-- wp:heading -->
<h2>Columns Block</h2>
<!-- /wp:heading -->

<!-- wp:columns {"columns":6} -->
<div class="wp-block-columns has-6-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column2</p>
<!-- /wp:paragraph -->

<!-- wp:button {"className":"alignnone"} -->
<div class="wp-block-button alignnone"><a class="wp-block-button__link" href="google.com">Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column4</p>
<!-- /wp:paragraph -->

<!-- wp:button {"className":"alignnone"} -->
<div class="wp-block-button alignnone"><a class="wp-block-button__link" href="google.com">Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column4</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>sjkdfbsdkjfhasjdkfhsajkfhkjlsahdfkjsahdfkjsahdfjkshdfjksh jkl jkshdfk jshdfkj shadjkj kjhsfjkh sdjkdhskjhkfjfdskjdhfksjdhfskjdhf ks<br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>sjkhfdlkjshfjskhfjksahdfjskfhkjshfkjshfkjshfsfsh skjh  ksjfhksdfhskjdfhskjdfh skjdf sdkjfhskjdhfksjdhfskjdhfskjdhfskjdhfskjdhfjshdkfjshdkjfhskjdfhskjdhfkjsdfd</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column6</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":4} -->
<div class="wp-block-columns has-4-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":5} -->
<div class="wp-block-columns has-5-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":6} -->
<div class="wp-block-columns has-6-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1 This is column 1<br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 This is column 2 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 This is column 3 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 This is column 4 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 This is column 5 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 This is column 6 <br/></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Curabitur blandit tempus ardua ridiculus sed magna. Cras mattis iudicium purus sit amet fermentum. Non equidem invideo, miror magis posuere velit aliquet. Pellentesque habitant morbi tristique senectus et netus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"className":" is-style-dots"} -->
<hr class="wp-block-separator  is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Curabitur blandit tempus ardua ridiculus sed magna. Cras mattis iudicium purus sit amet fermentum. Non equidem invideo, miror magis posuere velit aliquet. Pellentesque habitant morbi tristique senectus et netus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</p>
<!-- /wp:paragraph -->

[tofumatt]

Thanks for all of the info, that’s super helpful :-) Do you have any plugins installed on the site? Just curious if they’re impacting anything.

[maddisondesigns]

@tofumatt I do have a number of plugins on this particular site. It's a site for one of my themes on .org so I have a bunch of plugins activated so that I can test the theme against it.

BackupBuddy
bbPress
Elementor
Elementor Pro
Gutenberg
Gutenberg Block Unit Test
Monster Widget
Ninja Forms
Recent Posts Widget With Thumbnails
Regenerate Thumbnails
Theme Check
WooCommerce

On another test site with only ACF, Gutenberg and WooCommerce, I can see a similar slowness though. It's taking a minimum of 15 seconds to load the editor page

[pento]

I'm able to reproduce similar results in the latest Firefox Quantum, running WordPress 5.0 and Gutenberg master, with no other plugins, using the demo content @maddisondesigns posted above.

Chrome exhibits similar behaviour, but not quite as extreme. It took my computer 10 seconds to render the content in Firefox, 2.5s in Chrome.

Most of the time is in TinyMCE: presumably because there appears to be 93 instances of TinyMCE being rendered: each one takes a fraction of a second, but it adds up. 🙂Updating TinyMCE to the latest version doesn't give me any improvement.

@iseulde was looking at re-using TinyMCE instances a while back (#341). Have you had a chance to think about this some more?

@androb: Do you have thoughts on how we could approach this?

[chrisvanpatten]

I experience similar behavior, in Safari on macOS. A quick performance profile also suggests TinyMCE instantiation being the culprit.

FWIW I'm on a Core i7 MacBook Air with Turbo Boost disabled. It's slightly better with Turbo enabled but still noticeably slow.

[aduth]

Noting additional context at #8720, which I closed in favor of this one.

[androb]

I've looped in @Afraithe and @spocke who may have some suggestions. Is there any guidance around how many instances should be supported?

On Mon, Aug 13, 2018 at 8:56 AM Andrew Duthie ***@***.***> wrote: Noting additional context at #8720 <#8720>, which I closed in favor of this one. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8822 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACD2sNgyL8ArhhN9Q6LB08zccHB5ZoJCks5uQcvxgaJpZM4V34Ms> .

-- Andrew Roberts, Tiny <https://www.tiny.cloud> CEO +1 (650) 833-9352

[pento]

Moby Dick is a decent performance test. When I paste that content into Classic Text mode, then switch to Visual, it takes 3-4 seconds to render. Doing the same in Gutenberg... 🙃

I think the only realistic option is to re-use instances, the question is what's the best way to configure that.

[androb]

Makes sense to try and reuse the instances. I have seen some pretty crazy edge cases over the years. I talked to someone the other day using WordPress to create legal documents that could easily run to hundreds of paragraphs. If there is a realistic upper limit for the foreseeable future we may want to warn before loading or gracefully bail out.

[pento]

So, here's something fun: the performance on creating a new TinyMCE instance whenever a RichText is focussed doesn't feel terrible in normal sized posts, and it makes Moby Dick actually usable. (There are other performance issues in Moby Dick, but not TinyMCE related.)

Here's a branch (which has its own bugs, it's just a proof of concept) if you want to try it out:

https://github.com/WordPress/gutenberg/tree/lol/8822-delete-and-recreate-tinymce

[Afraithe]

Over 40-50 instances you will start to see some significant performance issues, I remember we discussed this with the Gutenberg team early on in the project, especially when you split on Paragraph level content.

Should be fairly easy making all types of the same block use the same instance? That should cut down on the unique instances quite quickly.

Also as pento experiments with, create a tinymce instance on focus of the area. This is what we used to recommend to ppl running hundreds of instances in tinymce 3.x, we had a special mode for it. Didn't quite need it in TinyMCE 4 so the mode was removed (can still do it manually ofc).
.

[ellatrix]

If it's created on focus, it will still have quite a lot of instances around after some writing. It may be a good temporary solution. I'll look at a solution where we create just one instance for TinyMCE instance with the same settings. Most blocks use the same settings apart from the quote blocks, list block, and table block. When focussing a new RichText area we can swap out the target element, flush undo levels, and so on.

[Afraithe]

Well the performance issue should be around the creation of the instances, not having them active, but I haven't tested that. But as you say, compacting the instances to same-block should allow it to scale much better though.

[azaozz]

looked a bit into this too and came to pretty much the same conclusion: large number of instances is not performant, even when there is very little content in them.

Also, a single instance with a very very long content (a post with 50k words) may have performance issues too. Then some operations in the editor (like things running on nodeChanged, etc.) which are typically used in plugins can become extremely slow.

A limited number of instances by "editor settings type" or "block type" seems to solve most problems as it keeps initialization delays to a minimum and moving an instance and resetting its content is fast (as long as that content is not "huge").

Another good alternative is to create instances on focus, and destroy them on blur after few seconds of timeout (as the user might have misclicked, etc.).

A possible problem with both of these options is that we may loose the TinyMCE state, i.e. if the user was in the middle of a multi-step operation (like inserting a link) when the instance was moved and reset, we will "loose" all of the steps. This will be somewhat mitigated with the second approach if the user focuses the instance again during the timeout.

With both of the above approaches we may need to consider keeping "classic block" instances "on" at all times as it seems they would be affected by the edge cases the most.

[azaozz]

Yet another approach (I know, this is getting quite complex) may be to initialize TinyMCE on focus and always keep two or three instances around, the new one plus couple of the last used. This will take care of most concerns/edge cases caused by moving or resetting instances, and at the same time will be quite performant.

[aduth]

While it's good to note the impact of initializing hundreds of TinyMCE, which will be common with text-heavy posts, I think it might be good as well to apply the problem to blocks in general. Why do we initialize hundreds of blocks when only a couple are visible on screen at a time? What about blocks which don't use TinyMCE but are still "heavy" (e.g. Code block with CodeMirror)? Could we take these ideas of on-demand instantiation but make them less specific to TinyMCE, and toward blocks in general? Perhaps using something like react-virtualized (react-window) or similar to do virtualized list rendering.

[aduth]

One potential concern with on-demand TinyMCE loading is race conditions. Is the initialization asynchronous and thus prone to user interaction not being captured by TinyMCE? Or synchronous and causing noticeable delays in the focus initialization?

[aduth]

Some (early, incomplete) exploration of on-demand TinyMCE initialization at #9040

[chrisvanpatten]

Just want to highlight @paulwilde's issue #9048 (closed to merge into here):

So I've built a production website (that has since gone live) which has 118 blocks and nesting which goes 4-5 levels deep (Section > Columns > Column > Contents) however there is major performance issues under Safari 11.1.1.

By performance issues I mean scrolling sometimes feels sluggish and typing has a 3-4 second delay before anything shows up. It's unusable. Chrome on the other hand doesn't seem to have these issues, so it seems its Safari specific.

Creating a new page and inserting a few new blocks and everything feels fast again.

If there is anything I can do to help diagnosis the cause, do let me know.

Most of the discussion here is around instantiation, but I've also experienced seriously degraded performance in Safari even after the instantiation finishes, similar to what's described above (many blocks, lots of nesting, etc.). If I had to guess it's related to memory allocation (my understanding is that Chrome allocates a high/fixed amount of memory to each tab, sort of like a PHP-FPM worker, whereas Safari allocates memory to each tab more conservatively) but that's also just a guess ;)

[pento]

There are some common events that cause code to run on all blocks (focus is one, I think, there are probably others), which is less than ideal. 🙂

I agree with @aduth's earlier comment that the most scalable solution is going to be something that only renders blocks when they're in view.

[ogalinski]

I'm working on a 5,100 word post and Gutenberg is already showing signs of degraded performance; lag is evident while typing. Post is all text. Running on a local installation, just WordPress 4.9.8 and Gutenberg 3.9.0, in Chrome 69.0.3497.100 64-bit.

[ellatrix]

So this might not all be TinyMCE... see #10427.

[Kenshino]

So my team member migrated a glossary page from staging to WordPress.org. It has 714 blocks. and a full load on the Gutenberg Edit screen takes 3.65 mins

[youknowriad]

Closed by #10723