Skip to content

Conversation

@youknowriad
Copy link
Contributor

Not certain how much these small tweaks will improve performance but this PR could serve at least to raise some awareness.
Using useSelect is not without costs. Everytime you return a value from useSelect,

  • make sure that this value is needed for rendering and not for event handlers (otherwise the selector call can be moved to the event handler instead)
  • make sure it's not a value that changes often and cause too frequent rerenders. For example, getBlockIndex change often for blocks after the current selection. (Everytime a new block is added or removed)

@youknowriad youknowriad added the [Type] Performance Related to performance efforts label Jul 9, 2020
@youknowriad youknowriad requested a review from ellatrix as a code owner July 9, 2020 11:45
@youknowriad youknowriad self-assigned this Jul 9, 2020
@github-actions
Copy link

github-actions bot commented Jul 9, 2020

Size Change: -20 B (0%)

Total Size: 1.14 MB

Filename Size Change
build/block-editor/index.js 115 kB -20 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.67 kB 0 B
build/block-directory/style-rtl.css 944 B 0 B
build/block-directory/style.css 945 B 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.54 kB 0 B
build/block-library/editor.css 7.54 kB 0 B
build/block-library/index.js 130 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.76 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 199 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.56 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.59 kB 0 B
build/edit-post/style.css 5.58 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.35 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45 kB 0 B
build/editor/style-rtl.css 3.78 kB 0 B
build/editor/style.css 3.78 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.4 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@youknowriad youknowriad force-pushed the try/performance-tweaks branch from 5faee36 to ab3fb38 Compare July 9, 2020 12:06
@youknowriad youknowriad added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 9, 2020
@youknowriad
Copy link
Contributor Author

Seems like we're gaining 3ms out of 30ms in terms of typing. That's a 10% improvement for this tiny PR.

@youknowriad youknowriad merged commit 587b018 into master Jul 9, 2020
@youknowriad youknowriad deleted the try/performance-tweaks branch July 9, 2020 13:31
@github-actions github-actions bot added this to the Gutenberg 8.6 milestone Jul 9, 2020
@chrisvanpatten
Copy link
Contributor

@youknowriad These are great tips! Would it be helpful to have some performance tips documented, either as part of the @wordpress/data docs or in a new docs page? Happy to collect these and start putting something together.

@youknowriad
Copy link
Contributor Author

@chrisvanpatten Definitely, I'm not really certain what's the best place for it, could be this page https://developer.wordpress.org/block-editor/principles/architecture/performance/ but I'd love to see these documented and other tips people have.

youknowriad added a commit that referenced this pull request Jul 13, 2020
@youknowriad youknowriad removed the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 13, 2020
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.

3 participants