Respaldado por Awesome Motive.
Más información en nuestro Blog de los Halcones Marinos.

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

Actualizado el
Escrito por: imagen de autor Komal Bothra
Eliminar el CSS no utilizado en WordPress

Al ejecutar una prueba de velocidad, es posible que haya notado que PageSpeed Insights advierte sobre la eliminación de CSS no utilizado. ¿Le gustaría eliminar CSS no utilizado de su sitio de WordPress para que se cargue más rápido y obtenga 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

¿Buscas los mejores temas de WordPress para aplicaciones para que tu aplicación destaque? Tenemos

¿Alguna vez se ha preguntado cómo llegar a un público internacional sin contratar a un equipo de traductores? Para

¿Listo para llevar tu blog al siguiente nivel? Migrar de Medium a WordPress podría

Komal Bothra 17 de julio de 2024

Los mejores temas de WordPress para aplicaciones en 2024

¿Buscas los mejores temas de WordPress para aplicaciones para que tu aplicación destaque? Tenemos

WordPress
Komal Bothra 17 de julio de 2024

De Medium a WordPress: Potencia tu contenido e impulsa tu blog

¿Listo para llevar tu blog al siguiente nivel? Migrar de Medium a WordPress podría

WordPress
Komal Bothra 16 de julio de 2024

Los mejores complementos de Elementor para WordPress

En el mundo de WordPress, Elementor cambia las reglas del juego. Este potente plugin constructor de páginas ha

WordPress

Empieza con Seahawk

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