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.
Visitas:548