Site Editor: Slow loading

[paaljoachim]

Description

In the perhaps last 4-5 versions of Gutenberg I have noticed the loading of the Editor has slowed down. I am now seeing an animated gif for perhaps 5-9 seconds before I see the canvas/document area. The sidebar loads instently.

I am seeing this slowness on existing and new sites.

Here is also a video showing two new sites.
https://youtu.be/zZ4y-dOZxAA

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

WordPress 6.2.2.
Gutenberg plugin 16.0
Tested in Brave as well as Firefox browsers

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

[Mamaduka]

@paaljoachim, can you share a screenshot of Developers Tools when loading a Site Editor? Disable cache, filter by fetch requests, and sort by time for better details.

Now that we wait for templates to be fully loaded, instead of immediately rendering them, the perceived performance might be a bit slow.

cc @tyxla

Example

[paaljoachim]

Hey @Mamaduka George.

Here is a screenshot from kursholderen.no (all plugins except Gutenberg is deactivated)

Here is a screenshot from nse-info.no (has various plugins active: All in one Security, Code Snippets Pro, Discourage Search Engines Notifier, Duplicator Pro, Email Address Encoder, Filebird Lite, Gutenberg, Imsanity, Koko Analytics, LiteSpeed Cache, Ninja Forms and Performance Lab)

EDIT Monday 19 June: Adding in another screenshot. I have been using this site a lot for the call to testing FSE program. It has only the Gutenberg 16.9 plugin active.

[tyxla]

Thanks for the ping @Mamaduka!

FWIW, I don't see anything unusual based on the screenshots. The loading spinner is expected to be there while the editor canvas is loading. Previously, during the editor canvas's loading process, there were multiple loading spinners all across the canvas, but we're now displaying only one - that's expected and how we intentionally want it to behave. One reason is that with the previous loading experience with the multiple spinners, it was possible that one starts to interact while the interface or blocks are loading and that could lead to unexpected results. This doesn't mean that the site editor is loading slower than before; we've only changed how that loading process looks. The intention is that when the loading spinner disappears, the user is fully able to interact with the editor without risking losing any content or performing unexpected actions.

I might be misunderstanding something here - if that's the case, we could use some more details about what's actually wrong in the screenshots/video.

[paaljoachim]

Hi @tyxla Marin

The last few versions of the Gutenberg plugin I have experienced a slower site editor. From the screenshots I added the following is noticed. Load time takes from 7003ms to 14000ms depending on plugins that are active and whatever else.

It was a lot quicker earlier.

[tyxla]

Thanks for confirming @paaljoachim!

It was a lot quicker earlier.

I'm just surprised since I don't see any unexpected dramatic recent changes in the loading speed for the past versions (from what access to mass site loading speed data I have).

Note that on one of the screenshots, load time is twice slower, but also loaded assets are 5 times more, which could be attributed to third-party blocks or other external network requests that could usually slow the loading a lot. That's why I thought that there isn't anything special or problematic about the screenshots in the first place.

Is it possible that it's related to another plugin upgrade? I'm unable to reproduce it locally and I was wondering if you had the chance to test it with older versions of WP core and the plugins and see when the slowness started. If we have that information we can dive deeper and do thorough, in-depth tests of our own to diagnose the possible cause (even if it's not related to Gutenberg at all).

[paaljoachim]

I went ahead and downloaded version 14.8.3: https://github.com/WordPress/gutenberg/releases/tag/v14.8.3 to my dev site.
The same site with the last screenshot above.

This is what I see:

The document window shows a white space. There are far fewer elements seen in the Name screen area. The load time is very different compared to the screenshot further above.

The main difference is that going to the Site Editor in Gutenberg version 14.8.3 no template by default shows up.
Going to the Site Editor in Gutenberg version 16 by default the Front page is loaded (If I remember correctly). As a template is automatically loaded additional assets are likely also loaded at the same time.

So my initial site editor loading experience varies a lot between the two Gutenberg versions.

[tyxla]

Thanks for confirming @paaljoachim - this does confirm it's related to loading templates and template parts.

I don't think this is related to the recent loading experience improvements I've been working on, though - the loading speed would be the same with or without them.

I'd say this could rather be fixed by preloading some of the template data on the server, although this could come with its own tradeoffs. I know @getdave has been working on some preloading work recently - is this something that you've been considering?

[getdave]

We tried preloading template parts in #48924 but it wasn't providing any benefit. I'm not actively working on that anymore but I have preloaded Navigation queries which has become increasingly important now Navigation is available in Browse Mode sidebar.

[tyxla]

Thanks for confirming @getdave. I'd suggest keeping the issue open so we can keep an eye on possible loading speed improvements in that area.

[Humanify-nl]

Not sure if related but I have the same issue with site editor being considerably slower then 6.2.3 version.

One glaring issue is that when trying to load a part of template, it starts loading it, and while editing it suddenly reverts back to frontpage template. This is really a problem.

[Mamaduka]

@Humanify-nl, can you provide reproduction steps or screencast of the issue? Thank you!

[Humanify-nl]

I posted an issue here: #54417 with a screencast to demonstrate.

[paaljoachim]

An update using WordPress 6.4 beta 4. Only plugin active is the Beta tester plugin.
I am using the Brave browser which also shows errors in the bottom console area.
Loading the Site Editor based on the video takes about 15 seconds.

Loading.the.Site.Editor.WP.6.4.Beta.4mp4.mp4

[annezazu]

@paaljoachim are you still seeing this for 6.5? There were a number of improvements done so I'm curious if it's gotten better.

[paaljoachim]

Hey @annezazu

I have by now just gotten used to the slow loading editor. (It is still in general slow to load as the progress bar shows up for a few moments so I have to wait to be able to click the screen.)

[annezazu]

I don't want us to get used to it :D Is it as slow perceptively in 6.5? I understand some loading will have to happen but curious if the 15s lag is happening.

[paaljoachim]

6.5 RC3. Test site.
Theme: Twenty Twenty Four.
Active plugins: Akismet, Autoptimize, My Calendar, Gutenberg and Beta Tester.
I just tested again by making a recording from the time I clicked Appearance -> Editor to the time the canvas/document screen was clickable. It took 8 seconds.
Deactivating all of the above plugins except the Beta Tester it went even faster. Perhaps 5 seconds.
So all in all it has improved. Perhaps I should close this issue?

[tyxla]

Thanks for testing again @paaljoachim! Glad to hear things have improved almost twice since we started looking at it.

Of course, we're always looking for opportunities to further speed things up. In the meantime, I agree we're in a good spot now and this issue could be closed.

[paaljoachim]

Closing issue. It can always be reopened if needed.