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

Optimize preload paths for post and site editors #39256

Merged
merged 4 commits into from
Mar 10, 2022

Conversation

jsnajdr
Copy link
Member

@jsnajdr jsnajdr commented Mar 7, 2022

This PR optimizes the preloaded data for REST endpoints. Some preloaded data are removed, some endpoints are modified, some are added.

Removing the / preload. One of the endpoints we preload is /, where we use properties like site_icon_url or home. The response, however, also contains a huge routes field, bloating the initial HTML response. Before we can filter them out with a _fields query param, some Core patches will need to be merged first and that will take time.

In this PR I'm simply removing the preload. It's not needed for anything critical and the editor is perfectly functional even without the data. The data are used, for example, to display the site logo in place of the WP logos here (the fullscreen-close and pre-publish panels):

Screenshot 2022-03-07 at 15 28 33

That can certainly wait and doesn't need to block the editor initialization.

Fixing preloads for postType and taxonomies entities. There are functions that load entity data of certain types (postType and taxonomies), required to resolve any selector for these entities. They call the endpoints with context=view, but the preloads are for context=edit and are not used. This PR fixes the context params to match the real requests. An alternative way to fix this would be to change the actual requests to context=edit. I'm not sure what's the difference and whether it matters. Up for discussion.

Fixing preload for users/me. The preload is using a wrong URL:

/wp/v2/users/me?post_type=%s&context=edit

but we're fetching from just

/wp/v2/users/me

The old URL hasn't been used for a very long time: it used to load user permissions for a particular post type, and was used to implement the canUser selector. But we've been using OPTIONS requests and Allow response headers for that for a long time.

Adding preload for /settings. The request is done on a critical path, in the useBlockEditorSettings hook, so all the settings had better be available as soon as possible.

How to test:
Verify in the Network Devtool that none of these preloaded paths trigger a network request -- that would mean that the preloaded cached version was missed.

Verify that the initial HTML got significantly smaller as there are no longer data for the / endpoint.

@jsnajdr jsnajdr added the [Type] Performance Related to performance efforts label Mar 7, 2022
@jsnajdr jsnajdr self-assigned this Mar 7, 2022
@github-actions
Copy link

github-actions bot commented Mar 7, 2022

