13.0.0 fse make safari and chrome to freeze (extremely slow to load)

[MoOx]

Description

I can't edit my site anymore. Loading https://mysite/wp-admin/themes.php?page=gutenberg-edit-site&postType=wp_template&postId=mytheme/index is horribly slow to load.
Header & Footer are loading, then middle of the website block (contains a query loop).
I can't even disable Gutenberg with WP 5.9.3 since I used stuff not available there (to avoid a bug) and my site crashes without it.
I feel stuck & it's hard to help you to debug.
If I wait several minutes things start to load, but "it depends", most of the time safari crash "this page used too much memory shah blah blah" & chrome is having a hard time to.

Some times, after several minutes, I can use the editor. Sometimes it's probably consuming too much memory and crash.

FYI, I have made a time from the FSE with a very simple theme.json when I started. Minimal functions.php (a few lines).

Step-by-step reproduction instructions

I just need to open the FSE UI on a page with multiple menu, a single query loop with 10 posts with title, categories, date & thumbnail.

Screenshots, screen recording, code snippet

Note that in the video, you can notice that the safari timeline doesn't start immediately, but at 1:50 ! 😱
During this 2 minutes, my computer does nothing. I have MacBook Pro M1 Pro 16, so perf is not an issue there (but Safari consume a CPU at 100%) !

Kapture.2022-04-14.at.18.04.18.mp4

Environment info

• Wordpress 5.9.3
• Gutenberg 13.0.0
• Safari Version 15.4 (17613.1.17.1.13) or Chrome Version 100.0.4896.88 (Official Build) (arm64)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[MoOx]

I also tried on a very simple page with just header/footer + post title with content and it's also very slow.

[Mamaduka]

Hi, @MoOx

Can you provide more details about your setup? For example, do you use any block library plugins?

I'm having a hard time reproducing the issue locally. Site Editor loads in 900ms when I clear cache in Safari, and then 400-500ms. Running on Mac Mini M1 2020.

[MoOx]

I am able to reproduce this with just Gutenberg plugin enabled.

Here is my current theme exported

damebio.zip

I am facing this issue on index & singular template (didn't try other, since it's a pain)

[Herm71]

I'm the Lead Developer for UC Santa Cruz my dev team and I are having the same issue as @MoOx with Gutenberg 13 (apologies if I should be making a new issue bout this but this issue describes what I'm experiencing almost perfectly). The main difference is that we're developing against WP 5.8.4 with the Gutenberg plugin.

We're switching to WordPress from a proprietary "university cms" and developing a block theme, intended for launch for the Fall term. We're using CampusPress as our hosting service and they don't plan on upgrading to WP 5.9.X until "mid-Summer" so we're developing against WP 5.8.4, which is CP's most recent version.

We're also using Advanced Custom Fields as a plugin and a couple we're developing ourselves but otherwise we're developing our theme using as stock an install of WP as possible: Only using blocks avail for WP 5.8.4/Gutenberg; no additional libraries. We've also tested this behavior with all plugins turned off except Gutenberg and reverted to the "TTBlocks" theme. All members of my dev team are experiencing the behavior described in this issue. If we downgrade to Gutenberg 12.9.0, the issue goes away.

We use wp-env for our local environments. My team members are on MacBook Pros and I'm on a System 76 Oryx running Ubuntu 21.04.

[tsiger]

I have the same problem in templates with query block(s).

Using:

WordPress 5.9.3
Gutenberg 13.0.0
TwentyTwentyTwo
Chrome 100 on Windows 10

[helpfulcolin]

I updated Gutenberg to 13.0.0 as soon as it was available but only came across the problem on 23/04/2022 when I went to the site editor. Previously with earlier versions of Gutenberg and WordPress 5.9 and the 2022 theme I had modified my site using the site editor with considerable success. If I want to do that now I have to rollback Gutenberg to 12.9.0 but I don't get to deploy the latest features.

Apart from the site editing issue 13.0.0 seems OK. It aligns lists better, for example.

