Cómo eliminar CSS no utilizado en WordPress (de la manera correcta)

¿Desea eliminar el CSS no utilizado en WordPress para que su sitio se cargue más rápido?

CSS no utilizado es cualquier código CSS agregado por su tema o complementos de WordPress que realmente no necesita. La eliminación de este código CSS mejora el rendimiento y la experiencia del usuario de WordPress.

En este artículo, le mostraremos cómo eliminar fácilmente CSS no utilizado en WordPress sin romper su sitio web.

¿Qué es CSS no utilizado en WordPress?

El CSS no utilizado en WordPress es un código CSS que se carga en su sitio web, pero que en realidad no es necesario para mostrar la página.

El código adicional puede hacer que el navegador de un visitante tarde un poco más en representar una página, lo que crea una mala experiencia de usuario. Los tiempos de carga más lentos pueden incluso afectar su clasificación de búsqueda, lo que resulta en menos tráfico a su sitio.

Puede ver cómo el código CSS no utilizado está afectando a su sitio web usando Estadísticas de Google Pagespeed. Le mostrará una sección titulada ‘Eliminar CSS no utilizado’ con detalles de qué archivos CSS están afectando sus tiempos de carga.

¿Por qué se agrega CSS no utilizado en WordPress?

CSS se utiliza para diseñar la apariencia de su sitio web de WordPress. Su tema de WordPress incluye CSS, y la mayor parte se incluye en un solo archivo style.css.

Además del CSS de su tema, sus complementos de WordPress también cargarán su propio CSS. Por ejemplo, WooCommerce cargará CSS para mostrar productos, un complemento de creación de páginas agregará su propio CSS para mostrar sus páginas personalizadas, y un complemento de creación de formularios incluirá CSS para diseñar sus formularios.

Luego, tiene sus fuentes web, fuentes de iconos y otros elementos que también necesitarán agregar sus propios archivos CSS.

Por lo general, estos archivos son muy pequeños y se cargan rápidamente. Sin embargo, si su sitio de WordPress tiene muchos de ellos, entonces los efectos pueden sumarse y tener un impacto notable en la velocidad de su sitio.

¿Cómo eliminar CSS no utilizado en WordPress?

Hay algunas formas diferentes de reducir el CSS no utilizado en su sitio web de WordPress.

Sin embargo, sería una tarea bastante difícil eliminar por completo todo el CSS no utilizado en WordPress. Debido a la forma en que WordPress funciona entre bastidores, algunos CSS no utilizados pueden ser difíciles de encontrar y eliminar.

Dicho esto, le mostraremos dos métodos para eliminar CSS no utilizado, y puede elegir el que mejor se adapte a sus necesidades.

Método 1. Elimine CSS no utilizado en WordPress usando WP Rocket

Este método es más fácil y se recomienda para principiantes. Mejora enormemente la entrega general de archivos CSS en su 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 se carga rápidamente con las herramientas de prueba de velocidad y también se siente rápido para sus usuarios.

Primero, debe instalar y activar el complemento WP Rocket. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar el Configuración »WP Rocket y cambie a la pestaña ‘Optimización de archivos’.

A continuación, debe desplazarse hacia abajo hasta la sección de archivos CSS. Desde aquí, debe marcar la casilla junto a la opción ‘Optimizar la entrega de CSS’.

Esta opción genera un archivo CSS que solo contiene el código CSS necesario para mostrar la parte visible de su sitio web. Primero carga ese archivo, muestra la página a sus visitantes y luego carga otros archivos CSS utilizando una tecnología llamada carga diferida.

Al eliminar este CSS que bloquea el procesamiento, los usuarios pueden ver su sitio web mucho más rápido que si tuviera que cargar todos los archivos CSS antes de que se muestre la página.

Después de habilitar la opción ‘Optimizar la entrega de CSS’, haga clic en el botón Guardar cambios y espere a que WP Rocket genere el archivo CSS necesario para todas sus publicaciones y páginas. También borrará automáticamente el caché de su sitio web.

Una vez que haya terminado, puede continuar y probar el rendimiento de su sitio web nuevamente usando Google Pagespeed Insights.

Ajustes adicionales en la entrega de archivos para mejorar el rendimiento

WP Rocket también le permite eliminar cadenas de consulta de archivos estáticos, combinar archivos de fuentes de Google y minimizar HTML. Todos estos ajustes agregan pequeñas mejoras a su velocidad general, que se suman a una experiencia de carga más rápida para sus visitantes.

También verá opciones para minimizar y combinar archivos CSS. Estas opciones reducirán las solicitudes HTTP y le darán un aumento de velocidad adicional.

Sin embargo, deberá verificar cuidadosamente su sitio web para asegurarse de que no haya nada roto después de habilitar estas configuraciones.

Además, puede aplicar la misma optimización para archivos JavaScript en su sitio web. Puede minimizarlos y combinarlos para que funcionen como un solo archivo y diferir la carga de los archivos JavaScript para mejorar el rendimiento.

Para obtener más detalles, consulte nuestro tutorial paso a paso sobre cómo configurar correctamente WP Rocket en WordPress.

Método 2. Elimine CSS no utilizado en WordPress usando Asset CleanUp

Este método es un poco avanzado pero increíblemente poderoso y le permitirá eliminar fácilmente cualquier CSS no utilizado de cualquier página de su sitio web de WordPress.

Sin embargo, es un poco complicado y deberá probar la funcionalidad y la apariencia de su sitio web a fondo para asegurarse de que nada esté roto.

Primero, debe instalar y activar el Limpieza de activos enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar el Limpieza de activos »Configuración página y cambie a la pestaña Modo de prueba. Desde aquí, debe activar la opción ‘Habilitar modo de prueba’.

Esto le permite probar diferentes configuraciones y probarlas como administrador sin afectar a los visitantes del sitio web.

Después de eso, debe visitar el Limpieza de activos »Administrador de CSS / JS página. Desde aquí, puede descargar archivos CSS y JavaScript no deseados página por página.

Primero buscará su página de inicio y le mostrará todos los archivos CSS y JavaScript cargados en esa página.

Debe desplazarse hacia abajo y revisar los archivos cargados. Si ve un archivo que no necesita, puede descargarlo para esa página, tipo de publicación o todo el sitio en particular.

El complemento también le permite elegir publicaciones o páginas específicas desde aquí, o puede acceder a las mismas opciones editando la publicación o página como lo haría normalmente.

En la pantalla de edición de publicaciones, encontrará el cuadro Limpieza de activos justo debajo del editor de publicaciones.

El complemento buscará y enumerará automáticamente todos los archivos y activos cargados cuando un visitante vea esta página en su sitio web. Luego, simplemente puede descargar los archivos CSS o JavaScript no utilizados que no necesita en esa página.

Importante: No olvide probar su sitio web después de eliminar cualquier CSS o JavaScript no utilizado para asegurarse de que todo funcione correctamente.

Una vez que haya terminado de descargar y eliminar los archivos CSS y JavaScript no utilizados, puede volver a la página de configuración del complemento y desactivar el ‘Modo de prueba’.

No olvide hacer clic en el botón Actualizar todas las configuraciones para almacenar sus cambios.

Ahora puede probar su sitio web con Google Pagespeed Insights para ver el cambio en el aviso de CSS no utilizado.

Esperamos que este artículo le haya ayudado a aprender cómo eliminar fácilmente CSS no utilizado en WordPress. Es posible que también desee seguir nuestra guía completa sobre cuánto cuesta construir un sitio web y consultar nuestra lista del alojamiento de WordPress mejor administrado.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.