Qué hace la opción
Elementor carga en cada página CSS para muchos widgets, también para los que no aparecen. «Eliminar el CSS no utilizado» envía la dirección de tu página a un servicio de WP Rocket. Este descarga la página y sus archivos CSS, comprueba qué reglas se necesitan de verdad y devuelve un CSS depurado. WP Rocket lo incrusta directamente en la página y deja fuera los archivos CSS originales.
En nuestro caso, 30 archivos CSS se convirtieron en un CSS incrustado de 146 KB más unos pocos archivos restantes. El cálculo tarda alrededor de un minuto por página y se hace en segundo plano.
Las mediciones
| WP Rocket por defecto | + Eliminar el CSS no utilizado | |
|---|---|---|
| Tiempo de carga móvil (LCP) | 4,72 s | 4,46 s |
| Tiempo de carga escritorio (LCP) | 1,20 s | 1,15 s |
| Puntuación Lighthouse móvil | 81 | 83 |
| Peso de la página | 736 KB | 713 KB |
| Peticiones | 66 | 46 |
| Peticiones a servidores externos (Google Fonts) | 7 | 13 |
| Menú, carrusel, acordeón, formulario, ventana emergente | funcionan | funcionan |
La mejora es pequeña, pero existe: unos 0,26 segundos en móvil. En una segunda serie el mismo día fueron 0,10 segundos (de 4,54 a 4,44). Las diferencias por debajo de unos 0,15 segundos están dentro de nuestro ruido. Más claro es el número de peticiones: 20 menos.
Un efecto secundario: las peticiones a Google subieron de 7 a 13, porque el navegador pide ahora las fuentes de Google de otra forma. Si alojas las fuentes tú mismo (Google Fonts en local), eso desaparece. Con nuestra configuración recomendada de WP Rocket hubo 0 peticiones externas.
¿Se mantiene el diseño?
Es la mayor preocupación con esta opción. Hicimos capturas en el móvil con y sin ella: la parte superior, con el menú abierto y con la ventana emergente abierta. Las tres vistas se veían iguales. Incluso el color de los botones, que viene de los colores globales de Elementor, era el correcto.
Si aun así falta algo en tu web, normalmente elementos que solo aparecen tras un clic o después de cargar, usa la Lista de contenido CSS protegido. Ahí introduces clases, IDs o archivos CSS completos que WP Rocket no debe eliminar nunca.
Activarla y fijar excepciones
- Abre Ajustes → WP Rocket → JavaScript & CSS.
- En Archivos CSS, activa Optimizar la entrega de CSS y elige Eliminar el CSS no utilizado.
- Si más adelante falta algo, añádelo al campo Lista de contenido CSS protegido, una entrada por línea, por ejemplo
.elementor-popup-modalo/wp-content/plugins/mi-plugin/(.*).css. - Haz clic abajo en Guardar Cambios y Optimizar.
- Espera unos minutos y revisa la página en el móvil en una ventana privada: parte superior, menú, ventanas emergentes, formularios.
Cuándo es mejor no usarla
- Detrás de una contraseña o en una copia de prueba, mira arriba. O permite que los servidores de WP Rocket descarguen los archivos.
- Si cambias a menudo los estilos globales: tras cambiar colores o fuentes en el kit del sitio tienes que hacer clic además en Borrar el CSS usado; si no, los visitantes ven la versión antigua. Probado en vaciar la caché con WP Rocket y Elementor.
- Si te importa la privacidad: la dirección de cada página va a los servidores de WP Rocket, que luego la descargan. Para páginas públicas suele ser inofensivo, pero conviene mencionarlo en tu política de privacidad.
Todos los demás ajustes para Elementor están en ajustes de WP Rocket para Elementor.
Para curiosos de la técnica: montaje y datos en bruto
- Laboratorio: WordPress 7.1.4, PHP 8.4, Hello Elementor 3.5.2, Elementor 4.3.6, Elementor Pro 4.3.2, WP Rocket 3.24, hosting compartido en All-Inkl. Metodología
- Estados: WP Rocket con todos los valores por defecto de una instalación nueva y después además
remove_unused_css. Antes de medir esperamos a que el CSS depurado estuviera listo y comprobamos que no estaba vacío (146 KB en el bloquewpr-usedcss). - Medición: Lighthouse 13.5.0, 5 pasadas en móvil (con limitación) y en escritorio, mediana. Segunda serie el mismo día: de 4,54 a 4,44 segundos en móvil.
- Revisión visual: Chrome en vista móvil, capturas de la parte superior, con el menú abierto y con la ventana emergente abierta, además del color que mostraba de verdad el botón. Prueba de funcionamiento (menú, carrusel, acordeón, formulario, ventana emergente) superada.
- Primero, nuestro propio error: nuestro laboratorio está detrás de una protección con contraseña. Al principio, el servicio de WP Rocket solo podía descargar la página, no sus archivos CSS, JavaScript y de fuentes. WP Rocket indicó «completed», pero el CSS estaba vacío. Desde el 8 de noviembre permitimos los archivos estáticos para las direcciones IP de WP Rocket y comprobamos automáticamente el tamaño del CSS depurado.
- Datos en bruto: rohdaten.csv. Medido el 8 de noviembre de 2026.
