How to Remove the Gutenberg Editor and Its CSS Files in WordPress

If you want to increase the speed of your WordPress site and reduce unnecessary resource consumption, removing Gutenberg block CSS files can provide a significant advantage. Especially for sites using the classic editor or custom themes, these files can both increase loading times and cause display issues. In this article, I'll explain why you should remove them, how to do it, and what you need to pay attention to.

What is Gutenberg CSS?

The Gutenberg block editor, which came after WordPress's classic editor, allows you to create content in blocks. Each content element, such as text, images, buttons, and galleries, works as a separate block. For these blocks to display correctly, WordPress loads some Gutenberg CSS files in the background. These generally include files like wp-block-library.css and wp-block-library-theme.css.

If you use these blocks on your site, these CSS files are useful. However, if you only use the classic editor or have developed a completely custom theme, these CSS files are loaded for no reason. This means that every time a page is opened, unnecessary style files are sent to the user.

What does this mean? More data, a slower-loading page, sometimes a broken design, and a lower site speed score. When you test your site with tools like Google PageSpeed Insights, you might see warnings like "remove unused CSS." This is a factor that directly affects SEO.

I noticed that these CSS files were being loaded on my own blog even though I don't use Gutenberg blocks at all. I didn't pay much attention at first, but when I saw a 5-6 point difference in my site speed, I did some research. It turns out that removing these files is quite simple.

How Do Unnecessary CSS Files Affect WordPress Site Speed?

When WordPress loads a page, it calls some extra style files along with the theme files. Among these are the Gutenberg block CSS files. If you are not actively using these blocks on your site, this CSS is loaded unnecessarily.

When a page opens, the browser downloads and processes each CSS file before displaying the content to the user. Even one unnecessary file can prolong this process. This difference is even more noticeable for mobile users. A style file of just 20-30 KB can delay the First Contentful Paint.

In analysis tools like Google's PageSpeed Insights or Lighthouse, these style files often appear under warnings such as:

• Avoid chaining critical requests
• Remove unused CSS
• Reduce unused JavaScript

If a file like wp-block-library.css is listed here, it may be negatively affecting your site's speed. This means that when users visit your page, the content loads more slowly. Google also notices this and may rank you one step lower.

After removing these files on my own site, I saw an increase of nearly 10 points in my mobile scores. The page started to load faster. So, it makes a difference not just aesthetically, but also in terms of performance.

How to Remove Gutenberg CSS with the functions.php File in WordPress

Removing the CSS files loaded by Gutenberg is actually easier than you think. All you need to do is add a small piece of code to your theme's functions.php file. This code tells WordPress, "Don't load these files anymore."

You can add the following code to the bottom of your theme's functions.php file:

function remove_gutenberg_block_css() {
  wp_dequeue_style( 'wp-block-library' );
  wp_dequeue_style( 'wp-block-library-theme' );
  wp_dequeue_style( 'wc-block-style' ); // If you use WooCommerce
}
add_action( 'wp_enqueue_scripts', 'remove_gutenberg_block_css', 100 );

What does this code do?

• wp-block-library: Removes Gutenberg's core block stylesheet.
• wp-block-library-theme: Removes additional Gutenberg styles related to the theme.
• wc-block-style: If you have WooCommerce, it also removes its block CSS.

The add_action(...) line at the bottom automatically activates this process when the page loads. It's a small touch, but it noticeably improves page performance.

Does It Make Sense to Remove CSS for Those Who Don't Use Gutenberg Blocks?

The short answer is: Yes, very much so. If you only use the classic editor on your site or create your content entirely with custom fields or different editors, Gutenberg's CSS files provide no benefit. They only create an unnecessary load when the page is loading.

Conclusion

Removing Gutenberg block CSS files allows you to create faster-loading pages with a cleaner code structure and a better SEO advantage on your WordPress site. If you don't use the block editor or have a custom design, you can significantly improve your page performance with this simple step.