Abres PageSpeed Insights, ves avisos sobre CSS sin usar y aparecen atributos style="" y bloques generados por Elementor, Divi o caché. Borrarlos sin identificar su origen puede romper móvil, popups, columnas o formularios.
Limpiar CSS inline de builders no consiste en borrar todo el código dentro de style: muchos estilos son necesarios para diseño responsive, contenido dinámico y elementos interactivos. Identifica quién lo genera, regenera sus archivos CSS, reduce opciones innecesarias y prueba siempre en staging.
✉
¿Quieres más información? Escríbenos y te orientamos
Distingue el estilo que puedes tocar sin riesgo
Abre una página lenta, pulsa F12, selecciona un elemento y distingue los tipos de CSS antes de modificar nada.
Un atributo style="" está aplicado a un único elemento HTML, como una imagen o etiqueta de precio. Un bloque <style> contiene varias reglas y puede proceder del builder, un plugin o la caché; un archivo externo, como style.css, se carga desde otra URL. El CSS crítico muestra la zona visible mientras llega el resto: PageSpeed Insights puede señalar CSS sin usar, pero no demuestra que cada bloque inline sea prescindible.
Reconoce atributos style en un elemento
Busca style= dentro del código del elemento seleccionado. Verás algo parecido a style="margin-top:20px;background-color:#fff", normalmente generado por una opción visual concreta, como un margen de Elementor o una altura definida en WPBakery.
Comprueba la pestaña Styles y lee qué regla aparece activa. Si al pasar el ratón se señala una clase como elementor-element-abc123, ya tienes una pista clara. Borrar un margen inline sin probarlo puede hacer que dos bloques se monten en móvil.
Separa bloques style de archivos externos
Abre el código fuente con Ctrl+U y busca <style; después usa Network , recarga y filtra por CSS para localizar archivos externos.
La minificación reduce espacios y saltos de línea, pero no elimina reglas no usadas ni atributos style. Un bloque inline de entre 2 y 10 KB puede ser normal en una página creada con un constructor visual.
Un atributo style afecta a un elemento; un bloque <style> agrupa reglas; el CSS crítico evita una página sin formato; un archivo externo se trata desde su carga o caché. Cada uno exige una decisión distinta.
✉
¿Quieres más información? Escríbenos y te orientamos
Localiza qué plugin o builder genera la regla
Relaciona cada estilo con su origen antes de reducirlo y guarda la URL, el selector y una captura del elemento.
Usa el inspector para seguir la pista
Selecciona el elemento y copia una clase poco común, por ejemplo elementor-element-7a9b2c. Abre la página con el editor del builder y búscala con Ctrl+F si el editor muestra el identificador. En Bricks y Elementor suele aparecer cerca del panel del elemento; en Divi puede verse como identificador CSS del módulo.
Si ves wp-block-, revisa Gutenberg, patrones y bloques reutilizables. Si ves et_pb_, revisa Divi; si encuentras vc_ o wpb_, el origen suele ser WPBakery.
Comprueba estados que coverage no ve
Abre F12, pulsa Ctrl+Mayús+P, escribe Coverage, selecciona Show Coverage y recarga la URL. Las reglas no usadas durante esa visita son una pista, no una orden de borrado.
Prueba el menú móvil, hover, formularios, carrito y popups. Coverage no marca como usado un estilo que aparece solo tras una interacción o en otra anchura de pantalla.
Decisión segura antes de borrar estilos
1. Encuentra style, bloque o archivo
2. Atribuye builder, plugin o tema
3. Prueba staging, móvil e interacción
Si no puedes nombrar el origen, no elimines la regla.
Regenera y reduce CSS según tu constructor
Crea una copia de seguridad completa y trabaja en staging antes de cambiar opciones del builder o la caché.
Aplica la acción segura por builder
Constructor Acción inicial Tiempo habitual Comprobación Elementor Regenerar archivos y datos; limpiar plantillas 10-20 min Cabecera, popup y móvil Divi Revisar CSS estático y módulos 15-30 min Página y plantilla global WPBakery Quitar elementos y addons sin uso 20-40 min Shortcodes anidados Bricks o Gutenberg Revisar clases, plantillas y bloques 15-30 min Condiciones y responsive
Regenera Elementor y revisa los demás
En Elementor, ve a Elementor > Herramientas y ejecuta la regeneración de archivos y datos. Después vacía caché de WordPress, hosting, CDN y navegador; revisa colores, fuentes, widgets globales, Theme Builder y popups antiguos.
En Divi, revisa rendimiento y CSS personalizado de módulos antiguos. En WPBakery, elimina filas, addons y shortcodes sin uso. En Bricks, limpia clases globales sin referencias y revisa condiciones de plantilla antes de borrar estilos por elemento.
✉
¿Quieres más información? Escríbenos y te orientamos
Retira reglas confirmadas y mide el cambio
Elimina una regla solo cuando hayas comprobado que no sirve en ninguna página, estado o ancho de pantalla.
Mide antes HTML transferido, solicitudes CSS, LCP, INP y CLS en PageSpeed Insights. Reducir 5 o 20 KB de HTML puede no mejorar LCP si la imagen principal pesa demasiado; en cambio, borrar una regla responsive necesaria puede empeorar CLS.
Para una hoja concreta creada por un plugin, puedes retirarla sin editar el core, tema ni builder:
php
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('nombre-del-handle-confirmado');
}, 100);
Retira un archivo, no un atributo a ciegas
nombre-del-handle-confirmado es el identificador interno de WordPress, no el nombre del archivo. Localízalo con Query Monitor o en el código del plugin solo cuando sepas qué recurso sobra; para principiantes, desactivar el módulo que lo genera suele ser más seguro.
No uses filtros que borren todos los atributos style: pueden eliminar anchos, alturas y fondos calculados por el builder para cada visitante.
Comprueba antes de publicar los cambios
Revisa portada, página de servicio, entrada, contacto, carrito y popups; prueba en móvil real y en una ventana estrecha. Compara la misma URL antes y después, con caché vacía y sin iniciar sesión.
Un cambio correcto mantiene el diseño y mejora una medida comprobable: menos HTML, solicitudes CSS, CSS sin uso o mejores LCP, INP o CLS. Si no mejora tras varios cambios pequeños, revisa imágenes, fuentes y scripts.
Si necesitas retirar estilos de forma selectiva, este enfoque elimina únicamente el atributo style de los elementos con la clase estilo-obsoleto:
add_filter('the_content', function ($content) {
$tags = new WP_HTML_Tag_Processor($content);
while ( $tags -> next_tag ()) {
$class = ( string ) $tags -> get_attribute (' class ');
if ( preg_match (' / ( ^| /s)estilo-obsoleto(/s|$)/', $class )) {
$tags -> remove_attribute (' style ');
}
}
return $tags -> get_updated_html ();
}, 20);
Este enfoque no modifica el core ni la base de datos, pero tampoco actuará sobre estilos que el builder inserte fuera de the_content, por ejemplo en la cabecera o en un popup cargado por JavaScript.
Dudas habituales
Estas respuestas ayudan a mejorar velocidad sin convertir un ajuste de CSS en una avería.
¿Cómo elimino CSS no utilizado en WordPress?
Elimina primero widgets, plantillas, bloques y plugins sin uso. Después revisa Coverage en cada página clave, porque una regla puede activarse solo en móvil, hover o popup.
¿Puedo borrar todos los estilos inline?
No. Muchos estilos inline controlan diseño responsive, contenido dinámico y formularios. Borra una regla solo tras confirmar origen y probar escritorio, móvil e interacción.
¿Qué plugin sirve para limpiar CSS?
Un plugin de caché puede reducir archivos externos, pero no garantiza limpiar atributos style. Regenera el builder y retira módulos sin uso antes de añadir otro plugin.
¿Cómo regenero el CSS de Elementor?
Ve a Elementor, Herramientas, y ejecuta la regeneración de archivos y datos. Vacía después caché de plugin, servidor, CDN y navegador.
¿CSS coverage marca rojo, lo borro?
No directamente: Coverage registra solo la visita actual. Prueba varios anchos de pantalla y abre popups, menús, formularios y estados hover antes de decidir.
¿Cuándo debo pedir ayuda técnica?
Pide ayuda si intervienen comercio electrónico, reservas, consentimiento RGPD, membresías o código personalizado, o si no identificas el plugin o plantilla que crea la regla.
No apliques esta limpieza si el bloque es CSS crítico, si controla contenido dinámico, reglas responsive, hover, popups, formularios o elementos que aparecen tras una interacción. Si la página ya carga bien y el CSS inline es reducido, el riesgo de alterar el diseño puede ser mayor que la mejora de rendimiento.
