kcmr

13 3 / 2013

Optimización de CSS para mejorar el rendimiento

Interesante post sobre profiling de CSS y optimización.

Resumiendo, estas son algunos de los selectores, propiedades y prácticas habituales que tienen un impacto más negativo en el rendimiento del navegador.

The fastest rule is the one that doesn’t exist.
Acostumbramos a incluir librerías de utilidades de las que luego usamos una mínima parte. Es cómodo y evita tener que añadir cosas a medida que las necesitemos, pero es una de las cosas que más penalizan el rendimiento: el procesamiento de reglas no usadas. Esto me recuerda otro artículo a propósito de los boilerplates y polyfills tan populares últimamente: Use only what you need.
Most expensive selectors tend to be universal ones (“*”), and those with multiple classes (.foo.bar, foo .bar.baz qux, etc.)
Nada que decir sobre el selector universal, pero lo de las clases dobles, ahora que IE6 ya no nos atormenta y el uso de preprocesadores CSS favorecen mucho su uso, me mata :(
In both Opera and WebKit, [type=”…”] selectors seem to be more expensive than input[type=”…”]
El uso de selectores unqualified (supongo que esto se puede traducir por “no cualificados”) también afecta negativamente al rendimiento.
In both Opera and WebKit, “border-radius” is among the most expensive CSS properties to affect rendering time
Esta es una de las más deprimentes. Al contrario, propiedades como text-shadow o linear-gradient no tienen un impacto negativo sobre el rendimiento, y la que tiene un impacto más negativo con diferencia es transform:rotate().

CSS Lint

Una herramienta para ayudarnos a minimizar los selectores y propiedades problemáticas: CSSLint

Will hurt your feelings
(And help you code better)

Y para que CSS Lint no hiera demasiado tus sentimientos, está bien tener en cuenta algunas de sus reglas cuestionables explicadas en Should You Start Using CSSLint?

Tags: