Cómo eliminar CSS no utilizado en WordPress (2 métodos sencillos)

Cada tema y complemento que instale puede agregar CSS innecesario a su sitio de WordPress. Esto podría conducir a tiempos de carga más lentos. Por lo general, estas hojas de estilo no son necesarias para representar el contenido de una página, pero aún están presentes en el código. Por lo tanto, puede estar buscando una manera fácil de eliminar CSS no utilizado en WordPress.

Afortunadamente, el proceso es más simple de lo que piensas. Una vez que haya identificado el código innecesario en su sitio, puede usar un complemento para eliminarlo y mejorar la velocidad de su sitio.

Por qué debería eliminar el CSS no utilizado

El CSS no utilizado es código que en realidad no se necesita para cargar una página. Cuando se trata de WordPress, generalmente se encuentra en temas y complementos que instala en su sitio.

Luego, cuando un usuario acceda a su sitio web, el navegador aún necesitará descargar y procesar este CSS no utilizado. Esto puede contribuir a tiempos de carga más prolongados, lo que tendrá un impacto negativo en el rendimiento general de su sitio.

De hecho, el CSS no utilizado puede dar lugar a una puntuación deficiente de la pintura con contenido más grande (LCP) en Core Web Vitals:

La pintura con contenido más grande es una métrica que mide el tiempo que tarda una página en cargar completamente el elemento más grande en la pantalla. Suele ser un elemento visual, como una imagen de héroe.

En pocas palabras, el código CSS no utilizado agrega una gran cantidad de contenido a su página. Como resultado, el contenido como las imágenes tardará más en cargarse.

Si su sitio es lento, podría estar perdiendo conversiones potenciales. Además, podría conducir a clasificaciones más bajas en los resultados de búsqueda. Por lo tanto, es importante que tome las medidas adecuadas para eliminar el CSS no utilizado y acelerar su sitio.

Cómo identificar CSS no utilizado en su sitio

La buena noticia es que identificar CSS no utilizado en su sitio es una tarea fácil. Puede comenzar ejecutando una prueba de rendimiento en PageSpeed ​​Insights. Todo lo que tienes que hacer es ingresar tu URL y hacer clic en Analizar :

Una vez que la prueba esté lista, vaya a la sección Oportunidades y busque la pestaña Reducir CSS no utilizado . Si hace clic en él, verá más información sobre este código:

También le mostrará qué archivos CSS y complementos están afectando sus tiempos de carga:

Un cuadrado naranja para Eliminar CSS no utilizado significa "Necesita mejorar", mientras que un triángulo rojo representa una puntuación muy baja. Si no puede ver esta sección en los resultados de su prueba, significa que no tiene ningún problema significativo de CSS en su sitio ( o al menos en la página específica que probó; es posible que desee probar otras páginas para asegurarse de que ).

Cómo eliminar CSS no utilizado en WordPress

Si PageSpeed ​​Insights ha marcado CSS no utilizado en su sitio, querrá eliminarlo para optimizar el rendimiento de su sitio.

Puede hacer esto usando un complemento de WordPress que hace todo el trabajo pesado por usted. Alternativamente, puede usar un complemento diferente que requerirá algo de trabajo manual de su parte, pero como recompensa obtendrá más control sobre el proceso. En esta sección, lo guiaremos a través de ambos métodos, comenzando con el más fácil.

Método 1: elimine el CSS no utilizado con Debloat

Como hemos discutido, CSS "no utilizado" no es esencial. Por lo tanto, eliminar estos archivos no tendrá ningún impacto en el diseño de sus páginas web.

Sin embargo, si elimina accidentalmente el código incorrecto, podría romper su sitio. Por lo tanto, si no está familiarizado con la codificación, es probable que desee usar un complemento para eliminar el CSS no utilizado.

Con eso en mente, recomendamos Debloat para eliminar el código CSS no utilizado. Es un complemento de optimización gratuito que también puede ayudarlo a mejorar su Core Web Vitals al retrasar los recursos que bloquean el renderizado, minimizar el código y más.

