Cómo solucionar problemas de CSS no utilizados

10

Estoy ejecutando algunas pruebas de velocidad en un blog, y siempre recibo quejas sobre CSS no utilizado. Pero esto no es CSS que nunca uso, simplemente no se usa en esa página en particular.

Ahora trabajo de forma estructurada, pero todavía tiene que haber algo de CSS en el archivo que no se utilizará, porque lo necesita en otra página.

No creo que usar diferentes archivos CSS en diferentes páginas sea el camino a seguir, creo que es mucho mejor crear un archivo grande que se pueda almacenar en caché.

Ahora hay una manera elegante de lidiar con esto, o simplemente te quedas con ella.

css optimization Saif Bechan
fuente

Respuestas:

7

Su afirmación de que está mejor con un archivo CSS más grande es correcta. Es probable que solo sea unos pocos KB cuando se comprima, y ​​debe almacenarse en caché, por lo que no es una gran carga. Sin embargo, hay algunas cosas que vale la pena revisar.

Si alguna vez solo se usa CSS en una página, puede ser mejor en ese caso colocar el CSS en la página, en algunas etiquetas de estilo. (Nota: esto puede hacer que las cosas sean difíciles de mantener, especialmente cuando más tarde decidas usar un estilo similar en otro lugar).

Si toma sus páginas más populares (por ejemplo, las páginas que representan más del 50% de las vistas de su página) y descubre que solo se está usando una pequeña cantidad de CSS en esas páginas, puede ser más rápido para los usuarios dividirlo en Dos archivos CSS. Ahora, los nuevos usuarios que visitan sus páginas más populares tienen mucho menos que descargar. En otras páginas hay una solicitud HTTP adicional, pero eso no es un gran problema.

Asegúrese de que su CSS esté bien optimizado. Evite los selectores descendientes cuando sea posible. Si el lado derecho de un selector es demasiado genérico, puede ralentizar el tiempo de representación. Por ejemplo .class div {}, sería un poco lento porque el navegador debe verificar cada <div>elemento de la página, luego buscar el árbol DOM en la parte superior para encontrar (o no) un elemento con la clase.

Cabra descontento
fuente
2
Para optimizar sugeriría usar algo como csslint.net
Toby
5

Creo que esta es una deficiencia de la herramienta de prueba más rápida que estás usando, que no mira todo el sitio y no ve qué CSS nunca se usa. Si puede encontrar una herramienta que lo haga, ¡háganoslo saber!

Creo que es mucho mejor crear un archivo grande que se pueda almacenar en caché.

Sí, eso tiene sentido, a menos que haya un conjunto de páginas que necesiten un poco más de CSS, en cuyo caso puede incluirlo en ellas.

Paulmorriss
fuente
La herramienta que uso es gtmetrix.com . Es una prueba en línea que hace tanto a Yslow como a Page Speed. No sé si prueban el sitio completo. Yslow no se queja de CSS no utilizado, es Page Speed ​​el que se queja. Se queja de que H3 no se usa, por ejemplo, no lo uso en la portada, pero sí en otras páginas. + Otra cosa es la sección para imprimir en mi CSS, que no se usa en ninguna parte del sitio web normal, ¿tiene alguna recomendación para eso?
Saif Bechan
El CSS para imprimir puede ser utilizado por cualquier página, por lo que lo necesita por si acaso.
Paulmorriss
@SaifBechan si tiene los estilos de impresión en un css separado en el que puede orientar el archivo completo media="print"; algunos navegadores no emitirán la solicitud hasta que realmente intente imprimir / previsualizar la página.
Zhaph - Ben Duguid el
1

Hay un pequeño y práctico complemento de Firefox llamado Dust-Me Selectors , que verifica a través de su CSS e informa cualquier regla no utilizada. Sin embargo, no funciona con la última versión de Firefox (v8.0), lo cual es una pena.

PD: Si fuera usted, tomaría CSS Lint con una pizca de sal; hay una escuela de pensamiento que dice que sus "recomendaciones" son pedantes y simplemente exageran. (Para más detalles, vea el artículo persuasivo de Matt Wilcox, “ CSS Lint es dañino ” ). En el mejor de los casos, es completamente no oficial ... y, seamos sinceros, ¿ realmente necesitamos otra herramienta / pseudo-estándar para satisfacer?

Jordan Clark
fuente
+1 Gracias, investigaré esto. También he revisado CSS Lint, y lo que estás diciendo podría ser cierto. Muchas de las recomendaciones son exageradas.
Saif Bechan el
1

La forma más optimizada y escalable que puedo imaginar para tratar esto consiste en:

  1. Crear un archivo CSS principal para todo lo relacionado con el "alcance global" (como el diseño del sitio, clases globales, bibliotecas, complementos, etc.).

  2. Hacer un sistema que involucre una carpeta que contenga un archivo CSS único por página (solo si es necesario). Estos archivos pueden tener el mismo nombre de archivo que la página a la que está vinculado, por lo que puede ejecutar un script del lado del servidor en cada página que busque un archivo CSS en esa carpeta y agregarlo a la página si hay uno.

  3. Tal vez, hacer diferentes archivos CSS para cosas específicas del navegador que carga solo cuando el visitante tiene el navegador relativo.

Al hacerlo, terminarás con una forma sólida y optimizada de separar tu CSS. Sí, todavía habrá reglas no utilizadas en el archivo principal, pero estarán donde se supone que deben estar en un punto de vista lógico.

También tenga en cuenta que esas 3 "capas" de archivos CSS se almacenarán en caché, ya que sería un solo archivo CSS.

WiMantis
fuente