Remove Gutenberg CSS Library from WordPress

December 20, 2021 • Category - Web Development, Wordpress • 2,676 views
ShareShare on FacebookShare on Twitter

Overview

As web developers, in our never-ending attempt to keep Google happy with good Lighthouse scores, and to help with making your WordPress site load as fast as possible, if you are not using the Gutenberg editor (which was introduced in WordPress version 5), it is a good idea to remove the Gutenberg CSS which is automatically loaded by WordPress.

To see if the Gutenberg CSS block library is being loaded on your site, inspect the head section of your site and look for a stylesheet with an ID of ‘wp-block-library-css’.

<link rel="stylesheet" id="wp-block-library-css" href="https://bordermedia.local/wp-includes/css/dist/block-library/style.min.css?ver=5.8.2" type="text/css" media="all">

You can also see that Google Lighthouse marks it as a render-blocking resource, which is why if you are exclusively using the WordPress classic editor, it is a good idea to stop this unused CSS from loading on every page.

Gutenberg render-blocking image

Solution

Add the following code to your WordPress themes function.php file:

// Stop Gutenberg block library CSS from loading.
function remove_wp_block_library_css() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
} 
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );

0 Comments


Leave a Comment

Share your questions, thoughts and ideas while maintaining a considerate tone towards others, thank you.

All fields are required - your email address will not be published.