I’m just getting started with ACF Blocks, which to an old-school PHP developer like me is a good way to start to free myself of the Classic Editor plugin.
So, in good old, modular fashion I have a blocks folder with lots of subfolders and they all have their CSS. But they’re beginning to build up. Lots of HTTP requests for tiny style files.
I know that eventually I can get Litespeed to do the heavy lifting and generate a new CSS file but I’m curious as to whether I’m using best practice or whether I should just reference one large CSS file from all blocks.
I know that only those files that are needed are loaded but that also makes caching tricky as every page on my site will have a different set of CSS files.
Opinions?
I struggled with this myself after migrating to using block.json (ACF v2 blocks). One of my issues was with visible cumulative layout shift due to Classic/Hybrid themes loading CSS in the footer. I posted about it Here.
I also tried moving all CSS to a single file as well, but that became inconvenient when reusing blocks. Currently I also use separate CSS/JS files within separate block folders which appears to be the new “norm” for building ACF blocks.
From what I can tell, the concerns you mention as well as issues I faced will continue until moving to an FSE block theme. There is some good information regarding filter options that are available that may be of benefit for asset loading Here.
I am not 100% certain, but I believe WP Rocket caching has the ability to filter out unused CSS to reduce the overall load. I may investigate this as a possible solution until I jump onboard to FSE block themes.
This is not specific to blocks or classic editor. For performance the best choice is to include local inline CSS for small chunks of CSS code that may or may not be needed when the page is generated.
I realize this is counter-intuitive for most of us old school developers and it took me a while to accept as well.
Multiple small CSS files == bad for performance
Large CSS with styles that are not used == bad for performance
Inline CSS == better for performance.
So in the same file where you are generating the HTML you just add <style> ..... </style>. Even better if you do so in a way that only includes this once per page if the same code is called more than once.
