search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

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

Open pauljacobson opened 5 years ago

pauljacobson commented 5 years ago

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:

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

cc @amamujee

simison commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

20916782-hc

tyxla commented 4 years ago

I'm tinkering with this today.

tyxla commented 4 years ago

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 commented 4 years ago

A couple more improvements on the Calypso side today:

tyxla commented 4 years ago

D50124-code has landed! We've filed https://github.com/Automattic/jetpack/pull/17286 to port this change to Jetpack / Atomic.

tyxla commented 2 years ago

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

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