Zero-Bloat Web Architecture: How We Achieved 100/100 on Google Lighthouse

In a web ecosystem bloated with multi-megabyte JavaScript bundles, unnecessary third-party libraries, and complex build pipelines, building with a Zero-Bloat mindset is not a retro gimmick—it is a radical competitive edge in performance, SEO, and user experience.

In this article, I explain the core architectural principles we implemented on Leandrus.net to achieve sub-150ms response times and a flawless 100/100 Google Lighthouse score.

⚡ The 3 Pillars of the Zero-Bloat Approach

1. Semantic, Server-Rendered HTML5 (Native SSR): The browser receives a fully hydrated DOM straight out of the box, avoiding costly hydration cycles on the client's main thread.
2. CSS3 with Custom Properties (Zero Utility Bloat): A cohesive design system driven by native CSS variables (var(--accent)), native dark mode support, and zero unused CSS.
3. Surgical Vanilla JavaScript: Every script serves a single, well-defined purpose (e.g., synchronizing the telemetry HUD or toggling visual themes).

💻 The Real-Time HUD Pattern

For our SimRacing hub, we needed a way to display whether the driver was currently on track or broadcasting live on Twitch/YouTube. Instead of pulling in heavy WebSocket clients or reactive state management libraries, we engineered an intelligent polling mechanism using the native fetch API:

// Native, ultra-lightweight asynchronous telemetry
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);
  }
}

// Adaptive interval based on active state
setInterval(checkPaddockStatus, 15000);

Key Advantages of this Approach:

• 0 KB of third-party runtime dependencies.
• Virtually zero memory overhead on low-end and mobile devices.
• Resilience: If the web server restarts or drops a connection, recovery is instantaneous and automatic.

📊 Performance Comparison

🚀 Conclusion

Modern software engineering is not about piling on the latest trending frameworks; it is about mastering the web's open standards to solve real-world problems with maximum speed, efficiency, and architectural elegance.