Editor: Block editor loads substantially slower in Calypso than WP Admin

[pauljacobson]

A user's report about slow load times for the block editor revealed that the block editor loads roughly three times slower in Calypso, compared to WP Admin. @phpmypython completed much of this investigation in 2426905-zen

The user contacted us complaining of slow loading times when editing a post. The user stated the issue had been occurring for a few months.

Steps to reproduce

The following is from @phpmypython's initial note:

1. When I attempted to load this post [link redacted - please see the ticket for active links] it took over 10s to load even a little bit of the content on the page.
2. I attempted to test the load time after disabling Yoast and the WP Recipe Maker plugin and they didn't appear to make a huge dent in the load time.
3. While testing the item above I noticed that the editor only loads slowly when being accessed through the wordpress.com gutenframe interface. When editing the post through the WP admin the post loads almost instantly.
4. I saw a support thread on the yoast support page mentioning editor lags and slowness and they recommended disabling readability analysis and keyword analysis so i did that to test. I also enabled gutenberg support in the settings for the plugin Popup Maker and noticed a big difference in the load time. The editor loaded in around 5-6 seconds as opposed to the almost 10 second load time prior.

In addition:

• A 5-6 second load time for the edit page is still really bad. Even on drafts with almost no content, it takes 3-4 seconds before anything shows on screen.
• In the chrome inspector, I saw a huge amount of time being spent on TinyMCE related operations. I'm not certain if this points to anything nefarious.
• The Most Important thing to note is that these issues are not occurring when editing a post in the WP admin.

---

I conducted some additional tests when I responded to the user's follow-up. One contributing factor is that the user was using large images, and these slowed the page loads substantially. I also noticed that the editor takes roughly three times longer to load in Calypso. @phpmypython mentioned that JavaScript is taking longer to load. This isn't limited to Tiny MCE. Here's another example:

Request URL:https://REDACTED.com/wp-json/wp/v2/blocks/11939?_locale=user
Request method:GET
Remote address:192.0.78.151:443
Status code:
200
Version:HTTP/2.0
Referrer Policy:strict-origin-when-cross-origin

This took 5.131 seconds to load in WP Admin compared to 13.042 seconds in Calypso, here:

Screenshot direct link: https://cld.wthms.co/9pNzsA

What I expected

Page loads for the block editor should be similar between Calypso and WP Admin.

What happened instead

The editor seems to load substantially slower in Calypso, compared to WP Admin, for the same post.

Browser / OS version

Firefox Developer Edition, v70.0b14 on macOS 10.14.6

Screenshot / Video

See above

Context / Source

This is based on a user report with additional testing by Automatticians.

[lancewillett]

Performance is a major factor for a smooth NUX and ongoing editor experience.

Flow-sharing from @koke today on an internal P2 post where he mentioned the slow Calypso + Gutenberg loading times:

I went to edit this post… and it took 16 seconds from clicking on Edit until the editor loaded. 9 of those were waiting on me/sites.

[gwwar]

@lancewillett could we maybe add this to the project backlog instead? Initial work of improving perf speeds down to wp-admin load times would be more of a team effort and likely involves getting rid of the iframe integration. (It's too big to be a bug)

[lancewillett]

I agree on calling it a task rather than bug.

Still high priority, though. @gwwar Who are the best folks to work on this, around any team (Calypso framework folks, etc)? I'm happy to coordinate so it's not lost in the shuffle of the Manage backlog.

[gwwar]

With regards to who works on it folks should at the least be collaborating with Create and advising with perfops. Re ordering, it'd be a probably a potential project after moving forward Gutenberg as the default editor for everyone, but not sure how that slots in with other priorities.

It's at least a medium sized project especially if the media modal is a blocker for iframe removal.

[gwwar]

cc @amamujee

[simison]

It's at least a medium sized project especially if the media modal is a blocker for iframe removal.

While this Github issue describes the experience well, there are probably 5+ separate todos here that some are project-sized, and worked on across several teams. E.g. @griffbrad 's team is working on async loading TinyMCE libraries in core.

Another collection of sub-tasks would be getting rid of Calypsofy for iframe (p4TIVU-9p3-p2).

[creativecoder]

One of the "projects" for improving this:

p4TIVU-9p3-p2 describes redirects in Calypso before loading the editor that adds 1-3 seconds to overall page load time.

[davemart-in]

I'm removing this from the Manage Group backlog based on Aadil's feedback in our last Cycle planning meeting, but I'm cc'ing you @sirreal so that this one is on your radar.

[happychait]

20916782-hc

[tyxla]

I'm tinkering with this today.

[tyxla]

We found and fixed a low-hanging fruit that really influences the loading time for users with many sites in their account: #45904

There is also a pending change that suggests removing the unnecessary redirect, that should save between 0.5 and 1 seconds on the initial editor load: D50124-code

I'm planning to explore further in the following days.

[tyxla]

A couple more improvements on the Calypso side today:

• Block Editor: AsyncLoad EditorMediaModal #45932 - asynchronously loading the media library modal
• Block Editor: Preload together with Post Editor section #45934 - leverage preloading for the Gutenberg editor section

[tyxla]

D50124-code has landed! We've filed Automattic/jetpack#17286 to port this change to Jetpack / Atomic.

[tyxla]

We landed a bunch of improvements in the meantime, among which:

• Admin Menu: Optimize user blog counting jetpack#23447
• Assets: Fix defer for async scripts jetpack#23928
• Masterbar: Async the admin menu upsell nudge - take 2 jetpack#24304
• D74932-code
• D78785-code
• D79525-code
• D81197-code

And since we landed RUM data for the editor, we can see large improvements from these and the recent core perf improvements already.