📘 Módulo 10: CSS y Rendimiento Avanzado

Optimizar la carga de estilos para mejorar la velocidad de la web. Aprender técnicas como Critical CSS y lazy loading.

Objetivos

Optimizar la carga de estilos para mejorar la velocidad de la web.
Aprender técnicas como Critical CSS y lazy loading de estilos.
Reducir el peso y la complejidad del CSS.
Adoptar buenas prácticas de mantenimiento y performance.

🔹 1. Critical CSS

El Critical CSS son los estilos mínimos necesarios para renderizar la parte visible de la página (above the fold).

html

<!-- CSS crítico inline en el head -->
<style>
  body { font-family: Arial, sans-serif; }
  header { background: #003366; color: #fff; padding: 20px; }
</style>

<!-- resto del CSS cargado de forma diferida -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

👉 Mejora el First Contentful Paint (FCP) y la percepción de velocidad.

🔹 2. Lazy loading de estilos

Carga estilos solo cuando son necesarios.

html

<link rel="preload" href="galeria.css" as="style" onload="this.rel='stylesheet'">

👉 Útil para páginas con módulos opcionales (galerías, sliders, etc.).

🔹 3. Minificación y compresión

Elimina espacios, comentarios y saltos de línea.
Usa herramientas como cssnano o CleanCSS.

css

/* Antes */
h1 {
  color: #003366;
  font-size: 2rem;
}

/* Después (minificado) */
h1{color:#003366;font-size:2rem;}

🔹 4. Evitar CSS no utilizado (Unused CSS)

Usa PurgeCSS o UnCSS para eliminar reglas que no se aplican.
Especialmente útil con frameworks como Tailwind o Bootstrap.

🔹 5. Buenas prácticas de rendimiento

Prefiere clases reutilizables en lugar de estilos en línea.
Usa variables CSS para evitar duplicación.
Agrupa y ordena estilos por componentes.
Evita selectores demasiado complejos (div ul li a span) que ralentizan el renderizado.

📝 Actividad práctica

Identifica el CSS crítico de tu página y añádelo inline en el <head>.
Configura la carga diferida de un archivo CSS secundario.
Minifica tu CSS y mide la mejora en velocidad de carga con Lighthouse.
Usa PurgeCSS para limpiar estilos no utilizados en tu proyecto.

MÓDULO 11 CSS Moderno