¿Qué es el CSS no utilizado en WordPress?

El CSS no utilizado son estilos que una página carga aunque no los necesite. CSS es el código que controla la apariencia de elementos como textos, colores, botones, espacios y menús.

Por ejemplo, un plugin puede cargar los estilos de un formulario en todas las páginas, aunque el formulario solo aparezca en la página de contacto. En las demás páginas, esos estilos se cargan sin utilizarse.

¿Por qué WordPress carga CSS que no se utiliza?

WordPress puede cargar CSS que una página no utiliza porque los temas y plugins suelen incluir archivos con estilos para diferentes elementos y funciones del sitio.

Un mismo archivo CSS puede contener estilos para botones, formularios, galerías y tablas, aunque una página solo utilice algunos de ellos. También pueden quedar estilos que ya no se utilizan en ninguna parte del sitio, por ejemplo, después de cambiar el diseño o dejar de usar una función.

Además, un tema o plugin puede cargar el mismo archivo CSS en varias páginas, aunque sus estilos solo sean necesarios en algunas. Por ejemplo, un plugin de formularios puede cargar sus estilos en una página aunque allí no exista ningún formulario.

Por eso, encontrar CSS no utilizado no significa que todo el archivo sea innecesario. Un archivo puede contener estilos que la página necesita junto con otros que no utiliza.

¿Cómo afecta el CSS no utilizado al rendimiento?

El CSS no utilizado aumenta la cantidad de código que el navegador debe descargar y procesar, aunque la página no lo necesite.

El impacto depende de cuánto CSS innecesario se cargue. Un archivo grande no significa automáticamente que exista un problema, ya que puede contener muchos estilos que la página sí utiliza.

Además, algunos archivos CSS pueden formar parte de los recursos que bloquean el renderizado. Si contienen estilos innecesarios, el navegador puede dedicar tiempo a descargar y procesar código que esa página no necesita.

Reducir este CSS puede disminuir el trabajo que realiza el navegador y forma parte de la optimización del rendimiento de WordPress.

¿Cómo reducir el CSS no utilizado en WordPress?

Algunas herramientas de optimización pueden detectar qué estilos necesita una página y reducir los que no utiliza. Dependiendo de la herramienta, este proceso puede hacerse automáticamente o necesitar algunos ajustes.

También se puede controlar en qué páginas se cargan determinados archivos CSS. Algunos temas y plugins incluyen opciones para evitar la carga de estilos que no se necesitan. Si no ofrecen esta posibilidad, se pueden utilizar plugins de optimización o realizar ajustes mediante código en WordPress.

Una herramienta puede considerar un estilo como no utilizado al cargar la página, aunque ese estilo se necesite después, por ejemplo, al abrir un menú, mostrar una ventana emergente o enviar un formulario.

Después de reducir el CSS no utilizado, es importante revisar el sitio para comprobar que las páginas y sus funciones sigan mostrándose correctamente.

CSS no utilizado y CSS crítico: ¿cuál es la diferencia?

El CSS no utilizado y el CSS crítico resuelven problemas diferentes.

CSS no utilizado son estilos que una página carga pero no necesita.

CSS crítico son los estilos que se priorizan porque se necesitan para mostrar el contenido inicial de la página.

Por ejemplo, una página puede tener correctamente configurado su CSS crítico y seguir cargando otros estilos que no utiliza.

Por eso, generar CSS crítico no elimina automáticamente el CSS no utilizado.

Diferencia entre minificar CSS y reducir el CSS no utilizado

La minificación reduce el tamaño de un archivo CSS, pero no elimina los estilos que contiene.

Por ejemplo, si un archivo contiene 100 estilos y una página solo utiliza 60, al minificarlo los 100 estilos siguen dentro del archivo. El archivo pesa menos, pero continúa incluyendo los 40 estilos que esa página no necesita.

Reducir el CSS no utilizado busca evitar que esos estilos innecesarios se carguen en la página.

Por eso, minificar CSS y reducir el CSS no utilizado son dos optimizaciones diferentes.

Términos relacionados

• Recursos que bloquean el renderizado
• CSS crítico
• Minificación

Preguntas frecuentes sobre CSS no utilizado en WordPress

¿Puedo eliminar un archivo CSS si contiene CSS no utilizado?

Un archivo CSS puede contener estilos que una página utiliza junto con otros que no necesita. Por eso, detectar CSS no utilizado no significa que se pueda eliminar todo el archivo.

Antes de eliminarlo o evitar que se cargue, es necesario comprobar qué elementos del sitio dependen de sus estilos.

¿Cómo reducir el CSS no utilizado de un plugin de WordPress?

Puedes revisar si el propio plugin permite controlar dónde carga sus estilos. Si no tiene esta opción, puedes usar una herramienta de optimización o código para evitar que sus archivos CSS se carguen en las páginas donde no se necesitan.

Después del cambio, comprueba que las funciones del plugin sigan mostrándose correctamente.