Arquitetura Web Zero-Bloat: Como alcançámos 100/100 no Google Lighthouse

Num ecossistema web saturado de pacotes (bundles) de JavaScript de vários megabytes, bibliotecas desnecessárias e fluxos de compilação complexos, construir com uma abordagem Zero-Bloat não é uma tendência retro: é uma vantagem competitiva determinante ao nível de desempenho, SEO e experiência do utilizador.

Neste artigo, partilho os princípios fundamentais que aplicámos na arquitetura do Leandrus.net para atingir tempos de resposta inferiores a 150 ms e uma pontuação perfeita de 100/100 no Google Lighthouse.

⚡ Os 3 Pilares da Abordagem Zero-Bloat

1. HTML5 Semântico e Renderizado no Servidor (SSR Nativo): O navegador recebe o DOM completamente processado, evitando hidratações onerosas na thread principal do cliente.
2. CSS3 com Custom Properties (Sem utilitários inflacionados): Um sistema de design coerente alicerçado em variáveis nativas (var(--accent)), compatível com modo escuro e com zero CSS não utilizado.
3. Vanilla JavaScript Cirúrgico: Cada script cumpre um propósito específico e isolado (por exemplo, sincronizar o HUD de telemetria ou alternar o tema visual).

💻 O Padrão do HUD em Tempo Real

No portal de SimRacing, era necessário assinalar se o piloto se encontrava em pista ou a transmitir em direto no Twitch/YouTube. Em vez de incorporar bibliotecas de WebSockets complexas ou sistemas de gestão de estado reativo, implementámos um polling inteligente através da API nativa fetch:

// Telemetria assíncrona nativa e ultraligeira
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 consoante o estado ativo
setInterval(checkPaddockStatus, 15000);

Vantagens desta Abordagem:

• 0 KB de dependências externas.
• Consumo de memória nulo em dispositivos móveis ou de baixo desempenho.
• Resiliência: Se o servidor reiniciar, a recuperação e religação são imediatas e automáticas.

📊 Comparativo de Desempenho

🚀 Conclusão

A engenharia de software moderna não reside na acumulação cega das tecnologias do momento, mas sim no domínio dos padrões abertos da web para resolver desafios com a máxima eficiência, robustez e elegância.