Portafolio Sub-14kB

Puntuaciones Perfectas de Lighthouse + Carga Instantánea

Puntuaciones perfectas de Lighthouse: 100 en Rendimiento, Accesibilidad, Mejores Prácticas y SEO

El Desafío

Crear un portafolio completo y profesional que cargue en menos de 14kB comprimido, logrando tiempos de carga sub-segundo incluso en redes 3G, mientras mantiene puntuaciones perfectas de 100 en todas las métricas de Lighthouse.

¿Por qué 14kB?

El límite de 14kB no es arbitrario. Es el tamaño de TCP slow start: 10 paquetes × 1,460 bytes = 14,600 bytes. Esto significa que toda la página se entrega en el primer round-trip de la conexión TCP, eliminando los 300-1000ms de latencia que típicamente afectan a los usuarios móviles.

100
Rendimiento

Primera Renderización < 1s

100
Accesibilidad

Cumple con WCAG 2.1 Nivel AA

100
Mejores Prácticas

HTTPS, sin errores de consola

100
SEO

Etiquetas meta, marcado Schema.org

Cómo lo Logramos

1. Rendimiento (100/100)

  • Cero JavaScript en la carga inicial: Astro genera HTML estático puro
  • CSS crítico inlineado: Todo el CSS necesario está en el HTML, eliminando solicitudes adicionales
  • Fuentes del sistema: Usar -apple-system y Segoe UI ahorra 10-50kB
  • Imágenes con carga diferida: Las imágenes se cargan después del HTML inicial
  • Tamaño total: 8.3kB comprimido (español) / 8.1kB (inglés)

2. Accesibilidad (100/100)

  • HTML semántico: Uso correcto de elementos <header>, <nav>, <main>, <article>
  • Contraste de color: Ratio mínimo 4.5:1 en texto, 3:1 en elementos de interfaz
  • Etiquetas ARIA: Atributos descriptivos para navegación por teclado
  • Modo oscuro accesible: Contraste optimizado en ambos temas
  • Foco visible: Indicadores claros para navegación por teclado

3. Mejores Prácticas (100/100)

  • HTTPS obligatorio: Todas las conexiones son seguras
  • Sin errores de consola: Código limpio y libre de advertencias
  • Relación de aspecto en imágenes: Previene cambios de diseño con width/height explícitos
  • Encabezados de seguridad: CSP, X-Frame-Options, X-Content-Type-Options
  • Sin dependencias vulnerables: Stack tecnológico mínimo y actualizado

4. SEO (100/100)

  • Meta tags optimizados: Title, description, Open Graph, Twitter Cards
  • Schema.org markup: JSON-LD para datos estructurados
  • Sitemap.xml: Generado automáticamente para indexación
  • Robots.txt: Configuración clara para crawlers
  • URLs semánticas: Estructura clara y descriptiva
  • Contenido bilingüe: Español e inglés con hreflang tags

Desglose del Presupuesto

Estructura HTML ~1,200 bytes
CSS completo (comprimido) ~2,800 bytes
Contenido de texto ~3,500 bytes
SEO + Schema.org + Open Graph ~930 bytes
JavaScript (modo oscuro) ~50 bytes
Total español (comprimido) 8,480 bytes
Presupuesto restante 6,120 bytes

Presupuesto total: 14,600 bytes. Usado: 58%. Con compresión gzip/brotli 4-5x, el presupuesto restante permite agregar ~25-30kB de contenido sin comprimir.

Tecnologías Utilizadas

Astro

Framework que genera HTML estático con cero JavaScript por defecto

CSS Nativo

Propiedades personalizadas, Grid, Flexbox - sin frameworks pesados

Cloudflare Pages

CDN global con compresión Brotli automática

GitHub Actions

CI/CD con verificación automática de tamaño

Resultados

  • Tiempo de carga: < 1 segundo en 3G
  • Primera Renderización de Contenido: < 0.5s
  • Tiempo hasta Interactividad: < 1s (igual que FCP, mínimo JS)
  • Tamaño transferido: 8.3kB (español) / 8.1kB (inglés)
  • Cambio Acumulativo de Diseño: 0 (sin cambios, imágenes con carga diferida)
  • Tiempo Total de Bloqueo: 0ms (50 bytes JavaScript)