Optimizing the loading of block styles in WordPress 5.8

If you are already enjoying the changes that WordPress 5.8 introduced, you should keep in mind that you can optimize the loading of editor block styles.

Were there any problems with block styles before?

Previously, to load the styles of the blocks, WordPress loaded the styles of all the blocks in all posts and pages, even if most of them were not used, with the consequent optimization problem for 2 reasons:

1. By relying on a call to a resource external to the page it was not possible to cache the styles, unless techniques such as generating the critical CSS path are applied.
2. Too many styles were loaded, most of them unnecessary, without taking into account which ones were needed for each specific post or page.

Since WordPress 5.8 you can make it so that this link to the stylesheet is not included in the header of your pages and posts, but instead….

1. Only the styles needed for the existing blocks on each page will be loaded.
2. Small styles will have the CSS inserted directly into the code instead of loading the stylesheet.

So, if you have only included the paragraph and header blocks on a page, only the styles needed to display those blocks will be loaded, but not the rest of the styles for all the other blocks in the editor, as was the case until now.

And if the page only needs a few styles, instead of requesting the loading of a small stylesheet, those styles will be inserted directly into the page code, something similar to what the critical CSS technique does.

Is block style load optimization automatic?

No, even if you upgrade to WordPress 5.8 this optimization improvement will not be applied automatically, but your theme has to be compatible with this new feature.

You can wait for the developer of your theme to incorporate it or you can do it yourself by adding this filter to the functions.php file of the active theme (remember, it must be a child theme):

add_filter( 'should_load_separate_core_block_assets', '__return_true' );
Code language: JavaScript (javascript)

When you add this filter WordPress will no longer load the full stylesheet. Instead, it will do this:

1. The wp-block-library stylesheet, instead of loading the wp-includes/css/dist/block-library/style.css file containing all styles for all blocks, will now load the (much smaller) wp-includes/css/dist/block-library/common.css file, which contains generic styles, such as default colors, basic alignment styles, and the class for screen readers.
2. Block styles will only be included when the block is displayed on a page or post.
3. If the CSS is minimal, it will be inserted directly into the code, rather than loading the minimal stylesheet.

Is this a good thing?

Of course it is. WordPress applying new features that optimize the loading speed of the contents is the line to follow, and in this version, we have this optimization in the loading of the styles of the blocks, and compatibility with the WebP image format so we are on the right track.