Para comenzar, deberá instalar y activar el complemento en su sitio. Luego, vaya a Configuración > Debloat: Optimizar y seleccione la pestaña Optimizar CSS :

En la parte superior, verá un mensaje que le aconseja usar un complemento de almacenamiento en caché si planea eliminar el CSS no utilizado. Si esto le interesa, podría considerar probar una herramienta gratuita como W3 Total Cache o WP-Optimize.

A continuación, desplácese hacia abajo hasta la parte inferior de la página y marque la casilla Eliminar CSS no utilizado :

Esto revelará varias otras opciones. Sin embargo, si no se siente cómodo con el manejo del código, no se preocupe, solo tendrá que seleccionar algunas configuraciones.

Deberá marcar las casillas Habilitar para complementos CSS y Habilitar para tema CSS :

Luego, desplácese hacia abajo hasta Eliminar CSS activado y seleccione la casilla Todas las páginas :

Cuando esté listo, haga clic en Guardar cambios . El complemento luego eliminará el CSS no utilizado en su complemento y archivos de tema.

Tenga en cuenta que este método no es 100% preciso y que parte del código no utilizado puede pasar desapercibido. Aún así, si ejecuta otra prueba de velocidad después de habilitar esta configuración, debería ver una mejora significativa en el rendimiento de su sitio.

Si desea utilizar un complemento más potente, puede consultar WP Rocket. Esta herramienta premium viene repleta de funciones de optimización, que incluyen almacenamiento en caché de páginas y navegadores, compresión GZIP, minificación de código y carga diferida. También puede eliminar el CSS no utilizado de su sitio.

Método 2: elimine el CSS no utilizado con Asset CleanUp

En el primer método, usamos un complemento que eliminó automáticamente el código innecesario de su sitio. Este método es muy conveniente, ya que todo lo que necesita hacer es habilitar algunas configuraciones.

Sin embargo, es posible que esté buscando un método que le brinde más control sobre qué archivos eliminar y cuáles conservar. Si ese es el caso, Asset CleanUp puede ser una mejor opción para usted. Este complemento le permite seleccionar y eliminar archivos CSS no deseados página por página.

Tenga en cuenta que este enfoque puede llevar un poco de tiempo y puede requerir algunos conocimientos técnicos. Además, deberá probar y actualizar constantemente cada página para asegurarse de que sus cambios no hayan afectado el diseño y la funcionalidad de su sitio.

Paso 1: instale el complemento Asset CleanUp y habilite el modo de prueba

Si aún desea probar este método, continúe e instale Asset CleanUp en su sitio. Luego, vaya a Limpieza de activos > Configuración . Después de eso, seleccione Modo de prueba en el menú lateral y use el interruptor para habilitar esta función:

De esta manera, cualquier cambio que realice en su sitio no afectará la experiencia del usuario en la interfaz. Puede eliminar los archivos CSS no utilizados en un entorno seguro y desactivar el modo de prueba una vez que se haya asegurado de que todo funciona correctamente.

Paso 2: descargue los archivos CSS no utilizados en cada página

Ahora, haga clic en la pestaña Administrador de CSS y JS . Aquí, puede eliminar cualquier archivo no deseado de su sitio, comenzando con la página de inicio:

Si se desplaza hacia abajo, verá una lista de todos los archivos cargados en esta página:

Para eliminar un archivo CSS, solo necesitará usar el interruptor de palanca para Descargar en esta página :

Asset CleanUp le permitirá saber si hay algún archivo "secundario" que dependa de este archivo y que pueda verse afectado por su eliminación. Puede marcar la casilla para Ignorar la regla de dependencia y mantener los "hijos" cargados para mantener estos archivos.

Tenga en cuenta que si no está seguro de qué archivos CSS eliminar, puede consultar sus resultados en PageSpeed ​​Insights. Verá la URL de estos archivos en la sección Reducir CSS no utilizado :

Luego puede buscarlos en Limpieza de activos. Si navega a la pestaña Páginas , puede buscar una página en particular en su sitio y revisar los archivos CSS que están cargados en ella:

