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 perjudicar el tiempo de carga de su sitio web. Si ejecuta su sitio web a través de herramientas de prueba de velocidad como Google PageSpeed ​​Insight, es posible que reciba una advertencia para eliminar el 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 un increíble complemento conocido como Asset CleanUp: Page Speed ​​Booster. Con este complemento, eliminar CSS no utilizado es tan fácil como hacer clic en algunos botones. Alternativamente, si no le importa gastar unos cuantos dólares al año, con WP Rocket, hay un botón CSS no utilizado eliminado, simplemente actívelo y el complemento eliminará todo el CSS no utilizado automáticamente.

Pago: Los 7 mejores alojamientos de WordPress administrados en Google Cloud

¿Qué es CSS no utilizado?

CSS no utilizado es un archivo CSS que está presente en una página pero que en su mayoría no es necesario para que la página se cargue. Cuando un visitante abre un sitio web, el navegador generalmente 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 dicha página que no se usa 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 usan 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, el CSS se cargará.

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

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

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

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

Cómo identificar CSS no utilizado

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

Una es analizar tu 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 ello.

Puede ver desde arriba que hay un caso de CSS sin usar 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 usando las herramientas de Chrome Dev.

En su navegador Chrome, abra las herramientas de Chrome Dev y luego vaya a cobertura. Luego haga clic en el botón de recarga dentro del área de cobertura. Puede encontrar una 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 de CSS no utilizados. También puede usar PurifyCSS para encontrar CSS sin usar

Cómo eliminar CSS no utilizado

Siga estos pasos para eliminar el CSS no utilizado de WordPress:

1. Instalar la limpieza de activos

Vaya al complemento y luego Agregar nuevo. Luego, escriba "Limpieza de activos" en el cuadro de búsqueda de la página Agregar nuevo complemento. Instalar y activar 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 Limpieza de activos.

3. Descarga CSS y JS no deseados

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

Para descargar CSS y JS, haga clic en 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 publicaciones, páginas o categorías.

Un ejemplo es descargar cualquier formulario de contacto de la carga de todo el sitio, excepto 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 complementos de WordPress CSS no utilizados

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

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

Limpieza de activos: Page Speed ​​Booster facilita la eliminación de CSS y JSin no utilizados en WordPress, incluso para principiantes. Todo lo que tiene que hacer es desactivar un CSS 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 no utilizados 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. Cohete WP

WP Rocket es el complemento de rendimiento premium número uno de WordPress. Si eres un novato, quiero decir, si no tienes experiencia o no te sientes cómodo con WordPress, entonces WP Rocket es la forma más fácil de eliminar el CSS no utilizado.

Debe comprar el complemento, una vez que lo haya hecho, puede descargarlo de su cuenta o consultar su correo electrónico para obtener un enlace de descarga.

Instale el complemento a través de Dashboard>plugins>Add new>Upload.

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. Materias de rendimiento

Perfmatters es un complemento premium desarrollado por Brian Jackson y su hermano, Brett Jackson. Este complemento puede ayudar a eliminar CSS no utilizado muy fácilmente.

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

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

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

4. Administrador de CSS JS

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

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

Conclusión

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

Puede que sea imposible eliminar todo el CSS no utilizado, pero puede reducirlo al mínimo. Hago uso de Asset CleanUp para eliminar CSS no utilizado para TargetTrend.

Recuerde, optimice, pero no se obsesione demasiado con eso, 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