Improve the initial loading of the site editor #36044
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
requested review from
mcsf,
adamziel,
jsnajdr,
jasmussen and
jorgefilipecosta
youknowriad
commented
Oct 28, 2021
| if ( typeof options.path === 'string' ) { | ||
| let rawPath = options.path; | ||
| if ( ! rawPath && options.url ) { | ||
| rawPath = getQueryArg( options.url, 'rest_route' ); |
There was a problem hiding this comment.
For the active global styles endpoint, we rely on url because the URL is actually returned in another endpoint. This is the best way I've found to allow using the preloaded data in this case. Let me know if there's a better approach.
youknowriad
commented
Oct 28, 2021
| @@ -23,7 +23,7 @@ export const defaultEntities = [ | |||
| label: __( 'Base' ), | |||
| name: '__unstableBase', | |||
| kind: 'root', | |||
| baseURL: '', | |||
| baseURL: '/', | |||
There was a problem hiding this comment.
the / is preloaded.
youknowriad
commented
Oct 28, 2021
| @@ -136,6 +136,14 @@ export const defaultEntities = [ | |||
| plural: 'globalStylesVariations', // should be different than name | |||
| getTitle: ( record ) => record?.title?.rendered || record?.title, | |||
| }, | |||
| { | |||
| label: __( 'Themes' ), | |||
There was a problem hiding this comment.
This adds the "themes" entity allowing us to rely on the redux cache and avoid multiple /wp/v2/themes requests.
youknowriad
commented
Oct 28, 2021
| getEntityRecord, | ||
| 'getEntityRecord' | ||
| ); | ||
| export const getRawEntityRecord = forwardResolver( 'getEntityRecord' ); |
There was a problem hiding this comment.
The difference between the two approaches is that there are actually "two caches" for resolvers: the one that is in the state which ifNotResolved relied on but that one ignores the temporary cache used to track resolvers that are set to be triggered after a setTimeout call (see
ifNotResolved there's a change of running the same resolver twice if we call the same selector twice no the same tick, one with getEntityRecord and one time with getRawEntityRecord. (This was actually happening in the site editor)
youknowriad
commented
Oct 28, 2021
| return cache[ selectorName ] && cache[ selectorName ].get( args ); | ||
| return ( | ||
| cache[ selectorName ] && | ||
| cache[ selectorName ].get( trimUndefinedValues( args ) ) |
There was a problem hiding this comment.
I noticed that 1, 2, undefined and 1, 2 args were being considered as different args while they are equivalent for us. We had a use-case in the site editor where this caused the same resolver to run twice.
youknowriad
commented
Oct 28, 2021
| const isReady = | ||
| settings?.siteUrl && | ||
| templateType !== undefined && | ||
| entityId !== undefined; |
There was a problem hiding this comment.
This ensures we only mount everything once. EntityProvider was remounting everything when the entity id changes.
youknowriad
commented
Oct 28, 2021
| @@ -176,107 +177,113 @@ function Editor( { initialSettings, onError } ) { | |||
| }; | |||
|
|
|||
| return ( | |||
| <ShortcutProvider> | |||
| <> | |||
| <URLQueryController /> | |||
There was a problem hiding this comment.
Ideally this should be a hook and not a component.
There was a problem hiding this comment.
I'll extract this into a separate issue, so we don't forget.
youknowriad
commented
Oct 28, 2021
|
|
||
| return context; | ||
| } | ||
|
|
||
| export function GlobalStylesProvider( { children } ) { | ||
| const context = useGlobalStylesContext(); | ||
| if ( ! context.isReady ) { |
There was a problem hiding this comment.
While the user styles endpoint and all is preloaded now, you can still notice a change in the UI/colors... on initial load if we don't wait for the "mergedConfig" to be ready. I guess it's because all the resolvers are async and that there are a lot of them running on initial load.
youknowriad
commented
Oct 28, 2021
| ? { | ||
| search: searchQuery, | ||
| } | ||
| : undefined; |
There was a problem hiding this comment.
This ensures we hit the cache and avoid search= in the query string.
youknowriad
commented
Oct 28, 2021
| @@ -44,9 +44,7 @@ export default function TemplatesMenu() { | |||
| const { templates, showOnFront } = useSelect( ( select ) => { | |||
| const { getEntityRecords, getEditedEntityRecord } = select( coreStore ); | |||
| return { | |||
| templates: getEntityRecords( 'postType', 'wp_template', { | |||
| per_page: -1, | |||
There was a problem hiding this comment.
per_page is not supported in the wp_template and wp_template_part post types.
|
Took it for a spin, and only as a brief superficial test, feels good! Licecap doesn't very well capture all the details here as the framerate is so low. It's hard to even make out the details, but the newer flow feels more seamless. Before: After: |
|
@jasmussen the difference is more important when the sidebar is open (global styles) |
|
Well, that's a lot of test failures 😬 |
mtias
added
[Priority] High
jsnajdr
reviewed
Oct 28, 2021
| getEntityRecord, | ||
| 'getEntityRecord' | ||
| ); | ||
| export const getRawEntityRecord = forwardResolver( 'getEntityRecord' ); |
There was a problem hiding this comment.
This is a great idea. The forwardResolver name says much more clearly what it does than ifNotResolved.
|
Size Change: +116 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
Mamaduka
reviewed
Oct 29, 2021
| @@ -89,7 +89,7 @@ const EmbedEdit = ( props ) => { | |||
| return { | |||
| preview: validPreview ? embedPreview : undefined, | |||
| fetching: isRequestingEmbedPreview( attributesUrl ), | |||
| themeSupportsResponsive: getThemeSupports()[ | |||
| themeSupportsResponsive: getThemeSupports()?.[ | |||
There was a problem hiding this comment.
Theme supports can be undefined before it's resolved. I was able to reproduce it locally by adding an embed block and then reloading the page.
There was a problem hiding this comment.
I guess on the previous implementation, we were always returning an empty object. Should we maybe update the selector to return an empty object (backward compat)
There was a problem hiding this comment.
I think it matches the expected selector/resolver behavior now. Other places in core use loadash.get, so there's no need to update.
Should we maybe update the selector to return an empty object (backward compat)
I will leave that up to you 😄
There was a problem hiding this comment.
I updated the selector because we don't know how third-party users could be using it.
|
Great work on this PR, @youknowriad 🥇 I see API requests reduced from 30+ to 20, and loading time is improved ~300ms for me locally. |
|
Maybe performance tests need to be modified (at least on this branch) to help monitor results? It's a lot quicker to run through some hypotheses when we can measure it. There doesn't look like there's much change currently. For reviewers we can visually confirm what the performance suite is doing by running the following: |
|
The main goal of this PR was not necessarily to improve the performance numbers, but more the perceived performance. In trunk, there's a lot of steps you can notice visually when the page is being loaded (especially related to global styles), this PR removes the number of steps and preloads more REST API requests. The result is that the server response is slower (expected as we do preload more API requests) but the time to show the first block is a bit better maybe. |
|
I think this should be ready. |
Mamaduka
approved these changes
Nov 2, 2021
aristath
approved these changes
Nov 2, 2021
youknowriad
force-pushed
the
update/improve-loading-site-editor
branch
from
dad9d2b to
2e6eddc
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When you load the site editor, there are a number of subtle issues at play:
This PR tries to improve the situation in different places, it doesn't solve everything but it's a step (or multiple) forward.