Minify CSS causes Cumulative Layout Shift

It looks like the Minify feature works in an unexpected way. When I enable it for CSS files, all my CSS links are removed from the HTML and some JavaScript is added to load those files asynchronously.

This is not how I expect minification to work and has some unintended down sides.

Because it’s using JavaScript to load the CSS, the website receives a lower Lighthouse score due to Cumulative Layout Shift after the JS is loaded and then the CSS is downloaded. In fact, this is also a worse experience from a performance perspective as the user visually sees the unstyled content.

This also has a negative impact if JavaScript is disabled. It’s not an audience I target, but everything on my site currently works with JavaScript disabled, and I’d like to keep it that way.

The way I would expect CSS minification to work (and how other plugins do it) is to process the existing CSS files and then replace them with a new link in the HTML file to the minified resources. Not to asynchronously load them with JavaScript.

The asynch load would be a cool feature as an addition to this, but I don think minification should automatically enable async load.