Cómo eliminar CSS y JS no utilizados en WordPress (muy fácil)

Tener una gran cantidad de CSS y JS sin usar en su sitio web puede afectar el tiempo de carga de su sitio web. Si ejecuta su sitio web a través de un herramientas de prueba de velocidad como Google PageSpeed ​​Insight, es posible que reciba una advertencia para eliminar CSS no utilizado.

Afortunadamente, hay una manera muy fácil de hacerlo. No necesita tener ningún conocimiento técnico especial para poder eliminar CSS y JS no utilizados de su sitio de WordPress.

Esto se debe a una increíble plugin conocido como Limpieza de activos: Acelerador de velocidad de página. Con este complemento, eliminar CSS no utilizado es tan fácil como hacer clic en algunos botones. Alternativamente, si no le importa gastar unos dólares al año, con WP Rocket, hay un botón CSS no utilizado eliminado, simplemente actívelo y el complemento eliminará todos los CSS no utilizados automáticamente.

Fecha de salida: Los 7 mejores alojamientos de WordPress administrados en la nube de Google

¿Qué es CSS no utilizado?

El CSS no utilizado es un archivo CSS que está presente en una página pero que, en general, no es necesario para que se cargue la página. Cuando un visitante abre un sitio web, el navegador normalmente tiene que descargar, analizar y procesar todas las hojas de estilo externas en la página visitada antes de poder mostrar el contenido de la página al visitante. Si existe algún CSS en una página de este tipo que no se utiliza en la página, el navegador perderá su tiempo en él.

Un ejemplo clásico de esto es la mayoría de los complementos de formularios de contacto que se utilizan. Estos complementos, aunque se utilizan principalmente solo en la página Contáctenos, cargan su CSS en todo el sitio web. No importa si es la página de inicio donde no se usa, se cargará el CSS.

Si hay demasiados CSS que no son necesarios pero se están cargando y ralentizando el tiempo del navegador para leer y mostrar una página, puede convertirse en un problema.

Aparte de los complementos, los desarrolladores de temas escriben muchas cosas en style.css que en su mayoría no son necesarias. Pero ya sea que sea necesario o no, ¡se cargan cada vez que se carga su sitio!

Un CSS no utilizado puede no ser un problema, pero una gran cantidad de CSS no utilizado puede afectar el tiempo de carga de su sitio web.

Fecha de salida: Los 10 mejores y más rápidos temas de WordPress 

Cómo identificar CSS no utilizado

Encontrar CSS y JS sin usar es algo muy fácil de hacer. Hay dos enfoques que recomendaré.

Una es analizar su sitio web a través de Google PageSpeed ​​Insight. Compruebe si su sitio web tiene un problema de eliminación de CSS no utilizado. Haga clic en él y podrá identificar el componente de su sitio responsable de él.

Puede ver desde arriba que hay un caso de CSS no utilizado registrado. Puedo ver el complemento y la ubicación del CSS no utilizado mirando esto.

La segunda opción es obtener un análisis más detallado. Puede lograr esto utilizando las herramientas de desarrollo de Chrome.

En su navegador Chrome, abra las herramientas de desarrollo de Chrome y luego vaya a Cobertura. Luego haga clic en el botón de recarga dentro del área de cobertura. Puedes encontrar un guía completa sobre cómo hacer esto en la herramienta para desarrolladores de Google.

La otra opción es usar jitbit para buscar selectores CSS no utilizados. También puedes usar Purificar CSS para encontrar CSS no utilizado

Cómo eliminar CSS no utilizado

Siga estos pasos para eliminar CSS no utilizado de WordPress:

1. Instale Asset CleanUp

Vaya al complemento y luego Agregar nuevo. Luego, escribe "Limpieza de activos" en el cuadro de búsqueda de la página Agregar nuevo complemento. Instale y active el complemento.

2. Vaya a la configuración del complemento

Para acceder a la configuración del complemento, desde el tablero de WordPress, haga clic en configuración y luego haga clic en Asset CleanUp.

