How to Remove Gutenberg CSS in WordPress: Clean Unused Code

If you are obsessed with site speed and Google Core Web Vitals scores, seeing the Remove Unused CSS warning in PageSpeed Insights is frustrating. For WordPress sites that do not use the Gutenberg Block Editor (using Classic Editor or page builders like Elementor/Bricks instead), the default block library CSS is dead weight. It loads on every page, consumes bandwidth, and offers absolutely no value to your users.

In this guide, we will clean up your site’s code by completely removing wp-block-library, global inline styles, and those annoying SVG filters that WordPress injects into the body tag.

Why Does WordPress Load Unused CSS?

WordPress assumes that every site might use the Block Editor. To ensure compatibility, it loads a stylesheet called wp-block-library.css (and often wp-block-library-theme.css) by default. Since WordPress 5.9, it also injects Global Styles (huge inline CSS blobs) and SVG filters for duotone effects directly into the HTML.

If you are running a custom theme or using the Classic Editor, these files are unnecessary requests. Removing them can save you anywhere from 50KB to 100KB of page weight. This might sound small, but for mobile performance and First Contentful Paint (FCP) scores, every kilobyte counts.

Method 1: Remove Gutenberg CSS via Code (The Clean Way)

This is the most efficient method because it requires no extra plugins. We will use a precise code snippet to dequeue the styles and remove the SVG filters.

Important: Before editing your theme files, always ensure you are working on a safe environment. If you are unsure about direct code edits, you should review the differences between development, staging, and production environments to avoid breaking your live site.

The Complete Cleanup Snippet

You can add the following code to your theme's functions.php file or use a plugin like Code Snippets. This snippet does three things: removes the block library CSS, strips out the WooCommerce block styles (if present), and prevents the SVG filters from rendering.

function devcrea_remove_gutenberg_assets() {
    // Remove CSS for Gutenberg Block Library
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce Block CSS
    // Remove Global Inline Styles (theme.json)
    wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'devcrea_remove_gutenberg_assets', 100 );
// Remove SVG Filters from Body and Footer
function devcrea_remove_svg_filters() {
    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
    remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
}
add_action( 'init', 'devcrea_remove_svg_filters' );

Where Should You Paste This?

You have two main options for adding this code:

1. Child Theme: If you have a child theme active, open the functions.php file and paste the code at the very bottom.
2. Code Snippets Plugin: This is safer for beginners. Install the Code Snippets plugin, create a new snippet, paste the code, and select Run snippet everywhere.

Method 2: Using an Asset Manager Plugin (No-Code Solution)

If you are uncomfortable touching code, you can use performance plugins that handle this for you. Tools like Perfmatters or Asset CleanUp are excellent for this purpose.

In Perfmatters, for example, you can simply go to the General settings and toggle on Disable Gutenberg. This does the exact same thing as the code above but offers a user-friendly interface.

How to Verify That the CSS Is Gone

After applying the fix, you need to verify that the files are no longer loading.

1. Open your website in a private (incognito) window.
2. Right-click anywhere and select View Page Source (or Inspect).
3. Press CTRL + F (or CMD + F on Mac) and search for wp-block-library.
4. If the search returns 0 results, you have successfully removed the bloat.

You can also run a fresh test on PageSpeed Insights. You should see a reduction in the unused CSS warning section. While optimizing, you might also want to check how your layout handles viewport units by understanding CSS vh, dvh, lvh, svh, and vw units, as cleaner code often highlights layout shifts more clearly.

When Should You NOT Remove These Files?

Before you implement this, ask yourself one question: Do I use Gutenberg blocks anywhere?

If you use the Block Editor for your blog posts or if you have a Block Theme (Full Site Editing theme like Twenty Twenty-Three), removing these CSS files will break your design. Your columns will collapse, buttons will lose their styling, and spacing will disappear.

This optimization is strictly for websites built with:

• Classic Editor
• Page Builders (Elementor, Divi, Bricks, Oxygen) that disable Gutenberg
• Custom coded themes using ACF Flexible Content

By keeping your code clean and removing what you don't use, you ensure your server delivers only the essential data to your visitors, leading to a faster and more efficient web experience.