If you’re running WordPress with a page builder like Elementor, GeneratePress with custom CSS, or the Classic Editor — open your site’s source and search for wp-block-library. You’ll find a stylesheet loading:
<link rel='stylesheet' id='wp-block-library-css' href='/wp-includes/css/dist/block-library/style.min.css' />That’s the Gutenberg block library CSS — roughly 30-40 KB of styles for blocks you might not use on a single page. It loads everywhere: homepage, blog posts, WooCommerce products, landing pages. Every page. Every visitor.
If you’re not using Gutenberg blocks on the frontend, this is pure waste.
What is the Gutenberg block library CSS?
Since WordPress 5.0, the Gutenberg block editor is the default content editor. To render blocks correctly on the frontend, WordPress loads style.min.css from the block library. This stylesheet contains styles for every core block type: paragraphs, headings, images, galleries, columns, tables, buttons, quotes, and dozens more.
WordPress also loads wp-block-library-theme (theme-specific block overrides) and, since WordPress 6.1, classic-theme-styles (backward compatibility styles). On WooCommerce sites, there’s an additional wc-block-style stylesheet.
Combined, these can add 40-50 KB of CSS to every page.
Why should you care?
30-40 KB of unused CSS. If you build pages with Elementor, Beaver Builder, or raw theme templates, the Gutenberg block styles are 100% unused. PageSpeed Insights flags this as “Remove unused CSS” — a Core Web Vitals concern.
Render-blocking. CSS in the blocks rendering. The browser must download and parse the entire block library stylesheet before painting the page. On mobile, that’s a measurable delay.
It loads globally. Even if you use Gutenberg blocks on some pages but not others, WordPress loads the block CSS on every page. There’s no conditional loading in core.
The quick fix
// Remove Gutenberg block library CSS from frontend
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'classic-theme-styles' );
wp_dequeue_style( 'wc-block-style' ); // WooCommerce blocks
wp_dequeue_style( 'global-styles' ); // Global styles inline CSS
}, 100 );Important: Only add this if you’re NOT using Gutenberg blocks on the frontend. If your posts use Gutenberg blocks (columns, buttons, galleries, etc.), removing this CSS will break their styling.
The one-click solution
OvKit includes Remove Gutenberg CSS under Features → Performance. One toggle removes all block library styles from the frontend. If you use a mix of Gutenberg and non-Gutenberg pages, the premium version offers per-page control.
What happens after you fix this?
- 30-40 KB less CSS per page load
- Fewer render-blocking resources — measurable FCP improvement
- PageSpeed “Remove unused CSS” warning reduced significantly
- Gutenberg editor still works — this only affects the frontend
FAQ
### I use Gutenberg for blog posts but Elementor for pages — what should I do?
Don’t use this global removal. Instead, use a conditional approach: remove block CSS only on pages built with Elementor, and keep it on posts. Asset optimization plugins like Perfmatters or Asset CleanUp offer per-page CSS management.
### Does this affect the WordPress admin or Gutenberg editor?
No. The removal only targets frontend styles via wp_enqueue_scripts. The Gutenberg editor in wp-admin loads its own styles independently.
### I removed block CSS and my site looks broken — what happened?
Your content uses Gutenberg blocks. Re-enable the block CSS, and consider using a conditional approach instead of global removal.
Related reads: