Al realizar una prueba de velocidad, es posible que hayas visto de PageSpeed Insights sobre la eliminación de CSS no utilizado. ¿Te gustaría eliminar el CSS no utilizado de tu sitio de WordPress para que cargue más rápido y obtenga mejores resultados en las pruebas de rendimiento?
Los temas y plugins de WordPress añaden mucho código CSS innecesario. El rendimiento de WordPress y la experiencia del usuario pueden mejorarse eliminando el código CSS no utilizado. En este artículo, le mostraremos cómo eliminar fácilmente el código CSS no utilizado de su sitio web de WordPress sin causar problemas.
Eliminar CSS no utilizado en WordPress usando diferentes métodos
Si desea reducir la cantidad de CSS no utilizado en su sitio web de WordPress, existen algunos métodos diferentes que puede probar.
Si bien es posible eliminar todo el CSS innecesario en WordPress, sería una tarea bastante difícil. Además, debido al funcionamiento interno de WordPress, puede resultar difícil para algunos usuarios encontrar y eliminar el CSS innecesario.
En ese caso, le mostraremos diferentes formas de eliminar CSS no utilizado y podrá elegir el mejor método que se adapte a sus necesidades.
Encuentra tus archivos CSS más grandes
Para ver tus archivos CSS más extensos, ordena el informe de cobertura por "visualización de uso" en las herramientas para desarrolladores de Chrome. Las URL suelen incluir el nombre del plugin, tema o código de terceros que generó el archivo. De esta forma, te resultará más fácil determinar qué necesitas optimizar.
Eliminar CSS no utilizado con CSS utilizado en un archivo separado
Es más rápido crear un archivo aparte, ya que el tamaño del HTML no aumenta y, a diferencia de la inserción en línea, el archivo se puede almacenar en caché. Además, LiteSpeed Cache y FlyingPress lo cargan en un archivo aparte. Asimismo, WP Rocket optimiza para puntuaciones en lugar de visitantes, a diferencia de la mayoría de los demás plugins, que utilizan archivos diferentes por ser más rápidos.
Evite los complementos que agregan CSS
Herramientas como Query Monitor y WP Hive son útiles, pero no siempre muestran si un plugin añade CSS/JS adicional al front-end. Por lo tanto, el impacto completo del plugin solo se puede observar tras volver a probar el sitio web después de añadir contenido al front-end. Los problemas más comunes son las galerías, los sliders, los formularios de contacto, los comentarios, el chat, los calendarios y los plugins de creación de páginas relacionados con el diseño.
Utilice un tema ligero + generador de páginas.
La interfaz está sobrecargada de CSS, JavaScript y fuentes. Como resultado, se garantiza un sitio web lento al combinarlo con plugins adicionales de creación de páginas como Elementor Pro y Ultimate Addons.
Habilitar optimizaciones CSS en los creadores de páginas
Entre estas configuraciones se encuentran los experimentos de Elementor y la configuración de rendimiento de Divi, que incluyen varias opciones para reducir el tamaño del CSS (por ejemplo, carga mejorada de recursos y CSS en Elementor y CSS dinámico en Divi). En general, obtendrás mejores resultados si habilitas un mayor rendimiento.
Desactivar los iconos si no los utilizas
Si no usas íconos de Elementor, desactívalos. Para Google Fonts + Font Awesome, puedes hacerlo en Perfmatters o en la documentación de Elementor.
Eliminar CSS en los complementos de descarga de activos
Con Perfmatters, puedes deshabilitar CSS/JS (o plugins completos) donde no sean necesarios, eliminar CSS no utilizado y reemplazar iframes de YouTube con imágenes de vista previa. El CSS restante no utilizado se puede hacer más accesible con todos estos métodos. Los archivos CSS/JS también se pueden deshabilitar con el plugin Asset CleanUp.
Carga diferida de imágenes de fondo encontradas en CSS
La mayoría de los complementos de caché no cargarán de forma diferida las imágenes de fondo si están empaquetadas en un archivo CSS separado.
Por lo tanto, si desea cargar imágenes de fondo de forma diferida, consulte la documentación de su plugin de caché. FlyingPress incluye una clase auxiliar de fondo diferido que puede añadir a la clase CSS adicional, a diferencia de WP Rocket, que requiere HTML en línea. Puede añadir manualmente una clase auxiliar de fondo diferido, o Optimole ofrece una solución mediante selectores CSS.
Eliminar CSS de Gutenberg
Supongamos que puede desencolar la biblioteca de bloques de Gutenberg si no utiliza bloques de Gutenberg. Use fragmentos de código o functions.php para añadir esto.
Combinar CSS (o no)
El tamaño de CSS/JS no debe superar los 10 KB si se combinan. En la mayoría de los casos, no se recomienda combinar CSS y JavaScript, ya que es prácticamente imposible.
Deshabilitar los estilos de WooCommerce
WooCommerce carga estilos en todo tu sitio web por defecto. Si solo usas estos estilos en páginas de comercio electrónico, puedes desactivarlos en todas partes. WooCommerce tiene documentación, pero recomendamos desactivar WooCommerce Bloat, que ofrece muchas más opciones para eliminar el exceso de contenido.
Encuentre más artículos como este en Seahawk Media.
