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 mostrar 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 afecta su sitio web utilizando Google Pagespeed Insights. Le mostrará una sección llamada "Eliminar CSS no utilizado" con detalles de los archivos CSS que están afectando sus tiempos de carga.

¿Por qué se agrega CSS no utilizado en WordPress?
CSS se utiliza para diseñar el aspecto de su sitio web de WordPress. Su tema de WordPress incluye CSS, la mayor parte del cual 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 otras cosas 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, los efectos pueden sumarse y tener un impacto notable en la velocidad de su sitio.

¿Cómo eliminar CSS no utilizado en WordPress?

Hay diferentes formas de reducir el CSS no utilizado en su sitio web de WordPress. Sin embargo, sería 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 cuál funciona mejor para usted.

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 drásticamente la entrega general de archivos CSS a 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 es rápido para sus usuarios. En primer lugar, 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 vaya a la pestaña "Optimización de archivos".

A continuación, debe desplazarse hacia abajo hasta la sección de archivos CSS. A partir de ahí, debe marcar la casilla junto a la opción "Optimizar la entrega de CSS".

Esta opción genera un archivo CSS que contiene solo 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 usando una tecnología llamada carga diferida. Al eliminar este CSS que bloquea la representación, su sitio web se vuelve visible para los usuarios mucho más rápido de lo que lo haría si cargara todos los archivos CSS antes de que se mostrara 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 la memoria caché de su sitio web. Una vez completado, puede volver a probar el rendimiento de su sitio web con 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 reducir el código HTML. Todos estos ajustes agregan pequeñas mejoras a su velocidad general, lo que se suma a una experiencia de carga más rápida para sus visitantes.

También verá opciones para contraer y combinar archivos CSS. Estas opciones reducirán las solicitudes HTTP y le darán un impulso adicional de velocidad. Sin embargo, deberá verificar su sitio web cuidadosamente para asegurarse de que no haya nada roto después de habilitar esta configuración.

Además, puede aplicar la misma optimización para archivos JavaScript en su sitio web. Puede contraerlos y combinarlos para que funcionen como un solo archivo y posponer la carga de 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 de WordPress. Sin embargo, es un poco complicado y deberá probar a fondo la funcionalidad y la apariencia de su sitio web para asegurarse de que no haya ningún problema. En primer lugar, debe instalar y activar el complemento Asset Cleanup. 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 allí, debe habilitar la opción "Activar 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 tienes que visitar el Limpieza de activos »Administrador de CSS / JS página. Desde allí, puede descargar archivos CSS y JavaScript no deseados página por página.

Primero recuperará su página de inicio y le mostrará todos los archivos CSS y JavaScript cargados en esa página. Debe desplazarse hacia abajo y examinar los archivos cargados. Si ve un archivo que no necesita, puede descargarlo para esa página en particular, ese tipo de publicación o todo el sitio.

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 área de Limpieza de activos justo debajo del editor de publicaciones.

El complemento recupera y enumera automáticamente todos los archivos y activos cargados cuando un visitante ve esta página en su sitio web. Luego, simplemente puede descargar cualquier archivo CSS o JavaScript no utilizado que no necesite en esta página.

Importante: Recuerde 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". Recuerde hacer clic en el botón Actualizar todas las configuraciones para guardar 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. También puede 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 ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.