Performance budgets web: como optimizar CSS para velocidad

El CSS se infla muy facil. Sin un limite claro, cada feature mete reglas nuevas, excepciones y capas extras hasta que la hoja deja de ser barata.

Presupuesto recomendado

• CSS critico: menos de 14 KB comprimidos
• CSS total: menos de 50 KB comprimidos
• CSS no usado: por debajo del 10%
• render blocking: idealmente cero peticiones evitables

Como medir

ls -lh styles.css
gzip -c styles.css | wc -c

Tambien conviene revisar cobertura en DevTools para ver cuanto CSS se carga sin usarse.

Eliminar CSS muerto

Herramientas como PurgeCSS siguen siendo utiles cuando el proyecto ya acumulo demasiadas clases o estilos heredados.

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/<strong>/<em>.html', './src/</strong>/</em>.vue'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

Minificacion y splitting

Reducir peso no es solo minificar. Tambien toca dividir por rutas o contextos, cargar tarde lo no critico y evitar duplicados.

import(/<em> webpackChunkName: "page-styles" </em>/ './page.css');

Reglas simples

• CSS critico pequeño
• nada duplicado
• variables en vez de repetir valores
• menos especificidad innecesaria
• menos @import

Conclusion

Un performance budget sirve para tener una conversacion tecnica concreta. Cuando el CSS se pasa del limite, deja de ser opinion y pasa a ser un problema medible.

Mantenerlo ligero suele ser mas barato que tener que rescatarlo meses despues.