Como propietarios de sitios web de WordPress, todos nos esforzamos por ofrecer una experiencia de usuario rápida y óptima. Esto no solo mantiene a los visitantes comprometidos, sino que también ayuda a que nuestros sitios web se clasifiquen más alto en los resultados de búsqueda.
Es posible que no te des cuenta de que tus temas y plugins a menudo cargan mucho más código CSS del que tus páginas necesitan. Este CSS no utilizado puede estar ralentizando secretamente tu sitio web.
Cada línea de código adicional que tus visitantes tienen que descargar añade preciosos segundos al tiempo de carga. Y en el mundo actual, incluso un retraso de un segundo puede costarte visitantes y ventas.
Es por eso que hemos reunido esta guía completa sobre cómo eliminar el CSS no utilizado de WordPress de la manera correcta. Te mostraremos los métodos exactos que usamos para limpiar hojas de estilo infladas y acelerar sitios sin romper nada.
¿Qué es el CSS no utilizado en WordPress?
El CSS no utilizado en WordPress se refiere a código CSS que se carga en tus páginas web pero que en realidad no se utiliza para dar estilo a nada visible en esas páginas específicas.
Este código adicional obliga a los navegadores de los visitantes a descargar y procesar archivos innecesarios, lo que ralentiza los tiempos de carga de tus páginas. Incluso unos pocos segundos adicionales pueden perjudicar la experiencia de tu usuario y las clasificaciones en los motores de búsqueda, lo que potencialmente te cuesta visitantes y conversiones.
Puedes comprobar fácilmente si el CSS no utilizado está afectando a tu sitio ejecutándolo a través de Google Pagespeed Insights. Busca la advertencia 'Eliminar CSS no utilizado' en tus resultados. Te mostrará exactamente qué archivos están ralentizando las cosas.
¿Por qué WordPress carga CSS no utilizado?
Aquí está el detalle: WordPress no fue diseñado para ser selectivo con el CSS que carga. Tu tema de WordPress viene con una hoja de estilos maestra (generalmente llamada style.css) que contiene reglas de estilo para cada elemento posible, incluso aquellos que quizás nunca uses.
Pero tu tema es solo el principio. Cada plugin que instalas agrega sus propios archivos CSS a la mezcla. WooCommerce carga estilos de tienda en cada página (incluso en tus publicaciones de blog), los constructores de páginas cargan su CSS globalmente, y los plugins de formularios de contacto cargan estilos de formulario en páginas sin formularios.
Agrega fuentes personalizadas, bibliotecas de iconos y otros elementos de diseño, y terminarás con mucha sobrecarga de CSS. Si bien cada archivo individual puede ser pequeño, se acumulan rápidamente e impactan la velocidad de tu sitio.
Cómo eliminar CSS no utilizado en WordPress
Ahora, las buenas noticias: existen varias formas efectivas de limpiar el CSS no utilizado en tu sitio web de WordPress. Hemos probado múltiples enfoques y encontrado métodos que funcionan de manera confiable sin romper tu sitio.
Esto es lo que necesitas saber desde el principio: eliminar por completo el 100% del CSS no utilizado es casi imposible debido a cómo WordPress carga el contenido dinámicamente. Parte del CSS debe permanecer listo para elementos interactivos, contenido condicional y diferentes tipos de páginas.
Pero no te preocupes, no necesitas la perfección para ver mejoras importantes. Incluso eliminar el 50-70% del CSS no utilizado puede acelerar drásticamente tu sitio.
Te mostraremos dos métodos probados que logran el equilibrio adecuado entre ganancias de rendimiento y estabilidad del sitio, para que puedas elegir el enfoque que se ajuste a tu nivel de comodidad.
- Eliminar CSS no utilizado en WordPress usando WP Rocket
- Remove Unused CSS in WordPress Using Asset CleanUp
Método 1: Eliminar CSS no utilizado en WordPress usando WP Rocket
Este método es más fácil y se recomienda para principiantes. Mejora en gran medida la entrega general de los archivos CSS en tu sitio web de WordPress, incluida la eliminación de la mayor parte del CSS no utilizado.
Creemos que es la mejor solución para principiantes porque es más fácil y logra el objetivo principal de brindar una mejor experiencia a sus usuarios. Esto significa que su sitio web carga rápido en herramientas de prueba de velocidad y también se siente rápido para sus usuarios.
Primero, necesita instalar y activar el plugin WP Rocket. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, debes visitar la página Ajustes » WP Rocket y cambiar a la pestaña ‘Optimización de archivos’.
A continuación, debe desplazarse hacia abajo hasta la sección Archivos CSS y luego marcar la casilla junto a la opción 'Eliminar CSS no utilizado (Beta)'.
Dado que esta función de WP Rocket está en beta, le preguntará nuevamente si desea habilitar la configuración. Puede continuar y hacer clic en el botón 'Activar Eliminación de CSS no utilizado'.
Una vez que la opción 'Eliminar CSS no utilizado' esté activa, puede especificar nombres de archivo CSS, IDs o clases que no deben eliminarse en el cuadro 'Lista segura de CSS'.
Simplemente ingréselos en el cuadro.
A continuación, deberá guardar sus cambios desplazándose hacia abajo y haciendo clic en el botón 'Guardar cambios'.
Cuando haga eso, WP Rocket comenzará a procesar sus archivos CSS y le mostrará una barra de progreso.
Tardará unos minutos en que el plugin procese y elimine los archivos CSS no utilizados de su sitio web.
Verá un mensaje '¡La eliminación de CSS no utilizado está completa!' cuando el plugin haya completado el proceso.
Ahora, visite la herramienta Google Pagespeed Insights y pruebe el rendimiento de su sitio.
Eliminar CSS que bloquea la renderización para WordPress
WP Rocket le permite optimizar sus archivos CSS y eliminar el CSS que bloquea la renderización de su sitio web.
Para comenzar, puede navegar a la pestaña 'Optimización de archivos' en WP Rocket. Desde aquí, desplácese hacia abajo hasta la sección Archivos CSS y luego marque la casilla junto a la opción 'Optimizar entrega de CSS'.
Esta opción genera un archivo CSS que solo contiene el código CSS necesario para mostrar la parte visible de tu sitio web. Carga ese archivo primero, muestra la página a tus visitantes y luego carga otros archivos CSS utilizando una tecnología llamada carga diferida.
Al eliminar este CSS que bloquea la renderización, tu sitio web se vuelve visible para los usuarios mucho más rápido de lo que sería si tuvieras que cargar todos los archivos CSS antes de que se muestre la página.
Después de habilitar la opción 'Optimizar entrega de CSS', haz clic en el botón 'Guardar cambios' y espera a que WP Rocket genere el archivo CSS necesario para todas tus publicaciones y páginas. También limpiará automáticamente la caché de tu sitio web.
Una vez terminado, puedes continuar y probar el rendimiento de tu sitio web nuevamente usando Google Pagespeed Insights.
Ajustes adicionales de entrega de archivos para mejorar el rendimiento
WP Rocket también te permite eliminar cadenas de consulta de archivos estáticos, combinar archivos de Google Fonts y minificar HTML.
Todos estos ajustes añaden pequeñas mejoras a tu velocidad general, lo que se suma a una experiencia de carga más rápida para tus visitantes.
También verás opciones para minificar y combinar archivos CSS. Estas opciones reducirán las solicitudes HTTP y te darán un impulso adicional de velocidad.
Sin embargo, deberás revisar cuidadosamente tu sitio web para asegurarte de que nada se haya roto después de habilitar estas configuraciones.
Además, puedes aplicar la misma optimización para los archivos de JavaScript en tu sitio web.
Puedes minificarlos y combinarlos para servirlos como un solo archivo y diferir la carga de los archivos JavaScript para mejorar el rendimiento.
Para más detalles, consulta nuestro tutorial paso a paso sobre cómo configurar WP Rocket correctamente en WordPress.
Método 2: Eliminar CSS no utilizado en WordPress usando Asset CleanUp
Este método es un poco avanzado pero increíblemente potente y te permitirá eliminar fácilmente cualquier CSS no utilizado de cualquier página de tu sitio web de WordPress.
Sin embargo, es un poco complicado y necesitarás probar la funcionalidad y apariencia de tu sitio web a fondo para asegurarte de que nada se rompa.
Primero, necesitas instalar y activar el plugin Asset Cleanup. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitas visitar la página Asset CleanUp » Settings y cambiar a la pestaña Test Mode. Desde aquí, necesitas activar la opción ‘Enable Test Mode’.
Esto te permite probar diferentes configuraciones y probarlas como administrador sin afectar a los visitantes del sitio web.
Después de eso, necesitas visitar la página Asset CleanUp » CSS/JS Manager. Desde aquí, puedes descargar archivos CSS y JavaScript no deseados página por página.
Primero obtendrá tu página de inicio y te mostrará todos los archivos CSS y JavaScript cargados en esa página.
Necesitas desplazarte hacia abajo y revisar los archivos cargados. Si ves un archivo que no necesitas, puedes descargarlo para esa página en particular, tipo de publicación o en todo el sitio.
El plugin también te permite elegir publicaciones o páginas específicas desde aquí, o puedes acceder a las mismas opciones editando la publicación o página como lo harías normalmente.
En la pantalla de edición de la publicación, encontrarás el cuadro Asset CleanUp justo debajo del editor de la publicación.
El plugin obtendrá y listará automáticamente todos los archivos y recursos cargados cuando un visitante vea esta página en tu sitio web.
Luego, simplemente puedes descargar los archivos CSS o JavaScript no utilizados que no necesites en esa página.
Importante: No olvides probar tu sitio web después de eliminar cualquier CSS o JavaScript no utilizado para asegurarte de que todo funcione correctamente.
Una vez que hayas terminado de descargar y eliminar los archivos CSS y JavaScript no utilizados, puedes volver a la página de configuración del plugin y desactivar el ‘Test Mode’.
No olvides hacer clic en el botón ‘Actualizar toda la configuración’ para guardar tus cambios.
Ahora puedes probar tu sitio web usando Google Pagespeed Insights para ver el cambio en el aviso de CSS no utilizado.
Guías expertas sobre cómo mejorar el rendimiento de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo eliminar fácilmente el CSS no utilizado en WordPress. También te pueden interesar otras guías relacionadas con la mejora del rendimiento de WordPress:
- La guía definitiva para mejorar la velocidad y el rendimiento de WordPress
- Cómo acelerar el rendimiento de WooCommerce
- Cómo realizar correctamente una prueba de velocidad de sitio web (mejores herramientas)
- Métricas importantes para medir en tu sitio de WordPress
- Cómo optimizar las Core Web Vitals para WordPress (Guía definitiva)
- Cómo usar el plugin GTmetrix para mejorar el rendimiento del sitio de WordPress
- Cómo optimizar fácilmente la entrega de CSS en WordPress
- Hosting de WordPress más rápido (Pruebas de rendimiento)
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
- Los mejores plugins de caché de WordPress para acelerar tu sitio web
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Casi siempre, PageSpeed Insights me advierte sobre esto. Nunca le presté atención porque simplemente no sabía cómo arreglarlo sin romper mi sitio. Esta guía es un tesoro para mí, especialmente porque también uso WP Rocket. Haré una copia de seguridad del sitio, por si acaso, y probaré la solución que sugeriste. Tengo curiosidad por ver si, después de dos años de bloguear e ignorar esta advertencia, marcará la diferencia y cuánta. Sin embargo, gracias por la primera guía clara que he encontrado.
kzain
He querido mejorar la velocidad de mi sitio web, y eliminar el CSS no utilizado suena como un excelente punto de partida. El desglose entre el uso de plugins de optimización y la identificación manual es perfecto. Si bien no soy un experto en código, las recomendaciones de plugins son un salvavidas. WP Rocket y Asset CleanUp suenan como excelentes opciones para explorar. ¡Gracias por esta guía informativa!
Soporte de WPBeginner
¡De nada!
Administrador
Dennis Muthomi
My current caching plugin doesn’t have an unused CSS removal feature.
Would it be beneficial to install WP Rocket solely for this function?
Just to use the Remove Unused CSS feature
THANKS
Soporte de WPBeginner
Te recomendamos que te pongas en contacto con el soporte de tu plugin de caché actual para ver si la configuración está habilitada a través de un método diferente para el plugin que estás utilizando. Si quisieras usar WP Rocket, entonces sería mejor reemplazar tu plugin de caché actual.
Administrador
Steve
Me gusta eliminar el CSS no utilizado de mi sitio. Ya estoy usando la caché de Litespeed. Estoy pensando en usar WP Rocket o Asset clean up para hacerlo (me inclino por WP Rocket). ¿Hay algún conflicto entre estos plugins y Litespeed? ¡Gracias!
Soporte de WPBeginner
Deberías ponerte en contacto con el soporte de los plugins individuales para comprobar si hay conflictos actuales entre ellos.
Administrador
Paul Barrett
Esto puede ser un pensamiento deseoso del más alto nivel, pero este artículo me recordó algo que me he estado preguntando por un tiempo.
Uno de mis sitios web complejos ya tiene cuatro años y ha pasado por un proceso constante de evolución. No solo hay CSS sin usar, sino también medios, plantillas y páginas. ¿Existe algún plugin para hacer un inventario del sitio web y decirme TODOS los activos no utilizados?
Soporte de WPBeginner
Actualmente no tenemos una herramienta para todo, ¡pero la herramienta de este artículo ayudaría con CSS y nuestra guía a continuación debería ayudar con la biblioteca de medios!
https://www.wpbeginner.com/plugins/how-to-clean-up-your-wordpress-media-library/
Administrador