Luminushome

Performance is a design feature. If a calculator takes three seconds to load, it is broken, regardless of how accurate the math is. Here is how we rebuilt our suite to achieve instant-load speeds globally.

The Challenge: Heavy Modern Frameworks

Standard web practices often result in megabytes of JavaScript files loaded just to render basic text boxes. We set a strict budget: the entire bundle size had to be under 120KB gzipped, and the site must hit a perfect 100 score in Google Lighthouse Performance tests.

Our Optimization Playbook

1. Dropping Traditional CSS Framework Overheads

Instead of importing full styling libraries, we use Tailwind v4 with optimized PostCSS compilation. Tailwind v4 compiles down to a very small CSS footprint. We leverage native CSS Custom Properties for theme switching, which avoids React re-renders and lets the browser handle transitions at a native 60fps.

2. Localizing and Pre-rendering Fonts

System fonts are fast but inconsistent. We use Google Fonts like Inter and Hanken Grotesk, but we pre-compile and bundle them locally using Next.js next/font/google. This automatically downloads font files at build time, self-hosts them, and preloads them to eliminate Layout Shifts (CLS).

3. Vanilla Canvas Animations

For the celestial background starfield, we initially tried SVG animations, which caused high CPU usage. We rewrote the starfield from scratch using a single HTML5 <canvas> element. By utilizing requestAnimationFrame and updating coordinates mathematical formulas, we keep the frame rate locked at a butter-smooth 60fps with less than 2% CPU overhead.

The Results

Following these steps, our Time to Interactive (TTI) is down to 210ms on desktop and 480ms on budget mobile devices. The web should be fast, lightweight, and accessible to everyone.