Optimización de rendimiento: Critical CSS y purgado

Acelera tu sitio web con técnicas avanzadas de optimización CSS. Aprende a implementar Critical CSS, purgado de estilos no utilizados y estrategias de carga asíncrona para mejorar Core Web Vitals y experiencia de usuario.

Ir directamente al contenido

Optimización de rendimiento: Critical CSS y purgado

Diagrama de carga de Critical CSS y carga diferida

Critical CSS: Concepto e Implementación

Extraer y cargar solo los estilos necesarios para el contenido visible inicial:

FCP

Mejora First Contentful Paint

LCP

Reduce Largest Contentful Paint

Herramientas

Critical, Penthouse, webpack-plugin-critical

<!-- Inline Critical CSS en <head> -->
<style>
  /* Estilos para contenido visible inicial */
  header, .hero, .above-the-fold { ... }
</style>

<!-- Cargar CSS completo asíncrono -->
<link 
  rel="preload" 
  href="styles.css" 
  as="style" 
  onload="this.onload=null;this.rel='stylesheet'"
>
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Purgado de CSS No Utilizado

Eliminar selectores CSS que no se usan en tu aplicación:

// Ejemplo config Tailwind purge
module.exports = {
  purge: {
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
      './src/**/*.js'
    ],
    options: {
      safelist: ['bg-red-500', 'px-4'] // Clases a preservar
    }
  },
  // ...
}

// Config PurgeCSS con webpack
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

plugins: [
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    safelist: () => ['active', 'open']
  })
]

Herramienta	Framework	Características
PurgeCSS	Agnóstico	Basado en análisis de contenido
Tailwind CSS	Tailwind	Purge integrado en configuración
UnCSS	Node.js	Simulación navegador más precisa

Técnicas Avanzadas de Optimización

Estrategias complementarias para máximo rendimiento:

Minificación

CSSNano, csso

Compresión

Brotli/GZIP para delivery

Code Splitting

Dividir CSS por rutas/componentes

HTTP/2

Múltiples archivos CSS sin penalización

/* Code Splitting CSS con webpack */
import(/* webpackChunkName: "component-css" */ './Component.css');

/* Preload hojas de estilo importantes */
<link 
  rel="preload" 
  href="critical.css" 
  as="style" 
  onload="this.rel='stylesheet'"
>

/* Preconnect para CDN */
<link rel="preconnect" href="https://fonts.gstatic.com">

Métricas e Impacto Real

Resultados medibles de optimización CSS:

Reducciones de 100-200KB en CSS pueden mejorar LCP en 0.5-1.5s en redes móviles

Métrica	Antes	Después	Mejora
Tamaño CSS	350KB	85KB	76% reducción
FCP	2.8s	1.2s	57% más rápido
LCP	4.5s	2.3s	49% más rápido
CLS	0.35	0.05	86% mejora estabilidad

Sobre el autor

Especialista en rendimiento web con certificación Google. Consultor para mejorar Core Web Vitals en e-commerce globales.

DevHub Global Solutions | Educativo