¿Cómo deshacerse del código CSS no utilizado? Parte 1

El autor del artículo, cuya primera parte de la traducción publicamos hoy, quisiera que los lectores sepan de antemano que deshacerse de CSS innecesarios es una tarea difícil. Si lee esto con la esperanza de encontrar una herramienta, ejecutarla, puede averiguar exactamente qué código CSS se puede eliminar de forma segura de su proyecto, entonces ... Hay herramientas similares, pero deben usarse con mucho cuidado, ya que ninguna de ellas no puede dar una respuesta decente a la pregunta de CSS no utilizado.



Es fácil entender que a cualquier desarrollador web le gustaría tomar algún tipo de utilidad, ejecutarla y eliminar el CSS innecesario que informa. Un par de minutos, y el sitio se acelera. Pero no tan simple. El autor de este material cree que dicha herramienta debe tratarse con escepticismo saludable. Ninguno de ellos le miente al desarrollador. Estas herramientas generalmente simplemente no tienen suficiente información para permitirles producir resultados en los que se pueda confiar incondicionalmente. Pero esto no significa que tales herramientas no puedan usarse. Esto no significa que no pueda deshacerse de CSS no utilizado de ninguna manera. Discutimos esto.

→ Leer la segunda parte

¿Por qué deshacerse de CSS no utilizado?

Creo que la razón principal por la que alguien podría necesitar deshacerse del CSS no utilizado se puede describir con el siguiente ejemplo. Supongamos que usa un marco CSS (como Bootstrap), y todo el código CSS para ese marco entra en su proyecto. Pero en realidad, solo una pequeña parte de dicho código se usa en el proyecto. ¿Cómo deshacerse de todo lo innecesario?

Puedo sentir los sentimientos de alguien que está en una situación similar. Los marcos CSS a menudo no ofrecen a los desarrolladores formas fáciles de seleccionar exactamente las características que se aplican a proyectos específicos. Al mismo tiempo, llevar el código fuente del marco a un estado que corresponda idealmente a un determinado proyecto puede requerir un equipo de un nivel de experiencia que tal vez no tenga. Una situación similar en sí misma puede convertirse en la razón de la búsqueda del marco.

Suponga que descarga 100 KB de CSS. Yo diría que es mucho. (En el momento en que escribo esto, css-tricks.com utiliza aproximadamente 23 Kb de CSS. Hay bastantes páginas y plantillas. No hice nada especial para reducir el tamaño de CSS). Existe la sospecha de que no está utilizando parte de esta cantidad de código. Y tal vez encuentres alguna evidencia de esto. Veo una razón para hacer sonar la alarma. Si tiene un archivo jpg de 100 Kb que se puede comprimir a 20 Kb procesándolo con algún tipo de herramienta, entonces esto es excelente y vale la pena hacerlo. Pero si algo como esto se hace con CSS, entonces esto es mucho más importante. El punto es que CSS se carga al comienzo de la carga de la página y es un recurso que bloquea la representación. Los archivos JPG no son tales recursos.

Análisis de situación con las herramientas de desarrollador de Chrome

La ventana de Chrome Developer Tools tiene una pestaña de Coverage . Con su ayuda, puede averiguar cuánto CSS y JavaScript cargados se usan realmente en la página analizada. Por ejemplo, ahora fui a css-tricks.com. A continuación se muestra lo que vi en la pestaña Coverage .


Herramientas para desarrolladores de Chrome, pestaña de cobertura

Aquí veo que el 70.7% de mi archivo style.css no se usa. Creo que no hay nada de malo en eso. La parte restante no utilizada de CSS se utiliza en algunas otras páginas del sitio. En este sitio no uso ninguna biblioteca de estilo grande. Yo mismo escribí todas las líneas de CSS, así que dudo que 2/3 de las CSS estén fuera de lugar a nivel mundial.

Supuse que al trabajar con la pestaña Coverage , puede comenzar a "grabar" y pasear por el sitio, observando cómo cae el porcentaje de recursos no utilizados a medida que se muestran diferentes páginas en el navegador. Pero, desafortunadamente, cuando la página se actualiza, el contenido de la pestaña Coverage también se actualiza. Como resultado, esta herramienta no es particularmente útil para determinar el porcentaje de uso de recursos en varias páginas. Quizás esto no sea solo si analiza una aplicación de una página.

Es desagradable para mí decir esto, pero analizar el sitio usando la pestaña Coverage resultó casi inútil. Lo que vi, estos 70.7%, es una imagen terrible que juega con mis dudas, pero este análisis no me da nada concreto, como resultado, solo puedo preocuparme por algo mal en mi sitio.

Quizás este análisis del sitio sea el mecanismo que lo llevará a la idea de que necesita encontrar y eliminar el código CSS que se carga, pero que no se utiliza en su proyecto.

Mi problema principal

Al encontrar y eliminar CSS no utilizados, lo siguiente me preocupa más. Supongamos que alguien mira los resultados del análisis y ve fragmentos CSS no utilizados.


Fragmentos de CSS no utilizados

Él piensa: "Bien, borra todo lo innecesario". Se elimina lo superfluo, y luego resulta que no era del todo superfluo, y que su eliminación condujo a grandes problemas con el estilo en todo el sitio. Aquí está la cosa: puede estar completamente seguro de que no se usa algún selector CSS, solo si realiza una investigación sobre el siguiente plan:

1. Debe verificar cada página del sitio con una herramienta como la pestaña Coverage .
2. En este caso, debe ejecutar todo el código JavaScript.
3. Esto debe hacerse con todas las opciones posibles para el estado de la aplicación.
4. Y, además, debe verificar todo esto con todas las opciones posibles para las consultas de medios utilizadas.

Si solo se marca la página de inicio del sitio web, esto no se tiene en cuenta. Estudiar todas las páginas de nivel superior tampoco se considera una prueba real. Debe pasar por todas las páginas, examinar el sitio en situaciones que su desarrollador puede no recordar de inmediato, verificar todos los casos límite. De lo contrario, todo puede terminar con la eliminación del estilo de la lista desplegable de tarjetas de crédito en la ventana modal emergente para los usuarios con una cuenta deshabilitada que inician sesión en el sistema durante el período de gracia para pagar una nueva suscripción y al mismo tiempo tienen una tarjeta de regalo válida.

Algo así es demasiado complicado para los analizadores CSS automáticos. No pueden realizar tales controles a la perfección, especialmente considerando el análisis del sitio en una situación de incertidumbre. Estamos hablando, por ejemplo, de investigar proyectos en diferentes contextos de navegador (diferentes tamaños de pantalla, diferentes capacidades de navegador, diferentes navegadores), y teniendo en cuenta el impacto de las bibliotecas de terceros en el sitio.

Y ahora quiero mostrar un ejemplo de cómo se ven en la práctica todos los problemas de los que acabo de hablar.

PurifyCSS en línea

Decidí intentar optimizar css-tricks.com utilizando el recurso en línea PurifyCSS . Puede pasarle enlaces e inmediatamente produce CSS listo para usar. "Alimenté" css-tricks.com a este sitio y tenía un nuevo código CSS a mi disposición. Esto es lo que sucedió después de usar este código.


A la izquierda está la vista habitual de css-tricks.com. A la derecha está el resultado de aplicar un nuevo CSS "refinado". Este nuevo código carecía de mucho de lo que se necesita para varias páginas del sitio.

PurifyCSS le permite analizar en función de muchos enlaces (lo cual es bueno), pero en css-tricks.com hay decenas de miles de enlaces. Muchos de ellos conducen a páginas similares, en términos de CSS, pero en cada una de estas páginas puede haber algo que no se usa en otros lugares. Además, tuve la sensación de que PurifyCSS no ejecutaba el código JS, porque después de "limpiar" mi CSS, todo lo que se mostraba en las páginas usando JavaScript resultó sin estilo. Incluso los estilos para las pseudo-clases :hover .

Probablemente, ya he dicho lo suficiente para hacerle entender que no es casualidad que confíe tan poco en esas herramientas.

Purifique CSS con PurifyCSS como parte del proceso de construcción del proyecto