Size Change: +65 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/core-data/index.min.js 14 kB +65 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.49 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/index.min.js 144 kB
build/block-editor/style-rtl.css 14.8 kB
build/block-editor/style.css 14.8 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.56 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 965 B
build/block-library/blocks/gallery/editor.css 967 B
build/block-library/blocks/gallery/style-rtl.css 1.61 kB
build/block-library/blocks/gallery/style.css 1.61 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 518 B
build/block-library/blocks/image/style.css 523 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 447 B
build/block-library/blocks/latest-posts/style.css 446 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.89 kB
build/block-library/blocks/navigation/style.css 1.88 kB
build/block-library/blocks/navigation/view.min.js 2.85 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 323 B
build/block-library/blocks/post-template/style.css 323 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 389 B
build/block-library/blocks/pullquote/style.css 388 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 201 B
build/block-library/blocks/quote/style.css 201 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 744 B
build/block-library/blocks/site-logo/editor.css 744 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 934 B
build/block-library/common.css 932 B
build/block-library/editor-rtl.css 9.92 kB
build/block-library/editor.css 9.92 kB
build/block-library/index.min.js 168 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 11.4 kB
build/block-library/style.css 11.4 kB
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 670 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.4 kB
build/components/index.min.js 217 kB
build/components/style-rtl.css 15.6 kB
build/components/style.css 15.6 kB
build/compose/index.min.js 11.2 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.03 kB
build/date/index.min.js 31.9 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.53 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.04 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 29.9 kB
build/edit-post/style-rtl.css 7.24 kB
build/edit-post/style.css 7.24 kB
build/edit-site/index.min.js 41.9 kB
build/edit-site/style-rtl.css 7.44 kB
build/edit-site/style.css 7.42 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.39 kB
build/editor/index.min.js 38.4 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 4.29 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 B
build/react-i18n/index.min.js 704 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.94 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.23 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@jsnajdr jsnajdr force-pushed the optimize/preloading-paths branch from 9815174 to 1e462d6 Compare March 7, 2022 15:03
@jsnajdr jsnajdr requested review from adamziel and youknowriad March 7, 2022 15:03
lib/init.php Outdated
* @param array $preload_paths Preload paths to be filtered.
* @return array
*/
function optimize_preload_paths( $preload_paths ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function filters patches the preload_paths list created in Core when loading the block editor page.

When a Core patch with these changes is merged, the filter becomes a noop. The Core list and the Gutenberg plugin will always be out of sync, so this filter will patch the list according to latest Gutenberg's requirements.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should move this change to lib/wordpress-6.0/edit-form-blocks.php, that way it's easier for us to know when to remove that code from the plugin (minimum supported version) and how to backport it to Core (same file name).

We should probably do the same for the file above but I guess since it was not done before for the remaining parts of that file, it's fine to keep your changes there for now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, moved the edit-form-blocks bits to lib/compat.

About the edit-site-page.php modifications: there's not a direct counterpart to that file in Core. The Gutenberg plugins ships a completely standalone page for Full Site Editing, one that's not interacting or integrated with the one in Core at all. Its URL is /wp-admin/themes.php?page=gutenberg-edit-site, while the Core equivalent is /wp-admin/site-editor.php. The Gutenberg plugin intercepts all the links and replaces them.

Copy link
Member

@Mamaduka Mamaduka Mar 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll drop using a custom page for the Site Editor once the Gutenberg plugin requires WP 5.9 or later.

@gziolo gziolo requested a review from a team March 7, 2022 17:27
@youknowriad
Copy link
Contributor

I wonder if we can add a "payload size" metric to our performance tests to keep track of this over time.

@noisysocks
Copy link
Member

noisysocks commented Mar 7, 2022

Are the preload paths in Core (i.e. with the Gutenberg Plugin disabled) also not correct? Wondering if we need to update the paths there.

@jsnajdr
Copy link
Member Author

jsnajdr commented Mar 8, 2022

They (load*Entities functions) call the endpoints with context=view, but the preloads are for context=edit and are not used.

I just discovered that this was a recent intentional change in #37685. That PR was supposed to also change the preloads but it didn't. This PR fixes that.

@jsnajdr
Copy link
Member Author

jsnajdr commented Mar 8, 2022

Are the preload paths in Core (i.e. with the Gutenberg Plugin disabled) also not correct? Wondering if we need to update the paths there.

Yes, I just created a companion patch here: https://core.trac.wordpress.org/ticket/55337. It applies the changes that the filter in this PR would do. Except changing the context of /types and /taxonomies requests from edit to view, because we can do that only after Core starts shipping a Gutenberg version that includes #37685.

@jsnajdr jsnajdr force-pushed the optimize/preloading-paths branch from e96127c to 9a94170 Compare March 8, 2022 10:55
@gwwar
Copy link
Contributor

gwwar commented Mar 8, 2022

Nice find @jsnajdr! ✨ Leaving a note here that it does look like the change here shows an improvement in several site-editor stats: https://github.com/WordPress/gutenberg/runs/5463257206

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 44fa34fef7bf200bede9c6bd7[121](https://github.com/WordPress/gutenberg/runs/5463257206?check_suite_focus=true#step:5:121)89e3f900a563 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '146.17 ms'                │ '160.37 ms'  │
│      firstPaint      │               '252.23 ms'                │ '1804.3 ms'  │
│   domContentLoaded   │               '417.23 ms'                │ '1974.37 ms' │
│        loaded        │               '428.33 ms'                │  '1985 ms'   │
│ firstContentfulPaint │               '1144.07 ms'               │ '2807.83 ms' │
│      firstBlock      │               '6365.43 ms'               │ '6562.6 ms'  │
│         type         │                '37.34 ms'                │  '39.87 ms'  │
│       minType        │                '29.18 ms'                │  '32.32 ms'  │
│       maxType        │                '85.41 ms'                │  '82.23 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

There doesn't appear to be any effect on the post-editor, but I assume this needs WordPress/wordpress-develop#2387 to be applied.

Note that it's possible to run performance tests locally with:

./bin/plugin/cli.js perf trunk <yourbranch>

And if folks need to debug the performance test scripting, it's possible with:

npm run test-performance -- --wordpress-base-url=<base> --wordpress-username=<username>--wordpress-password=<password> --puppeteer-interactive packages/e2e-tests/specs/performance/post-editor.test.js
  
npm run test-performance -- --wordpress-base-url=<base> --wordpress-username=<username>--wordpress-password=<password> --puppeteer-interactive packages/e2e-tests/specs/performance/site-editor.test.js

@jsnajdr
Copy link
Member Author

jsnajdr commented Mar 9, 2022

There doesn't appear to be any effect on the post-editor, but I assume this needs WordPress/wordpress-develop#2387 to be applied.

The Core patch doesn't need to be there -- it merely directly changes the paths in $preload_paths instead of modifying them through a filter, like the Gutenberg plugin is doing in this PR. The result should be the same.

The post-editor results are weird, especially the serverResponse one. It should be much faster now (the response is 50% smaller) but instead the performance test is reporting a slowdown (!?) I'm now investigating why would the results be like this and if they're are reliable. The reported number is an average/median of 15 measurements, and the tests don't report what their variance is.

@jsnajdr
Copy link
Member Author

jsnajdr commented Mar 9, 2022

Running the post-editor suite locally, I see the following values for serverResponse:

  • before: 1129ms ± 186ms
  • after: 1058ms ± 226ms

@gwwar
Copy link
Contributor

gwwar commented Mar 9, 2022

I triggered another run, but the second run now shows improvements for the post-editor and not much change in the site-editor. We may need to revisit how we're measuring this.

We could be seeing some variance from the fact that the post editor has a much smaller skeleton size. Locally (with npm run build) I'm seeing 82KB (this branch) vs 95KB (trunk), while the site editor has a skeleton size of around 1.1MB (depending on your template content).

Copy link
Contributor

@gwwar gwwar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your work here @jsnajdr! Changes here make sense to me and I didn't see any regressions while smoke testing. It may be worthwhile to get another +1

@jsnajdr jsnajdr merged commit 5201e26 into trunk Mar 10, 2022
@jsnajdr jsnajdr deleted the optimize/preloading-paths branch March 10, 2022 08:15
@github-actions github-actions bot added this to the Gutenberg 12.9 milestone Mar 10, 2022
@jsnajdr
Copy link
Member Author

jsnajdr commented Mar 10, 2022

We could be seeing some variance from the fact that the post editor has a much smaller skeleton size. Locally (with npm run build) I'm seeing 82KB (this branch) vs 95KB (trunk), while the site editor has a skeleton size of around 1.1MB

This looks more like a confusion between compressed and uncompressed size of the response. In my bare bones wp-env installation, after this PR, I see the following sizes of the initial document (either post.php or themes.php):

  • post editor: 78,8 kB compressed / 562 kB uncompressed
  • site editor: 74,0 kB compressed / 545 kB uncompressed

@mtias
Copy link
Member

mtias commented Mar 10, 2022

Thank you @jsnajdr, cool to see the optimization!

@gwwar
Copy link
Contributor

gwwar commented Mar 10, 2022

@jsnajdr Actually it's dependent on site content. My template uses a query loop with some large test posts and this bloats the initial document size. Try publishing large posts similar to the ones used in the performance tests.

Here's a quick video of just one published post making a difference in the document size. There's a much more notable effect when one has a number of large test posts.

264KB vs 78KB when we trash it.

CleanShot.2022-03-10.at.09.26.44.mp4

jeherve added a commit to jeherve/gutenberg that referenced this pull request Mar 17, 2022
jsnajdr pushed a commit that referenced this pull request Mar 17, 2022
jostnes pushed a commit to jostnes/gutenberg that referenced this pull request Mar 23, 2022
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Mar 25, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me path` so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.

See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Fixes #55337.


git-svn-id: https://develop.svn.wordpress.org/trunk@52995 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Mar 25, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me path` so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.

See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Fixes #55337.

Built from https://develop.svn.wordpress.org/trunk@52995


git-svn-id: http://core.svn.wordpress.org/trunk@52584 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott pushed a commit to gMagicScott/core.wordpress-mirror that referenced this pull request Mar 25, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me path` so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.

See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Fixes #55337.

Built from https://develop.svn.wordpress.org/trunk@52995


git-svn-id: https://core.svn.wordpress.org/trunk@52584 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Mar 28, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me` path so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.
See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Merges [52995] to the 5.9 branch.


git-svn-id: https://develop.svn.wordpress.org/branches/5.9@53005 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Mar 28, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me` path so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.
See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Merges [52995] to the 5.9 branch.

Built from https://develop.svn.wordpress.org/branches/5.9@53005


git-svn-id: http://core.svn.wordpress.org/branches/5.9@52594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott pushed a commit to gMagicScott/core.wordpress-mirror that referenced this pull request Mar 28, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me` path so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.
See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Merges [52995] to the 5.9 branch.

Built from https://develop.svn.wordpress.org/branches/5.9@53005


git-svn-id: https://core.svn.wordpress.org/branches/5.9@52594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
whereiscodedude pushed a commit to whereiscodedude/wpss that referenced this pull request Sep 18, 2022
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me` path so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.
See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Merges [52995] to the 5.9 branch.

Built from https://develop.svn.wordpress.org/branches/5.9@53005
VenusPR added a commit to VenusPR/Wordpress_Richard that referenced this pull request Mar 9, 2023
This patch optimizes preload paths in post and site editors so that they match the real requests:

- Remove the `/` preload as the payload is very big and the response is not needed on any critical path.
- Modify the preloaded path for `/wp/v2/taxonomies` so that it corresponds to what `loadTaxonomyEntities` requests. After Gutenberg PR 37685 was merged to core, these preloads need to be modified to use `context=view` instead of `context=edit`.
- Modify the `/wp/v2/users/me` path so that it matches the real request (no query params).
- Add a preload of `/wp/v2/settings` because it is requested on critical path (editor boot). Site editor already preloads this, the changeset is only adding it to the post editor.

This is related to Gutenberg PR 39256 which introduces compatibility code to modify the preload paths with a filter, when the Gutenberg plugin is active.
See WordPress/gutenberg#39256.

Props jsnajdr, noisysocks.
Merges [52995] to the 5.9 branch.

Built from https://develop.svn.wordpress.org/branches/5.9@53005


git-svn-id: http://core.svn.wordpress.org/branches/5.9@52594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants