Guía de minificación CSS: CSSO, CSS no usado, builds

¿Por qué minificar el CSS en 2026?

Minificar CSS no es eliminar las reglas muertas, extraer el critical CSS ni activar gzip/Brotli. La minificación reescribe la hoja que ya sirves: desaparecen comentarios y espacios, se acortan colores y ceros, y los selectores duplicados adyacentes pueden fusionarse. Los nombres de clase siguen siendo el contrato con el HTML — a diferencia del mangling JavaScript. Puedes probar este paso en el navegador con el minificador CSS en línea FastMinify (CSSO, sin envío). Las apps de producción se quedan en el build. Esta guía cubre CSSO tal como funciona, las herramientas de CSS no usado que sustituyeron a PurifyCSS, Webpack/Vite, y cuándo basta un campo de pegar.

Hojas escritas a mano: a menudo alrededor de un 20–40 % menos de bytes antes de gzip o Brotli (el mismo orden de magnitud que la doc de la herramienta — no es una garantía de ranking)

Un CSS bloqueante más pequeño puede ayudar al LCP; la minificación sola no corrige un hero de 2 MB ni una fuente tardía

La eliminación del CSS no usado (PurgeCSS, scan content Tailwind) es una palanca distinta, a menudo más grande en un framework

CSSO en línea sirve para un archivo o unos pocos archivos; el build repite el pipeline en cada deploy

La compresión en el cable sigue siendo una capa servidor/CDN — gzip/Brotli después de la minificación

Minificar vs CSS no usado vs compresión

Tres capas, tres herramientas

Un relato « CSS pasó de 1,8 MB a 420 KB » casi nunca es minify-only: primero es CSS de framework no usado, luego minify, luego gzip. Las cifras de marketing mezclan los pipelines. El minificador FastMinify no escanea tu HTML. Para el paralelo JavaScript: tree shaking vs minificación.

Lo que de verdad mueve los Core Web Vitals

La señal de Google es el INP, y ya no el FID. Un CSS minificado puede reducir la descarga y el parse de las hojas bloqueantes, lo que puede sostener el LCP. No renombra las clases, no extrae el above-the-fold ni reserva el espacio de las imágenes. Mide con Lighthouse o CrUX — no prometas una ganancia en milisegundos ni en conversión. Después de minify, comprimir aún: guía GZIP/Brotli Apache y Nginx.

LCP: un CSS bloqueante más pequeño ayuda si el elemento LCP depende de ese archivo — no si el cuello de botella es un vídeo o una imagen tardía

INP (no FID): el minify CSS es una palanca débil; las tareas largas son sobre todo JavaScript

CLS: minify no reserva imágenes/fuentes; el restructure agresivo de CSSO puede incluso mezclar la cascada

En el cable: gzip/Brotli se aplica todavía después de minify — con la compresión del servidor, no en su lugar

Configurar CSSO (el motor de FastMinify)

Instalar y minificar con las opciones CSSO reales

CSSO (CSS Optimizer) parsea con CSSTree, luego limpia, comprime y eventualmente reestructura los rulesets. La página Minificar CSS ejecuta CSSO en el navegador: el nivel de compresión corresponde a restructure/merge; Agresivo puede cambiar el orden de origen. Los extractos siguientes son la API pública — no flags inventados.

Instalación

npm install --save-dev csso csso-cli

API (Node)

const csso = require('csso');

const result = csso.minify(css, {
  restructure: true,
  comments: false
});

console.log(result.css);

CLI

npx csso src/styles.css --output dist/styles.min.css
# Vista previa más segura (sin fusión estructural):
# npx csso src/styles.css --no-restructure -o dist/styles.min.css

usage es una whitelist, no PurgeCSS

La opción `usage` de CSSO lista tags, ids y clases presentes en el markup para eliminar selectores. Debes mantener esa lista. No es un escaneo de `*.html` / `*.jsx`. Una clase construida en JavaScript desaparece si se omite. Para el unused-CSS de verdad: PurgeCSS o los content paths de Tailwind; reserva `usage` para superficies pequeñas y conocidas.

Configuration

const cssoConfig = {
  restructure: true,
  comments: false,
  usage: {
    tags: ['div', 'span', 'a', 'img'],
    ids: ['header', 'footer', 'main'],
    classes: ['btn', 'card', 'nav']
  }
};

Uso

const fs = require('fs');
const csso = require('csso');

function minifyCSS(inputPath, outputPath) {
  const css = fs.readFileSync(inputPath, 'utf8');
  const result = csso.minify(css, cssoConfig);
  fs.writeFileSync(outputPath, result.css);
  const pct = ((css.length - result.css.length) / css.length * 100).toFixed(1);
  console.log(`${inputPath} -> ${outputPath} (${pct}% más pequeño en origen)`);
}

CSS no usado: PurgeCSS, Tailwind, usage CSSO

PurgeCSS (no PurifyCSS)

PurifyCSS es un proyecto estancado. En 2026, escanea el contenido con PurgeCSS (o el scan content / `@source` de Tailwind). FastMinify no hace este paso. Después de quitar las reglas muertas, minifica el resto con CSSO o cssnano — o pega un archivo en el minificador CSS en línea para comprobar.

Instalación

npm install --save-dev purgecss

PurgeCSS (API v8)

import { PurgeCSS } from 'purgecss';

const [{ css }] = await new PurgeCSS().purge({
  content: ['src/**/*.html', 'src/**/*.{js,jsx,ts,tsx}'],
  css: ['src/**/*.css']
});

Tailwind: content paths, no un doble purge

// tailwind.config.js (v3) — listar cada template que pueda emitir clases
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: { extend: {} }
};

/* Tailwind v4: preferir @source en el CSS antes que un segundo PurgeCSS
   salvo que sepas por qué los dos. Las clases dinámicas siguen en safelist. */

CSS de producción: Webpack y Vite

Webpack: cssnano vía CssMinimizerPlugin (no CSSO por defecto)

Un pipeline Webpack prod extrae a menudo con MiniCssExtractPlugin y minifica con css-minimizer-webpack-plugin. El motor por defecto es cssnano, no CSSO. Siempre puedes lanzar CSSO en un script npm o vía un minimizer custom. Vite minifica el CSS en producción vía build.cssMinify — históricamente esbuild, Lightning CSS en las majors más recientes. Lee la doc Vite de tu versión. Tema WordPress sin build JS: plugins de minificación WordPress.

Configuration Webpack

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].min.css'
    })
  ],
  optimization: {
    minimizer: [
      '...',
      new CssMinimizerPlugin()
    ]
  }
};

package.json

{
  "scripts": {
    "build": "webpack --mode=production",
    "minify:css": "csso src/styles.css --output dist/styles.min.css"
  },
  "devDependencies": {
    "css-minimizer-webpack-plugin": "^8.0.0",
    "mini-css-extract-plugin": "^2.9.0",
    "csso-cli": "^4.0.0"
  }
}

Critical CSS, selectores, en línea vs build

El critical CSS es otro workflow

Inlinear el above-the-fold y cargar el resto en async no es el trabajo de un minificador. Extrae primero, luego minifica el bloque crítico. Guía: Critical CSS: extraer, minificar, inlinear.

Extraer las reglas above-the-fold (critical, Penthouse, o un subset del design system)

Minificar ese bloque (CSSO en línea o el mismo motor que el build) antes del inline

Cargar el resto con un patrón no bloqueante que hayas probado

En WordPress, « optimize CSS delivery » es esta capa — no FastMinify

Profundidad de selectores vs peso de archivo

Los selectores profundos cuestan sobre todo en mantenimiento y especificidad, no solo en kilobytes. Minify no aplanará `.container .row .card .title` por ti. Menos clases, más estables — luego minify.

Antes

/* Penoso de mantener, no solo « lento de parsear » */
.container .row .col-md-6 .card .card-body .card-title {
  color: #333;
}

.btn-primary, .btn.btn-primary, button.btn-primary {
  background: blue;
}

Después

.card-title {
  color: #333;
}

.btn-primary {
  background: blue;
}

Cuándo basta el minificador en línea

Pegar-minificar conviene para una sobrecarga de tema hijo, un CSS de landing puntual, o para ver qué hace CSSO con un snippet antes de cambiar el build. No es el único pipeline de una app que publica en cada commit. Comparativa: minificadores en línea vs herramientas de build. Compila SCSS/LESS primero — hub preprocesadores CSS — luego minifica el CSS.

Usa Minificar CSS para los archivos pegables; concatena en esa página si fusionas algunas hojas

Deja Agresivo apagado si la cascada depende del orden de origen

Conservar los comentarios solo tiene sentido si aceptas un peor ahorro de peso

Bloquea el mismo paso en Webpack, Vite o la CI para que la prod no se salte minify

Medir el CSS, no adivinar

Qué mirar

El tamaño en disco no son los bytes en el cable. Comprueba el tamaño comprimido en la pestaña Red, Coverage para los bytes no usados, y el LCP de campo — no una « puntuación CSS » inventada.

Chrome Coverage: bytes CSS no usados en la página realmente cargada

DevTools Red: tamaño codificado vs decodificado después de gzip/Brotli

Lighthouse: CSS bloqueante y detalle LCP — no una nota CSS sola

WebPageTest: filmstrip + waterfall de la hoja de estilo

CI: fallar en las regresiones que hayas definido

Una puntuación Lighthouse « página entera » no es un presupuesto CSS. Prefiere un tamaño máximo del artefacto CSS extraído, y luego eventualmente una aserción de perf en una URL estable.

Configuration GitHub Actions

name: CSS size check
on: [push]

jobs:
  css-budget:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - run: npm ci && npm run build
      - name: Fail if production CSS exceeds budget
        run: node scripts/check-css-size.js

Herramientas de minificación

Usa las herramientas de minificación gratis para optimizar tu código:

Minificador JavaScript

Minifica, desminifica y embellece JavaScript al instante.

Minificador CSS

Optimiza hojas de estilo CSS para un mejor rendimiento.

Formateador JSON

Formatea JSON minificado con sangría personalizable — herramienta dedicada del cluster JSON.

Optimizador SVG (SVGO)

Optimización SVGO profunda más allá del minify rápido — presets safe, default y aggressive.

Utilidades de codificar y escapar

Prepara cadenas para URLs, markup o APIs — todo permanece en el navegador:

Base64

Codifica o decodifica texto UTF-8 en Base64, incluido el alfabeto URL-safe.

Codificar URL

Codifica en porcentaje componentes de consulta o URIs con encodeURIComponent, encodeURI o form-urlencoded.

Decodificar URL

Decodifica cadenas percent-encoded — componente, URI completa o form-urlencoded.

Entidades HTML

Escapa o quita el escape de &, <, comillas y entidades con nombre antes de insertar markup.

Y después

Minifica el CSS con CSSO o cssnano en el build que ya controlas. Quita las reglas muertas con PurgeCSS o el scan Tailwind — no con PurifyCSS, y no con el campo de pegar de FastMinify. Usa el minificador CSS en línea para inspeccionar un archivo o un snippet custom. Si el sitio es WordPress sin build front, empieza por la minificación plugin en staging en lugar de inventar un plugin FastMinify.

Mantén CSSO (o cssnano / Lightning CSS) en los builds de producción, no solo en una pestaña

Trata unused CSS y critical CSS como pipelines aparte, con sus tests

No actives el restructure CSSO en una cascada sin tests de no-regresión

Mide el tamaño transferido comprimido y el LCP, no el folklore de la tasa de rebote

WordPress: un solo stack minify, CSS antes que JS, excludes antes del combine

Guía de minificación CSS: CSSO, CSS no usado, builds

¿Por qué minificar el CSS en 2026?

Minificar vs CSS no usado vs compresión

Configurar CSSO (el motor de FastMinify)

Instalación

API (Node)

CLI

Configuration

Uso

CSS no usado: PurgeCSS, Tailwind, usage CSSO

Instalación

PurgeCSS (API v8)

Tailwind: content paths, no un doble purge

CSS de producción: Webpack y Vite

Configuration Webpack

package.json

Critical CSS, selectores, en línea vs build

Antes

Después

Medir el CSS, no adivinar

Configuration GitHub Actions

Minificador JavaScript

Minificador CSS

Formateador JSON

Optimizador SVG (SVGO)

Base64

Codificar URL

Decodificar URL

Entidades HTML

Y después

Artículos relacionados