Make WordPress Core

Opened 10 months ago

Closed 10 months ago

Last modified 6 months ago

#58560 closed enhancement (fixed)

Performance issues with `wp_common_block_scripts_and_styles`

Reported by: spacedmonkey's profile spacedmonkey Owned by: spacedmonkey's profile spacedmonkey
Milestone: 6.3 Priority: normal
Severity: normal Version: 5.0
Component: Script Loader Keywords: has-patch has-unit-tests commit
Focuses: performance Cc:


In function wp_common_block_scripts_and_styles is bad for performance. This is because it does a lot of file operations. Uses glob and file_get_contents. This does this for styles are may not even be loaded on a page.

Change History (13)

#1 @spacedmonkey
10 months ago

There is a PR with a fix here.

This ticket is blocked by #58528

This ticket was mentioned in PR #4707 on WordPress/wordpress-develop by @spacedmonkey.

10 months ago

  • Keywords has-patch has-unit-tests added

#3 @spacedmonkey
10 months ago

  • Owner set to spacedmonkey
  • Status changed from new to assigned

#4 @spacedmonkey
10 months ago

  • Milestone changed from Future Release to 6.3
  • Version set to 5.0

Benchmarks, 1000 runs on TT2.

Trunk PR
Response Time (median) 126.62 114.16
wp-load-alloptions-query (median) 1.42 1.41
wp-before-template (median) 47.75 48.31
wp-before-template-db-queries (median) 6.45 6.43
wp-template (median) 73.97 61.42
wp-total (median) 121.88 109.85
wp-template-db-queries (median) 3.95 3.91

The theme has to have add_theme_support( 'wp-block-styles' ); to see the benefit, so using TT2 for the benchmarks is important.

#5 @flixos90
10 months ago

Thanks @spacedmonkey for looking into this. I also ran a set of benchmarks and can confirm a notable performance impact, which makes this worth considering even this late in the cycle. The numbers I see are even more impactful, resulting in a crazy 35% performance improvement (wp-total metric) when using TT2. I can also confirm that this performance improvement only applies to block themes that have theme support for "wp-block-styles".

See this spreadsheet for the full benchmarking results.

With that said, I am personally not familiar and comfortable enough with the underlying logic to approve the PR by myself. It would be great to have someone else more familiar with the underlying logic review. Maybe @noisysocks @oandregal?

This ticket was mentioned in Slack in #core by chaion07. View the logs.

10 months ago

@oandregal commented on PR #4707:

10 months ago

I've done some search, but it's difficult to pinpoint who was involved in this work, given all the moving code around between core and gutenberg. Playing by ear and pinging @aristath, as he has worked in this area, in case he can provide feedback.

#8 @spacedmonkey
10 months ago

Testing instructions.

  1. Activate TT2 theme.
  2. Create a post.
  3. Insert the following blocks audio, code, gallery, image, quote, search.
  4. Add title and publish.
  5. Navigate to post on FE.
  6. View source of page.
  7. Search for wp-block-<block_name>-theme-inline-css.
  8. Ensure that all of the block listed above have inline theme styles.

@oandregal Testing details

@spacedmonkey commented on PR #4707:

10 months ago

Thanks for the PR @spacedmonkey! I left one nitpick that can be addressed here or in a follow-up "catch-all" commit, so it's not a blocker.

@costdev Feedback complete.

#10 @spacedmonkey
10 months ago

  • Keywords commit added

#11 @spacedmonkey
10 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 56064:

Script Loader: Fix performance issues in wp_common_block_scripts_and_styles.

In [52069] the function wp_common_block_scripts_and_styles was changed load individual theme stylesheets, if the current theme supports block styles and loading separate core block assets. To do this, the function calls many expensive file operation functions, such as glob, file_exists and file_get_contents. This is wasteful, as these functions are loaded on every page request, even request that do not include blocks, like REST API calls. In [56044] all core block styles are registered in a single place. In register_core_block_style_handles calls glob to get all css styles in block directories. While registering style and editor styles, also register block theme styles, under a new style handle. Example wp-block-avatar-theme. If the current theme supports block styles, also request the block to enqueue the theme style on the front end. As these new stylesheets have a path attribute set, the function wp_maybe_inline_styles will automatically inline the styles for you.

Props spacedmonkey, flixos90, oandregal, costdev, audrasjb, mukesh27.
Fixes #58560.

This ticket was mentioned in Slack in #core-performance by joemcgill. View the logs.

6 months ago

Note: See TracTickets for help on using tickets.