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.

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

[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