Una vez que seleccione un archivo que desea descargar, deberá hacer clic en Actualizar para guardar estos cambios.

Paso 3: prueba tu sitio

Finalmente, le recomendamos que pruebe su sitio después de cada eliminación de archivos para asegurarse de que funciona correctamente. Recuerde que debe iniciar sesión en su panel de administración de WordPress para ver estos cambios. Si accede al sitio como visitante (es decir, un usuario que no ha iniciado sesión), no podrá detectar ningún problema en su página ya que tiene habilitado el modo de prueba.

También es importante tener en cuenta que, mientras tenga habilitado el modo de prueba, no verá ninguna mejora en PageSpeed ​​Insights. Los resultados aún mostrarán los archivos CSS no utilizados.

Una vez que esté seguro de que los archivos eliminados no han afectado su sitio, puede continuar y desactivar el modo de prueba. Luego, ejecuta una prueba de velocidad en PageSpeed ​​Insights. En este punto, los archivos CSS eliminados no deberían aparecer en los resultados.

Complementos premium de WordPress para eliminar CSS no utilizado

Si bien las dos herramientas anteriores son gratuitas, también puede encontrar algunos complementos de WordPress realmente simples para eliminar el CSS no utilizado si está dispuesto a pagar.

Dos de las mejores opciones son WP Rocket (desde $59) y FlyingPress (desde $60).

Con WP Rocket, obtiene una función de eliminación de CSS no utilizado con un solo clic que escanea todo su sitio y elimina el CSS no utilizado página por página.

FlyingPress también ofrece una eliminación similar de CSS sin usar con un solo clic, con opciones para cargar el CSS sin usar de formas más óptimas o eliminarlo por completo.

Ambas herramientas se basan en el procesamiento del código de su sitio en sus propios servidores, que es la forma en que pueden ofrecer un enfoque de eliminación página por página tan simple.

Algunos consejos más para ayudar a reducir el CSS no utilizado

Una vez que haya eliminado el CSS no utilizado en su sitio (o al menos la mayor parte), querrá evitar agregar más código innecesario en el futuro. En este frente, hay varias cosas que puede hacer para mantener su sitio funcionando sin problemas.

Primero, querrá asegurarse de que está usando un tema ligero. En términos generales, un tema ligero de WordPress es un tema rápido de WordPress. En pocas palabras, su tema debe contener un código mínimo y estar optimizado para Core Web Vitals.

Por ejemplo, nuestro tema Neve prioriza la velocidad y el rendimiento. De hecho, en una instalación predeterminada de WordPress, este tema tarda menos de 1 segundo en cargarse y tiene un tamaño de archivo de 28 KB:

Del mismo modo, querrá elegir complementos ligeros para su sitio. Puede buscar la etiqueta ligera al navegar por los complementos:

Le recomendamos que realice una prueba de velocidad después de instalar un nuevo complemento. De esta manera, puede verificar si contiene CSS sin usar.

Además, puede intentar limitar la cantidad de complementos en su sitio. Esto puede ayudarlo a mejorar su rendimiento general y minimizar las posibilidades de tener CSS sin usar en sus páginas.

Como tal, si hay complementos que ya no necesita, considere eliminarlos. Tenga en cuenta que desactivarlos podría no ser suficiente; aún podrían cargar código innecesario y ocupar espacio en su base de datos. Por lo tanto, es importante que los elimine por completo de su sitio.

Elimine el CSS no utilizado de su sitio web hoy

Al eliminarlo de su sitio, puede mejorar el rendimiento de Core Web Vitals y brindar una mejor experiencia de usuario.

En resumen, aquí se explica cómo eliminar el CSS no utilizado en WordPress:

Para conocer otras formas de mejorar las métricas de Core Web Vitals de su sitio, también puede leer nuestras guías sobre cómo acelerar la pintura con contenido más grande y cómo reducir el cambio de diseño acumulativo.

¿Tiene alguna pregunta sobre cómo eliminar CSS no utilizado en WordPress? ¡Háganos saber en la sección de comentarios!