Rendimiento

Critical CSS: acelera la carga de la pagina hasta un 50%

Dmitriy Hulak
Dmitriy Hulak
10 min de lectura0 vistas

Critical CSS: acelera la carga de la pagina hasta un 50%

Critical CSS es una de las optimizaciones de rendimiento mas efectivas que puedes aplicar. Si insertas en linea los estilos de la parte visible al cargar, eliminas bloqueos de render y haces que la pagina se perciba mucho mas rapida.

Que es Critical CSS

Es el conjunto minimo de estilos necesario para pintar el contenido visible de la primera pantalla. Todo lo demas puede cargarse de forma asincrona.

Impacto en rendimiento

Resultados habituales al implementarlo bien:

  • mejora del 50 al 70% en First Contentful Paint
  • mejora del 40 al 60% en Largest Contentful Paint
  • mejores Core Web Vitals
  • mejor experiencia movil en conexiones lentas

Estrategia de implementacion

1. Extrae el CSS critico

Puedes apoyarte en herramientas como:

  • Critical
  • Critters
  • PurgeCSS con configuracion manual
npm install critical --save-dev

2. Inserta los estilos criticos en linea

<head>
  <style>
    body { margin: 0; font-family: sans-serif; }
    .header { background: #333; color: white; }
  </style>
  <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
</head>

3. Carga el CSS no critico despues

const loadCSS = (href) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
};
if (document.readyState === 'complete') {
  loadCSS('/styles/non-critical.css');
} else {
  window.addEventListener('load', () => {
    loadCSS('/styles/non-critical.css');
  });
}

Buenas practicas

  • Mantener el critical CSS por debajo de 14 KB
  • Actualizarlo cuando cambie el layout principal
  • Probarlo en dispositivos reales y redes lentas
  • No romper el fallback con noscript

    • Como medir el resultado

    Usa Chrome DevTools y Lighthouse para revisar:

    • First Contentful Paint
    • Largest Contentful Paint
    • Total Blocking Time

    Errores comunes

  • Meter demasiado CSS critico y perder el beneficio
  • Olvidar actualizarlo despues de cambios visuales
  • Romper progressive enhancement
  • Validarlo solo en una maquina rapida

    • Automatizacion

    Integra la extraccion en el proceso de build:

    const CriticalCssPlugin = require('critical-css-webpack-plugin');
    module.exports = {
  plugins: [
    new CriticalCssPlugin({
      base: 'dist/',
      src: 'index.html',
      target: 'index.html',
      inline: true,
      minify: true,
      width: 1300,
      height: 900
    })
  ]
};

    Conclusion

    Critical CSS sigue siendo una tecnica solida para mejorar el rendimiento percibido. Si la combinas con lazy loading, code splitting y una hoja de estilos mas limpia, la diferencia se nota enseguida.

    Puedes ajustar sombras y mantener el CSS principal mas ligero con nuestro Shadow Generator.

    Publicaciones relacionadas

    Sigue leyendo sobre temas relacionados.

    Performance budgets web: como optimizar CSS para velocidadDefine y mantiene performance budgets para CSS: menos peso, menos estilos muertos y mejores tiempos de carga.Buenas practicas de animaciones CSS en 2026: optimizacion de rendimientoOptimizacion de rendimiento para animaciones CSS en 2026: buenas practicas para 60fps, aceleracion GPU, keyframes y cumplimiento de reduced-motion.Core Web Vitals 2026: playbook CSS para mejorar LCP, INP y CLSGuia practica sobre Core Web Vitals enfocada en arquitectura CSS, render, fuentes y estabilidad visual en productos reales.Animaciones activadas por scroll con CSS e Intersection ObserverComo construir animaciones por scroll fluidas y ligeras con CSS moderno e Intersection Observer: fade-ins, reveals progresivos y efectos con mejor experiencia de uso.

    Comments

    0

    Sign in to leave a comment.

    No comments yet. Be the first.