1 line
11 KiB
Markdown
1 line
11 KiB
Markdown
|
# Tutorial: Optimización Completa del Poster Provisioning\n\nUna guía paso a paso específica para optimizar el poster desde archivos grandes y no optimizados hasta una versión de producción ultra-eficiente.\n\n## 🎯 Objetivo del Tutorial\n\nAl final de este tutorial habrás:\n\n- ✅ Reducido el tamaño total en ~40-50%\n- ✅ Mejorado el tiempo de carga en ~60%\n- ✅ Implementado critical CSS inlining\n- ✅ Optimizado SVGs con estrategia híbrida\n- ✅ Configurado deployment automatizado\n\n**Tiempo estimado:** 45-60 minutos\n\n---\n\n## 📊 Situación Inicial vs Final\n\n### Antes (Archivos Originales)\n\n```plaintext\n📄 index.html: ~50KB (con SVGs inline)\n🎨 poster.css: ~40KB (monolítico)\n🖼️ SVGs: ~30KB (sin optimizar)\nTotal: ~120KB sin compresión\n```\n\n### Después (Optimizado)\n\n```plaintext\n📄 index.html: ~30KB (crítico inline)\n🎨 main.min.css: ~25KB (modular + minificado)\n🖼️ sprites.svg: ~15KB (optimizado)\nTotal: ~70KB (-42%), ~18KB gzipped\n```\n\n---\n\n## 🚀 Fase 1: Setup y Análisis Inicial (10 minutos)\n\n### Paso 1.1: Evaluar Situación Actual\n\n```bash\n# Ir al directorio del poster\ncd poster/\n\n# Ver tamaños actuales\nls -lh src/index.html\nls -lh src/assets/css/poster.css\n\n# Examinar estructura\ntree src/ || find src/ -type f\n```\n\n**📝 Anota los tamaños iniciales para comparar después.**\n\n### Paso 1.2: Análisis de Performance Baseline\n\n```bash\n# Análisis de archivos fuente\nnu scripts/dev.nu lint\n\n# Build básico para baseline\nnu scripts/dev.nu build\n\n# Ver qué se genera\nls -lh dist/\n```\n\n### Paso 1.3: Identificar Problemas\n\nProblemas típicos que encontrarás:\n\n- ✋ CSS monolítico: todo en un archivo\n- ✋ SVGs grandes inline: ralentizan el HTML\n- ✋ Sin minificación: espacios y comentarios\n- ✋ Sin critical CSS: toda la CSS bloquea render\n- ✋ Sin compresión: archivos sin gzip\n\n---\n\n## 🔧 Fase 2: Modularización CSS (15 minutos)\n\n### Paso 2.1: Examinar CSS Actual\n\n```bash\n# Ver líneas y tamaño del CSS monolítico\nwc -l src/assets/css/poster.css\ndu -h src/assets/css/poster.css\n```\n\n### Paso 2.2: Entender la Modularización\n\nEl sistema ya creó 4 módulos enfocados:\n\n```bash\n# Ver módulos creados\nls -la src/assets/css/modules/\n\n# Examinar cada módulo\necho "=== BASE (reset, tipografía) ==="\nwc -l src/assets/css/modules/base.css\n\necho "=== COMPONENTS (UI components) ==="\nwc -l src/assets/css/modules/components.css\n\necho "=== ANIMATIONS (todas las animaciones) ==="\nwc -l src/assets/css/modules/animations.css\n\necho "=== PATTERNS (fondos, patrones) ==="\nwc -l src/assets/css/modules/patterns.css\n```\n\n### Paso 2.3: Verificar Sistema Modular\n\n```bash\n# El main.css importa todos los módulos\ncat src/assets/css/main.css\n\n# Build modular\nnu scripts/dev.nu build\n\n# Comparar tamaño\necho "Original CSS:"\ndu -h assets/css/poster.css 2>/dev/null || echo "Archivo original no existe"\n\necho "CSS Modular combinado:"\ndu -h dist/assets/css/main.min.css 2>/dev/null || echo "Build no completado"\n```\n\n**🎯 Resultado esperado:** CSS organizado en módulos lógicos, mismo tamaño total pero más mantenible.\n\n---\n\n## ⚡ Fase 3: Optimización SVG (15 minutos)\n\n### Paso 3.1: Estrategia SVG Híbrida\n\nEl sistema implementa 3 estrategias según el tipo de SVG:\n\n1. **Inline crítico** - Logo animado (necesita estar en HTML)\n2. **Data URI en CSS** - Íconos pequeños (<5KB)\n3. **Sprites externos** - Elementos decorativos\n\n### Paso 3.2: Examinar SVGs Actuales\n\n```bash\n# Ver SVGs disponibles\nls -lh src/assets/svg/\n\n# Examinar symbols.svg (animado, debe permanecer inline)\nhead -20 src/assets/svg/symbols.svg\n\n# Examinar decorative-sprites.svg (externo)\nhead -20 src/assets/svg/decorative-sprites.svg\n```\n\n### Paso 3.3: Ver Data URIs en CSS\n\n```bash\n# Examinar sistema de íconos como data URIs\nhead -50 src/assets/css/svg-data.css\n\n# Ver cuántos íconos data URI están definidos\ngrep -c "url('data:image/svg" src/assets/css/svg-data.css\n```\n\n### Paso 3.4: Opti
|