Elimina archivos css sin usar

¿Cómo elimina archivos CSS sin usar?

Dado que el CSS define la forma en que se muestra el contenido de un documento HTML, el navegador del usuario debe descargar y analizar todos los archivos CSS externos antes de poder empezar a renderizar el contenido. En consecuencia, cuanto más CSS contenga una página web, más tiempo deberán esperar los usuarios para ver algo en sus pantallas. La inserción de CSS pequeños en el archivo HTML y la minificación de las hojas de estilo externas pueden ayudar a optimizar la representación del contenido, pero eliminar el CSS inútil es una estrategia mucho más eficaz para mejorar el rendimiento general.

La combinación de todos estos métodos garantiza que los usuarios vean el contenido tan rápido como lo permita su conexión a Internet. Además de ralentizar el rendimiento general de tu sitio web, el exceso de CSS puede causar dolores de cabeza a los desarrolladores. Las hojas de estilo limpias y ordenadas son más fáciles de mantener que las desordenadas.

Haz un favor a tus usuarios y a ti mismo deshaciéndote del CSS que no utilices. La mayoría de los desarrolladores tienen mejores cosas que hacer que eliminar las reglas CSS no utilizadas una por una. Por eso hay una variedad de herramientas diseñadas para automatizar el proceso.

A continuación se presenta un resumen de las herramientas más populares diseñadas para ayudar a los desarrolladores web a eliminar el CSS no utilizado de sus proyectos web: Me dice que el 70,7% de mi archivo no se utiliza.

¿Cómo eliminar un objeto con CSS?

Imagino que tiene razón, y que el resto del CSS se utiliza en otra parte.. No me limité a volcar una gran biblioteca de estilos en este sitio; escribí cada línea a mano, así que tengo mis dudas de que más de 2/3 de ella no se utilice globalmente. Esto podría ser lo que le ha dado la idea de que el CSS no utilizado necesita ser descubierto y eliminado en primer lugar.

Esta herramienta utiliza PurifyCSS, que es una librería JS hecha por Ilias Ismanalijev que escanea tu código fuente HTML y JS en busca de selectores usados y elimina el código no utilizado de tus archivos CSS. PurifyCSS está pensado para ser instalado a través de npm y construido en su proceso de construcción utilizando herramientas como Grunt, Gulp o Webpack. Sin embargo, si usted está usando una pila de desarrollo diferente o la construcción de sus sitios con un CMS como WordPress, puede utilizar esta herramienta en línea para limpiar su hoja de estilos. Especialmente si estás usando frameworks CSS como Bootstrap o un tema multipropósito de WordPress, lo más probable es que estés usando menos del 20% de las reglas CSS definidas.

Si tienes algún comentario o sugerencia, por favor escríbeme en Twitter: Sígueme en Twitter Los archivos CSS pueden ganar fácilmente KBs redundantes con el tiempo. Puede suceder debido a los restos de estilos históricos o simplemente porque has utilizado un gran marco CSS como Bootstrap 147 KB cuando se minimiza y lo más probable es que haya utilizado sólo una fracción de lo que tiene que ofrecer.

¿Qué recursos bloquean el renderizado?

El CSS no utilizado ralentiza la carga de la página y hace que el mantenimiento sea mucho más difícil de lo necesario.. El contenido y el css en el objeto pasado a new Purgecss. contiene el patrón glob que le dice a PurgeCSS que recoja los archivos.

html y. css en el proyecto y los purgue del código CSS no utilizado. El problema con esto es que terminas personalizando el sitio web descargado pieza por pieza, y no sabes cómo deshacerte del estilo no utilizado ya que los archivos CSS son tan largos que no puedes simplemente comprobar un nombre de clase en todo el archivo HTML para saber si puedes eliminar esa clase del archivo CSS o no.

Si no, te pasarás días haciéndolo. ¡Tus nervios no se merecen eso! Por eso se me ocurrió un tutorial exprés que hará la magia en tu sitio web y te dirá lo que necesitas, y eliminará lo que no en tu archivo CSS. Así que el trabajo de PurgeCSS es analizar tus archivos HTML de contenido y tus archivos CSS. Compara los selectores utilizados en sus archivos con los de sus archivos de contenido.

En consecuencia, elimina los selectores no utilizados de tu CSS, lo que te da un archivo CSS más pequeño que contiene sólo lo que necesitas y nada más. Bien, eso es bueno, pero ¿cómo? El número de archivos CSS no utilizados no tiene ningún efecto sobre el posicionamiento de tu sitio en Google, pero si quieres eliminar los archivos que no quieres siempre está la tecla de borrar.

Aquí es donde entra en juego PurgeCSS.

¿Cómo elimina los recursos que bloqueen el renderizado?

PurgeCSS analiza tu contenido y tus archivos CSS.. Luego hace coincidir los selectores utilizados en sus archivos con los de sus archivos de contenido. Elimina los selectores no utilizados de su CSS, lo que resulta en archivos CSS más pequeños.

Soluciona la advertencia eliminando el CSS no utilizado, dividiendo los archivos CSS por dispositivo o utilizando una estrategia CSS diferente. En este artículo explicaré con más detalle cómo solucionar la advertencia de Lighthouse «Eliminar el CSS no utilizado» en tu sitio web. Puedes ver cómo el código CSS no utilizado está afectando a tu sitio web utilizando Google Pagespeed Insights.

Le mostrará una sección titulada «Eliminar CSS no utilizado» con detalles de los archivos CSS que están afectando a sus tiempos de carga. Este método es más sencillo y se recomienda para los principiantes. Mejora en gran medida la entrega general de los archivos CSS en su sitio web de WordPress, incluyendo la eliminación de la mayor parte del CSS no utilizado.

El 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 cargueCuando un visitante abre un sitio web, el navegador normalmente tiene que descargar, analizar y procesar todas las hojas de estilo externas de la página visitada antes de poder mostrar la p