Plugin Proposal: Stylesheet Optimizer

[westonruter]

Overview

• Proposed plugin name: Stylesheet Optimizer
• Proposed plugin slug: stylesheet-optimizer
• Proposed plugin owner GitHub username(s): westonruter

About the plugin

Purpose

When using a classic theme, the stylesheets for blocks are enqueued on every page even when they are not used. Similarly, the main block-library stylesheet is also enqueued rather than enqueueing individual stylesheets for each block that is actually used on the page. This is all wasteful.

Scope

Enable the should_load_separate_core_block_assets filter by default, even for classic themes. Move all styles printed in wp_footer up to the HEAD in the original dependency order as if the filter had not been applied. (See also Core-61965.)

This wouldn't necessarily depend on Optimization Detective since there would be no need for URL Metrics. All that is needed is the output buffering filter that Optimization Detective utilizes, and possibly the use of the HTML Tag Processor (cf. #1546) for removing the footer styles and putting them in the HEAD. Without Optimization Detective, we just need an output buffering mechanism which could replicate same output buffering used in that plugin, or else push to get Core-43258 done for 6.8.

Then again, a subsequent enhancement for this plugin could be to leverage URL Metrics to detect what the critical styles are, so a dependency on Optimization Detective may make sense.

Rationale

The idea for a plugin was raised in a support forum topic by guillermo77.

[swissspidy]

Related:

• Help browsers to avoid render-blocking CSS with preloading #613 (maybe close as duplicate?)
• Prioritize loading fonts for textual LCP elements #1313

I wish tree shaking was easily possible, I heard you have experience in that 😃

[westonruter]

I wish tree shaking was easily possible, I heard you have experience in that 😃

Yeah, so do I. The problem is that pages which have arbitrary JavaScript could modify the DOM at runtime to make use of a CSS selector that isn't used at serve time. The AMP plugin can do tree shaking effectively because the AMP components are declarative so it can (mostly) figure out which CSS selectors could apply at runtime.

[westonruter]

I've milestoned Core-43258 now to add output buffering for 6.8 6.9.

Related:

• Core-63007: Bundled themes: Stylesheets for block themes are missing path data for inlining
• Core-63012: Bundled themes: Stylesheets should be minified
• Core-58519: Inline styles block styles in bundled themes
• Core-63018: Increase styles_inline_size_limit from 20,000 bytes
• Core-63676: Blocks without rendered content still enqueue scripts and styles

[westonruter]

Example plugin which loads separate core block assets in the HEAD for classic themes, assuming output buffering is available: https://gist.github.com/westonruter/99af37489334927aaf04a46eaf2a11eb

[westonruter]

One thing we could do which does relate to Optimization Detective: automatically move styles for blocks that do not appear in the initial viewport down to the footer, and load those styles externally rather than being inlined.

I did this on my own site which has the heavy Social Links block in the footer. Using the following plugin code, the stylesheet is prevented from being inlined and it is forced into the footer (where the block appears):

add_action(
	'wp_enqueue_scripts',
	static function () {
		$handle = 'wp-block-social-links';

		$style = wp_styles()->query( $handle, 'registered' );
		if ( ! $style ) {
			return;
		}

		// Prevent inlining.
		unset( $style->extra['path'] );

		// Move to footer.
		$style->add_data( 'group', 1 ); // This doesn't seem to work. I need to dequeue and then re-enqueue in the footer.
		if ( wp_style_is( $style->handle, 'enqueued' ) ) {
			wp_dequeue_style( $style->handle );
			add_action( 'wp_footer', function () use ( $style ) {
				wp_enqueue_style( $style->handle );
			}, 0 );
		}
	},
	PHP_INT_MAX
);

This could be automated.

[westonruter]

See also:

• Social Icons (Links) and Cover blocks include unused CSS in most cases gutenberg#69613