The new Gutenberg editor, introduced in WordPress 5.0, has received mixed reactions from WordPress users. Whether you like it or not, many users have transitioned to this new editor.
If you’re someone who aims to make your WordPress website load as quickly as possible, you might have noticed some additional CSS code from Gutenberg. Each additional request on your site can slightly slow down your page loading speed. If you’re not using Gutenberg, it’s a good idea to remove the Gutenberg CSS. The Gutenberg CSS provides styling for the new block editor, but if you’re still using the classic editor, you probably don’t need the block library CSS to be loaded on your pages. In some cases, the “block-library/style.min.css” file might still be loading even when you’re exclusively using the classic editor.
If you want to get rid of the Gutenberg CSS, you can use the following PHP code to stop the “/wp-includes/css/dist/block-library/style.min.css” file from being loaded.
Keep in mind that if you’re using the Gutenberg editor, you shouldn’t add this code to your site.
Dequeue Gutenberg Block Library CSS Code Snippet
You can use the provided PHP code in your theme’s functions.php file or add it through a plugin like Code Snippets. This code not only stops the core Gutenberg block CSS from being loaded but also removes the WooCommerce block CSS. Just remember, this will only work if you’re not using the Gutenberg editor.
<?php
//Remove Gutenberg Block Library CSS from loading on the frontend
function da_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-blocks-style' ); // Remove WooCommerce block CSS
}
add_action( 'wp_enqueue_scripts', 'da_remove_wp_block_library_css', 100 );If you decide to use the Gutenberg editor later on, make sure to take out this snippet of code. If you keep it, your blocks might not work properly.
Dequeue Gutenberg Block Library CSS with Asset CleanUp Plugin
If you’re not comfortable with PHP or code snippets, you can use a plugin like “Asset CleanUp” to remove the Gutenberg Block Library styles from your website.
Installing Asset CleanUp is just like adding any other plugin to your WordPress site. Go to “Plugins” and then “Add New” in your dashboard. Search for “Asset CleanUp” and install the plugin. Once activated, you’ll find an “Asset CleanUp” option in your admin dashboard.
In the “Asset CleanUp” settings, go to “Site-Wide Common Unloads.” There, you’ll see the option “Disable Gutenberg CSS Block Library Site-Wide.” Turn it on and save your settings. This will remove the block library from your site. I hope this tip helped make your site faster! If you encounter any problems, don’t hesitate to share in the comments below.
Related Articles
Leave a Reply