Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Large navigation menus load slowly and exhaust server resources #42904

Open
dretzlaff opened this issue Aug 2, 2022 · 4 comments
Open

Large navigation menus load slowly and exhaust server resources #42904

dretzlaff opened this issue Aug 2, 2022 · 4 comments
Labels
[Block] Navigation Link Affects the Navigation Link Block [Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended [Type] Performance Related to performance efforts

Comments

@dretzlaff
Copy link

Description

Our website has a menu with several submenus linking 30-40 pages in all. Loading the full site editor triggers API requests for ALL the pages. This is quite slow and results in multiple HTTP 508 Resource Limit Is Reached. Requests are CPU-limited on the server and our shared hosting environment limits pending requests to 20. This is ample server resources for everything we need except loading the site editor.

The cause seems to be this feature which decorates items if they point at invalid pages. Each page in the menu gets loaded.
https://github.com/WordPress/gutenberg/pull/31716/files

The HTTP 508 responses typically come from page requests with this stack trace:
useSelect @ data.js
useIsInvalidLink @ block-library.js
NavigationLinkEdit @ block-library.js

I would suggest that loading each page in a menu doesn't scale well. I don't know enough to suggest a path forward, but batching requests or at least limiting their concurrency would solve this.

Step-by-step reproduction instructions

  1. Create a template containing a menu with multiple page links
  2. Open the template in the full site editor.
  3. Note network requests to each referenced page, e.g. wp-json/wp/v2/pages/##?context=edit&_locale=user

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.0.1
Chrome 103.0.5060.134
Windows 10.0.19043 Build 19043
Theme twentytwentytwo Version 1.2
Server Linux 3.10.0-962.3.2.lve1.5.38.el7.x86_64 x86_64
Web server Apache
PHP 7.4.30

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 Mamaduka added [Type] Performance Related to performance efforts [Block] Navigation Affects the Navigation Block labels Aug 2, 2022
@talldan
Copy link
Contributor

talldan commented Aug 3, 2022

Just noticed this issue. I couldn't get the feature introduced by #31716 working anyway. It only seems to partially work. It probably needs a bit of a revamp.

This is an interesting engineering problem though. The link blocks are independent of one another and each making requests, so it would be difficult to orchestrate the requests.

It seems like if your concurrent requests are limited to 20 then there might be a few parts of the block editor that can cause issues. 😬

I wonder if you could introduce some of your own middleware to API Fetch (the request library used by gutenberg) to limit concurrent requests and smooth things out on your server. This is where the code is if you're interested in exporing that:
https://github.com/WordPress/gutenberg/tree/trunk/packages/api-fetch

@talldan talldan added the [Block] Navigation Link Affects the Navigation Link Block label Aug 3, 2022
@dretzlaff
Copy link
Author

I like the idea of a middleware that limits concurrent requests using a queue of promises. I've implemented that in backend systems to good effect. Learning the frontend/npm world would be an investment for me, but I might look at it in a month or two. My workaround for now is to use mod_rewrite on the server to identify these page requests and return a static JSON response. Thanks, talldan. (-shortdan? :)

@getdave getdave added the [Type] Bug An existing feature does not function as intended label Aug 4, 2022
@jordesign
Copy link
Contributor

@dretzlaff - Just looping back to this older report to see if you still see performance issues when testing larger menus?

@dretzlaff
Copy link
Author

Hi! The site editor still makes a request for each page in the menu. On our shared Nixihost server, each request takes about 10 seconds and they're coming back in batches of 10, e.g. first 10 responses after 10s, 10 more requests finish after 20s, the last 10 requests finish after 30s. It feels slow.

The requests have URLs like this, one for each page:
https://SERVER/REST_URL_PREFIX/wp/v2/pages/88?context=edit&_locale=user

That said, Nixihost recently changed from Apache to Litespeed and probably along with that, no longer returns HTTP 508 after 20 requests are pending. So even though it's slow, at least it's not generating errors. As such, and given the learning curve for me to contribute correctly to WordPress, I won't be developing an improvement myself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Link Affects the Navigation Link Block [Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended [Type] Performance Related to performance efforts
Projects
None yet
Development

No branches or pull requests

5 participants