By default, WordPress core block styles are loaded in a global stylesheet regardless of whether they are rendered on a page or not. You can change the block styles to only load when they are rendered. This can help performance, as it means less CSS loading across the site. On smaller sites, we’ve seen it actually decrease the amount of used CSS by up to 17%.
Separate core block styles
Follow the steps below to separate core block styles on your WordPress site.
Step 1
Click into the Perfmatters plugin settings.
Step 2
Make sure you’re on the “General” menu.
Step 3
Scroll down and toggle on “Separate Block Styles.”
Step 4
Scroll down and click “Save Changes.”
Notes
The above feature uses the should_load_separate_core_block_assets filter in WordPress core. It’s important to note that the CSS will be inlined in the body of the website, not the head. So it could cause warnings in the W3C validator tool.