I normally use Microsoft Edge on Windows 10, but I get the same with Chrome. I actually get Wait messages telling me there is a communication problem with the server (I'm with IONOS). After a while the Wait message goes but reappears when I attempt to select an item or do anything else. It has all those symptoms I've experienced with computers over the years when there isn't sufficient memory available to do the task being attempted.

Although I have many plugins I haven't deactivated them yet. I've not had problems like this with Gutenberg before and I've used many versions of it. I feel sure the experts will find some mistake has been made and get it corrected.

[carolinan]

@MoOx does this only happen locally on the M1 or also on other installations (if you have access to testing that).

[MoOx]

Sorry I only have a M1 macbook atm.
Just in case: the wordpress instance is not running on my MacBook, it's running on Gandi.net

[colorful-tones]

I am not able to replicate this. Here are my testing scenarios:

• OS: macOS Monteray 12.3.1
• Hardware: MacBook Pro 2020 / Processor: 1.7 GHz Quad-Core Intel Core i7
• Safari Version 15.4 (17613.1.17.1.13)
• WordPress 5.9.3, Gutenberg 13, TwentyTwentyTwo 1.1
• Open Site Editor for home page which contains a Query Loop block, and no perceivable performance issues

I also tested on Chrome Version 100.0.4896.127 (Official Build) (x86_64) and no performance issues.

[jakobwiens7]

I can confirm the issue on my end as well. As soon as Gutenberg plugin was updated to v13 the site editor performance on my more advanced sites dropped to a point where it was almost impossible to work with, as stated by others.

I noticed this on local installations as well as online websites. Its not much of a problem on a fresh wordpress install with just the Gutenberg plugin and the default theme, or at least its not as noticable. But as you continue adding blocks and content to your templates and pages the site editor performance and responsivity decreases.

And i am not sure this is actually related to the Query Loop block because i'm experiencing this on Header and Footer template parts too - just not as intense as with a whole template.

My setup:

• OS: Windows 10
• CPU: 4 GHz Intel Core i7
• Browser: Vivaldi / Chrome / Firefox
• Wordpress 5.9.3, Gutenberg 13

[Mamaduka]

I was able to reproduce the issue with the latest Gutenberg trunk plugin. I think the problem is the Navigation blocks.

Steps

• Using theme TT2/Empty theme, but any block theme should be good.
• Create large(ish) Navigation menus. I had a few with six top-level items and a sub-menu with 13.
• Slowlyness is noticeable as you add more menus, and eventually editor crashes.

cc @getdave, @talldan

[ndiego]

Thanks @Mamaduka for the steps. I was able to crash the editor with a large Navigation block that I then duplicated a couple of times. See the video below.

editor-crash.mp4

[getdave]

Related PRs as potential fixes:

#40696 and #40700

[draganescu]

After pulling #40696 and #40700 the remaining slowness for me remains adding submenus when having multiple medium size menus (5 top level with 2 sumbemus with 12 items each). This is visible only if I test with duplicated menus, not if the menus are different.

[ndiego]

Can we consider this closed with #40696 and #40700 merged? While there may still be some performance issues with the Site Editor, for me, those two PRs bring things back to where we were with 5.9.

[uniquesolution]

I am still seeing a huge performance issue in site editor, when a big navigation block is available on the page we editing. I checked with the latest gutenberg version 13.1.0

[Mamaduka]

@uniquesolution, the fixes will ship with Gutenberg 13.2.0.

[Mamaduka]

Hi, folks

The Gutenberg 13.2 has been released this Wednesday; it includes recent performance optimizations to the Navigation block.

I would appreciate confirmation if it solved the "freezing" issues mentioned here.

[jakobwiens7]

Yes, the Gutenberg 13.2 update definately fixed the issue for me. I haven't experienced crashes or complete freezes before though, but performance on my end is now as it used to be :)

[ndiego]

Yes, everything looks pretty good on my end with 13.2!

[MoOx]

I confirm that 13.2 make my site editor usable again ! Thanks for everyone involved in the resolution of this issue.

[uniquesolution]

Yes, speed has improved in site editor using navigation block, but one thing sometime I see that we open navigation block in list view with further seeing its submenu dropdown items, sometime it not appear anything more after that, I mean all the blocks added after it, not shows in the list view (white black space instead). It not happen all time, but sometime happen and sometime not,