Eliminando los Estilos Globales (Global Styles) y SVG de Gutenberg Innecesarios

Si has analizado el código fuente de tu sitio recientemente, habrás notado un bloque masivo de CSS inyectado bajo el ID global-styles-inline-css y una serie de filtros SVG ocultos al final del body relacionados con Duotone. Sinceramente, sigue sin tener sentido que obliguen a cargar atributos para un widget desactivado o estilos para filtros que el 99% de los sitios no utiliza. Es una decisión de diseño del core que ensucia el frontend innecesariamente.

#La Pesadilla de los Estilos Globales y Duotone

Desde la llegada de la edición completa del sitio (FSE), WordPress intenta ser «inteligente» cargando una librería de estilos base para que tus bloques se vean igual en todas partes. El problema es que esta «inteligencia» se traduce en inyectar código CSS inline y estructuras SVG de filtros de color en cada página, sin importar si estás usando un simple párrafo de texto o nada en absoluto.

#Limpiando la Casa: Código de Optimización

Para recuperar el control, debemos atacar en dos frentes: eliminar el CSS de los bloques y suprimir los filtros SVG del footer. No te fíes al 100% de la nota de PageSpeed tras hacer esto; lo importante es la latencia real y tener un DOM mucho más limpio y predecible.

Hace unas semanas, trabajando en un «One Page» extremadamente minimalista para un cliente, me volví loco intentando bajar de los 10KB de HTML. Por más que optimizaba mis scripts, el código fuente seguía inflado. Analizando el waterfall vi una petición bloqueando el render que en realidad era el procesamiento de este bloque masivo de estilos. Al principio intenté bloquearlo por .htaccess, pero eso solo sirve para archivos externos, no para código inline, así que el síntoma persistía. La solución real pasó por el siguiente set de funciones.

Añadir al final del archivo functions.php:

// [FIX-2026] Limpieza de estorbos de Gutenberg en el front-end
add_action( 'wp_enqueue_scripts', function() {
    // [ANTI-AMNESIA] Desactivamos los estilos de bloques que WP inyecta por defecto
    // Solo haz esto si usas un tema clásico o maquetas el CSS a mano.
    wp_dequeue_style( 'global-styles' );
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-blocks-style' ); // Si tienes WooCommerce
}, 100 );

// [FIX-2026] Eliminar los filtros SVG de Duotone inyectados en el footer
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );

#El Plan B (Fallback Plan)

Este cambio es puramente visual-estructural y es difícil que cause un «Error 500», pero si tras guardar los cambios notas que la web ha perdido todo el formato o fuentes, es posible que tu tema sea «Block-Based». Si al guardar te sale un error de sintaxis o la pantalla en blanco por un error de copiado, accede por SFTP o el explorador de archivos de tu hosting, entra en wp-content/themes/tu-tema/functions.php y elimina el bloque de código que acabas de insertar.

#Cuándo usar / Cuándo NO usar

• Cuándo usar: Si desarrollas temas a medida, usas maquetadores como Oxygen o Bricks, o simplemente quieres un sitio ultra-ligero y no usas los filtros de color de Gutenberg.
• Cuándo NO usar: Si utilizas temas de bloques (FSE) como Twenty Twenty-Four o dependes totalmente de la configuración visual del personalizador para tus bloques.

#Pros y Contras

• Pros: Código HTML mucho más limpio, reducción del tamaño del DOM y eliminación de avisos de «recursos inútiles» en herramientas de auditoría.
• Contras: Obliga a tener un mayor control sobre el CSS de tu propio tema, ya que pierdes los estilos de «relleno» que WordPress da por defecto.

«Gutenberg es potente, pero su implementación por defecto en el frontend es una declaración de guerra contra el minimalismo técnico.»

Para profundizar en cómo gestionar los activos de Gutenberg, puedes revisar la documentación sobre theme.json o consultar guías de optimización avanzada en WordPress Support.