3. Descargue CSS y JS no deseados

En la configuración del complemento, es posible que deba aceptar que sabe cómo funciona el complemento debajo del grifo de extracción antes de comenzar.

Para descargar CSS y JS, haga clic en el administrador de CSS y JSS. Desde allí, puede eliminar cualquier CSS y JS que no necesite. Puede eliminarlo solo para la página de inicio, para todo el sitio o para una URL específica. También puede eliminar para publicaciones, páginas o categorías.

Un ejemplo es descargar cualquier formulario de contacto para que no se cargue en todo el sitio, excepto en la página de contacto.

Tómese su tiempo y descargue todos los CSS y JS que sepa que no son necesarios. Asegúrese de probar su sitio después de que haya terminado para asegurarse de que todo esté bien.

Eliminar los complementos de WordPress CSS no utilizados

Aquí hay algunos complementos que puede usar para eliminar CSS no utilizado en WordpPress:

1. Limpieza de activos: aumento de la velocidad de la página

Limpieza de activos: Acelerador de velocidad de página facilita la eliminación de CSS y JSin WordPress no utilizados incluso para principiantes. Todo lo que tiene que hacer es desactivar un CSS en particular que no es necesario para una página en particular.

También puede desactivar solo para publicaciones individuales. Con la versión premium, puede desactivar CSS / JS sin usar mediante complementos.

Este complemento es un complemento de rendimiento completo con muchas otras opciones para acelerar WordPress. Eliminar CSS / JS no utilizado es solo una parte.

En esta publicación, utilicé este complemento que tiene una guía.

2. Rocket WP

WP Rocket es el plugin de rendimiento premium número uno de WordPress. Si es un novato, quiero decir, si no tiene experiencia o no se siente cómodo con WordPress, entonces WP Rocket es la forma más fácil de eliminar CSS no utilizado para.

Debes comprar el complemento, una vez que lo hayas hecho, puedes descargarlo desde tu cuenta o consultar tu email para obtener un enlace de descarga.

Instale el complemento a través del Panel de control> complementos> Agregar nuevo> Cargar.

Simplemente navegue a la configuración de WP Rocket y luego haga clic en la pestaña "Optimización de archivos". Luego, desplácese hacia abajo y verá "Eliminar CSS no utilizado", marque la casilla, guarde y borre el caché.

3. Perfmatters

Perfmatters es un complemento premium desarrollado por Brian Jackson y su hermano, Brett Jackson. Este complemento puede ayudar a eliminar CSS no utilizado con mucha facilidad.

Primero, debe comprar el complemento. Luego instálelo. Activar licencia. Cuando navegue a la configuración, active el administrador de scripts.

Simplemente vaya a cualquier página o publicación en su sitio web, verá el ícono del administrador de scripts en el menú del tablero, haga clic en él. Podrá eliminar CSS y JS no utilizados de la página o de forma global.

Este complemento es un complemento de rendimiento, viene con muchas otras opciones para acelerar WordPress. Eliminar CSS / JS no utilizado es parte de esto.

4. Administrador de CSS JS

Administrador de CSS JS puede eliminar específicamente CSS o JS de dispositivos móviles o de escritorio. Dependiendo de lo que quieras conseguir.

Este complemento también puede diferir la carga de archivos CSS o JS.

Conclusión

Si tiene una gran cantidad de CSS y JS sin usar, notará una gran mejora en las puntuaciones de velocidad y rendimiento.

Puede que sea imposible eliminar todos los CSS no utilizados, pero puede reducirlos al mínimo. Utilizo Asset CleanUp para eliminar CSS no utilizado para Tendencia objetivo.

Recuerde, optimice, pero no se obsesione demasiado con él, a menos que desee que su sitio se vea como el sitio web más rápido del mundo.

Lea también:

Cómo eliminar los recursos que bloquean el renderizado en WordPress

Cómo hacer WordPress muy rápido

Cómo atraer tráfico a tu blog