Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. How to separate core block styles in WordPress

How to separate core block styles in WordPress

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.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Make sure you’re on the “General” menu.

Perfmatters General menu
Perfmatters General menu

Step 3

Scroll down and toggle on “Separate Block Styles.”

Separate core block styles
Separate core block styles

Step 4

Scroll down and click “Save Changes.”


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.

Was this article helpful?

Related Articles