PurifyCSS probablemente se usa con más frecuencia como una herramienta utilizada para construir un proyecto que como un limpiador de CSS en línea. La documentación del proyecto contiene instrucciones para su uso cuando se utiliza Grunt, Gulp y webpack. Por ejemplo, procesando archivos por plantillas:

 var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = {  //  CSS    .  output: './dist/purified.css' }; purify(content, css, options); 

Este enfoque permite una precisión mucho mayor. Los materiales del sitio que se envían para su análisis pueden ser una lista que incluye cada plantilla, cada fragmento utilizado para crear páginas y cada archivo JavaScript. Puede resultar que tal lista de recursos no sea fácil de mantener, pero le permite considerar todo lo que se puede tener en cuenta. Sin embargo, esto no se aplica al contenido de las páginas que se encuentran en ciertos repositorios (como publicaciones de blog que están almacenadas en la base de datos) y al código JavaScript de terceros, pero tal vez esto en algunos casos no sea importante, o tal vez el desarrollador podrá tener en cuenta de alguna manera las necesidades de CSS de dichos recursos.

Documentación rival de PurifyCSS PurgeCSS tiene una advertencia sobre el método de manejo de recursos utilizado por PurifyCSS. Es decir, estamos hablando del hecho de que PurifyCSS puede trabajar con recursos de cualquier tipo, y no solo con HTML y JavaScript. PurifyCSS en el curso del trabajo analiza todas las palabras en archivos y las compara con selectores en código CSS. Cada palabra se considera un selector. Es decir, muchos selectores pueden ser erróneamente reconocidos como utilizados en el sitio. Por ejemplo, en el contenido textual de un archivo, en una oración regular, puede haber una palabra correspondiente a un cierto selector CSS.

Vale la pena recordar PurifyCSS sobre esto. Esta herramienta busca selectores CSS en los materiales del sitio utilizando un algoritmo extremadamente simple. Esto, por un lado, es una idea sensata y, por otro, es bastante peligroso.

Servicio CSS no utilizado

El ajuste manual de una herramienta, realizado para que esta herramienta analice cada página, de modo que la examine desde todos los puntos de vista posibles, es, por supuesto, una rutina aburrida. Además, dicho trabajo debe llevarse a cabo diariamente, ya que la información analizada sobre el sitio debe actualizarse con nuevos datos a medida que se desarrolla el proyecto. Hay un servicio en línea llamado UnusedCSS . Independientemente pasa por alto las páginas del sitio, salvando al desarrollador de una gran cantidad de trabajo monótono. Este servicio es suficiente para transferir un solo enlace al sitio.

Me inscribí para una suscripción paga a este servicio y analicé css-tricks.com con él. Debo admitir que después de mirar los resultados, tuve la sensación de que se veían mucho más precisos de lo que había visto antes.


Analice css-tricks.com usando UnusedCSS. El informe dice que el sitio usa el 93% del código CSS cargado. Me parece cercano a la verdad, ya que escribí manualmente todo el código CSS para este sitio

El servicio, además, le permite descargar un archivo con código CSS borrado y ofrece la capacidad de administrar el contenido de este archivo. Por ejemplo, esto habilita y deshabilita los selectores que el desarrollador desea o no desea agregar al código CSS. Supongamos que un desarrollador ve un nombre de clase que, según UnusedCSS, no es necesario en el sitio, pero el desarrollador sabe con certeza que no puede prescindir de este nombre de clase. Como resultado, el código reconocido erróneamente como innecesario puede marcarse según sea necesario. Otras características de UnusedCSS incluyen trabajar con prefijos y eliminar selectores duplicados.

Realmente me gustó el hecho de que UnusedCSS me dio resultados mucho más precisos que otras herramientas. Sin embargo, hay demasiado "ruido" en los datos generados por este servicio, y todavía no sé cómo incluir UnusedCSS en el proceso repetido regularmente de construir un proyecto y poner en producción sus nuevas versiones.

→ Leer la segunda parte

Estimados lectores! ¿Ha encontrado el problema de tener código CSS no utilizado en sus proyectos?