¿Cómo eliminar el CSS no utilizado en WordPress?

Eliminar el CSS no utilizado en WordPress

Mientras ejecutaba una prueba de velocidad, puede que haya notado la advertencia de PageSpeed Insights sobre la eliminación de CSS no utilizado. ¿Le gustaría eliminar el CSS no utilizado de su sitio de WordPress para hacer que cargue más rápido y obtener mejores calificaciones de rendimiento?

Hay una gran cantidad de código CSS que es añadido por los temas y plugins de WordPress que no es necesario. El rendimiento de WordPress y la experiencia del usuario pueden mejorarse eliminando el código CSS no utilizado. En este artículo demostraremos cómo puede eliminar fácilmente el CSS no utilizado de su sitio web de WordPress sin que su sitio web se rompa.

Eliminar el CSS no utilizado en WordPress usando diferentes maneras

Eliminar la advertencia de CSS PageSpeed Insights no utilizada
Eliminar el CSS no utilizado - Aviso de PageSpeed Insights

Si quieres reducir la cantidad de CSS no utilizado en tu sitio web de WordPress, hay algunos métodos diferentes que puedes probar.

Aunque sería posible eliminar todo el CSS innecesario en WordPress, sería una tarea bastante difícil. Además, como resultado de la forma en que WordPress funciona entre bastidores, puede ser difícil para algunos usuarios encontrar y eliminar el CSS innecesario.

En ese caso, te mostraremos diferentes formas de eliminar el CSS no utilizado, y podrás elegir el mejor método que se adapte a tus necesidades.

Encuentre sus archivos CSS más grandes

Para ver tus archivos CSS más extensos, ordena tu informe de cobertura por "visualización de uso" en Chrome Dev Tools. Las URL suelen incluir el nombre del plugin, el tema o el código de terceros que ha generado el archivo. Como resultado, ahora te será más fácil determinar lo que necesita ser optimizado.

Eliminar el CSS no utilizado con el CSS utilizado en un archivo separado

Es más rápido crear un archivo separado, ya que el tamaño del HTML no aumenta, y el archivo puede ser almacenado en caché, a diferencia del inlining. También se carga en un archivo separado por el CSS de LiteSpeed Cache y FlyingPress. Además, WP Rocket optimiza para las puntuaciones en lugar de los visitantes, a diferencia de la mayoría de los otros plugins, que utilizan archivos diferentes porque son más rápidos.

Evite los plugins que añaden CSS

Herramientas como Query Monitor y WP Hive son buenas, pero no siempre muestran si un plugin añade CSS/JS extra al front-end. Como resultado, el impacto completo del plugin sólo se puede observar después de volver a probar su sitio web después de añadir contenido al front-end. Los culpables más comunes son las galerías, los sliders, los formularios de contacto, los comentarios, el chat, los calendarios y los plugins de construcción de páginas relacionados con el diseño.

Utilice un tema ligero + un constructor de páginas.

El front end está sobrecargado de CSS, JavaScript y fuentes. Como resultado, se garantiza un sitio web lento cuando se combina con plugins constructores de páginas adicionales como Elementor Pro y Ultimate Addons.

Habilitar las optimizaciones de CSS en los constructores de páginas

Entre estos ajustes se encuentran los experimentos de Elementor y los ajustes de rendimiento de Divi, que incluyen varias opciones para reducir el tamaño del CSS (por ejemplo, mejora de la carga de activos y CSS en Elementor y CSS dinámico en Divi). En general, obtendrás mejores resultados si habilitas más rendimiento.

Desactive los iconos si no los usa

Si no está utilizando los iconos de Elementor, desactívelos. Para Google Fonts + Font Awesome, puedes hacerlo en Perfmatters o en la documentación de Elementor.

Eliminar el CSS en los plugins de descarga de activos

Usando Perfmatters, puedes deshabilitar CSS/JS (o plugins enteros) donde no son necesarios, eliminar el CSS no utilizado, y reemplazar los iframes de YouTube con imágenes de vista previa. El CSS restante que no se utiliza puede hacerse más accesible con todos estos métodos. Los archivos CSS/JS también se pueden deshabilitar con el plugin Asset CleanUp.

Perfmatters le ofrece un control total sobre dónde cargan los plugins los archivos CSS y los archivos Javascript.

Carga perezosa de imágenes de fondo encontradas en CSS

La mayoría de los plugins de caché no cargan de forma perezosa las imágenes de fondo si están empaquetadas en un archivo CSS separado.

Por lo tanto, si desea cargar de forma perezosa las imágenes de fondo, consulte la documentación de su plugin de caché. FlyingPress viene con una clase de ayuda lazy-bg que puede añadir a la clase CSS adicional, a diferencia de WP Rocket que requiere HTML en línea. Una clase de ayuda lazy-bg puede ser añadida manualmente, u Optimole tiene una solución usando selectores CSS.

Eliminar el CSS de Gutenberg

Supongamos que usted puede dequeue la biblioteca de bloques Gutenberg si usted no utiliza bloques Gutenberg. Utilice Code Snippets o functions.php para añadir esto.

Combinar CSS (o no)

El tamaño de CSS/JS no debería superar los 10KB si los combina. En la mayoría de los casos, el CSS y el JavaScript no deberían combinarse ya que es casi imposible.

Desactivar los estilos de WooCommerce

Por defecto, WooCommerce carga los estilos en todo su sitio web. Si sólo utilizas estos estilos en las páginas de comercio electrónico, puedes desactivarlos en todas partes. WooCommerce tiene documentación, pero recomendamos Disable WooCommerce Bloat, que tiene muchos más ajustes para eliminar el bloat.

Encuentre más artículos de este tipo en Seahawk Media.

Entradas relacionadas

Komal Bothra 4 de febrero de 2023

¿Qué es un servidor proxy?

Un servidor proxy es un ordenador que actúa como intermediario entre su ordenador y

Glosario de alojamiento
Komal Bothra 3 de febrero de 2023

Marketing en buscadores (SEM) 

El marketing en buscadores, o SEM, es una forma de marketing en línea que utiliza publicidad de pago.

Glosario SEO
Komal Bothra 2 de febrero de 2023

Estudio de caso: Soluciones tecnológicas Mabry

Mabry Tech es una empresa especializada en consultoría y desarrollo de soluciones innovadoras para empresas. Mabry

Estudio de caso

Empezar con Seahawk

Regístrate en nuestra app para ver nuestros precios y obtener descuentos.