A CSS-Overload Proposal from Nathan Rice
On his personal blog, Studio Press lead developer Nathan Rice makes an interesting point about the block-derived performance issues that may come from having lots of Gutenberg blocks and lots of CSS rules to style them in WordPress after 5.0. I don’t know how serious the performance degradation will be over time — I don’t know if anyone does. But I do know that it’s worth some consideration that as you load more styles it does indeed impact the waterfall of the site, as Nathan highlights.
I didn’t really consider the opportunity to print CSS styles exactly where you need them that Nathan is highlighting, but I think it’s an intriguing and promising method that at a minimum I want to call your attention to. Here’s the briefest summary of the content I think Nathan is driving at:
When you enqueue styles this way, every stylesheet link gets output to the
<head>. Each stylesheet is registered with a unique handle, so the same stylesheet link doesn’t get linked more than once.
I’m not suggesting that we start linking our own stylesheets outside the WordPress way. But something does have to change.
What if you could register stylesheets the same way, but instead of enqueueing them to be output in the
<head>, you could call a function manually that would output the stylesheet link (with any dependencies) immediately before a block. Once a link is rendered, the WordPress stylesheet manager could make sure it doesn’t get rendered again.
As it turns out, you can!