Arquitectura Web Zero-Bloat: Cómo logramos 100/100 en Google Lighthouse

En un ecosistema web saturado de bundles de JavaScript de varios megabytes, librerías innecesarias y cadenas de compilación complejas, construir con un enfoque Zero-Bloat no es una moda retro: es una ventaja competitiva radical en rendimiento, SEO y experiencia de usuario.

En este artículo explico los principios fundamentales que aplicamos en la arquitectura de Leandrus.net para alcanzar tiempos de respuesta inferiores a 150 ms y una calificación perfecta de 100/100 en Google Lighthouse.

⚡ Los 3 Pilares del Enfoque Zero-Bloat

1. HTML5 Semántico y Servido en el Servidor (SSR Nativo): El navegador recibe el DOM completamente listo sin hidrataciones costosas en el hilo principal del cliente.
2. CSS3 con Custom Properties (Sin utilidades infladas): Un sistema de diseño coherente basado en variables nativas (var(--accent)), compatible con modo oscuro y cero CSS no utilizado.
3. Vanilla JavaScript Quirúrgico: Cada script tiene un único propósito específico (ej. sincronizar el HUD de telemetría o alternar el tema visual).

💻 El Patrón del HUD en Tiempo Real

Para el portal de SimRacing, necesitábamos mostrar si el piloto estaba en pista o transmitiendo en directo en Twitch/YouTube. En lugar de incorporar sockets pesados o librerías de estado reactivo, implementamos un polling inteligente con fetch:

// Telemetría asíncrona nativa y ultra ligera
async function checkPaddockStatus() {
  try {
    const response = await fetch('/api/paddock.php', { cache: 'no-store' });
    if (!response.ok) throw new Error('HTTP ' + response.status);

    const data = await response.json();
    renderTelemetryHUD(data);
  } catch (err) {
    console.debug('Telemetry sync standby:', err);
  }
}

// Intervalo adaptativo según estado activo
setInterval(checkPaddockStatus, 15000);

Ventajas de esta solución:

• 0 KB de dependencias externas.
• Consumo de memoria nulo en dispositivos móviles y de bajo rendimiento.
• Resiliencia: Si el servidor se reinicia, la reconexión es instantánea y automática.

📊 Comparativa de Rendimiento

🚀 Conclusión

La ingeniería de software moderna no consiste en acumular la mayor cantidad de tecnologías de moda, sino en dominar los estándares fundamentales de la web para resolver el problema con la máxima eficiencia y elegancia.