UnifyUnits

Problem

Unit conversions are a daily necessity for engineers, students, and professionals alike. Despite this constant demand, the existing landscape of web-based unit converters is surprisingly poor. Most popular options look like relics from the early 2000s: they are bloated with intrusive banner ads that cause severe Cumulative Layout Shift (CLS), require full-page reloads to execute a single calculation, and lack basic mobile responsiveness or keyboard accessibility.

The goal for UnifyUnits was to build a clean, blazing-fast, and modern conversion tool. It needed to provide instant, precise bidirectional conversions while maintaining an ultra-lightweight client footprint, exceptional Core Web Vitals, and an interface that feels premium and responsive. The final product had to prove that a utility site could be both highly profitable and a joy to use.

Constraints

• Instant client-side conversions — Calculations must execute in real-time as the user types, requiring bidirectional client-side processing without any network roundtrips or server latency.
• Flawless Core Web Vitals — The application must achieve a 100/100 Lighthouse performance score (LCP < 1.2s, FID < 50ms, CLS of 0) while keeping the initial JavaScript bundle under 40KB gzipped.
• High mathematical precision — Conversions must be accurate up to 10 decimal places, preventing floating-point errors (e.g., 0.1 + 0.2 === 0.30000000000000004) common in JavaScript engine arithmetic.
• Comprehensive technical SEO — Since organic search is the primary acquisition channel, the project must implement dynamic SEO meta tags, automatic schema markup (JSON-LD) for all 100+ units, and a dynamically generated sitemap.
• Privacy-first monetization — Ad placements must be clean, deterministic, and non-intrusive, utilizing a privacy-conscious analytics platform that collects no PII.

Key decisions

• Astro & Islands Architecture — I selected Astro for static site generation to guarantee sub-second initial page loads. The directory structure is fully pre-rendered to HTML, while React is islands-hydrated solely for the interactive converter components. This ensures that non-interactive marketing and SEO content ships zero JavaScript to the client.
• Big.js for high-precision math — Rather than relying on native JavaScript floats, I integrated big.js to handle arbitrary-precision decimal arithmetic. This guarantees that complex scale factor conversions (like converting micrometers to light-years or microsecond intervals) remain completely accurate and free of floating-point anomalies.
• Tailwind CSS v4 & responsive design — I leveraged Tailwind CSS v4’s modern styling pipeline to build a fluid, dark-mode-first user interface. The entire layout adapts seamlessly from widescreen desktop screens down to narrow mobile devices, featuring large, tap-friendly input fields and clean visual hierarchy.
• Keyboard navigation & smart search — To elevate UnifyUnits from a simple calculator to an efficient daily tool, I implemented global hotkeys (e.g., press / to search) and a smart search overlay that fuzzy-matches categories and units (like matching “km” to “Kilometers” or “temp” to “Temperature”).
• AdSense CLS prevention & Plausible Analytics — Instead of standard dynamic ads that shift content, I designed fixed-size ad placeholders to prevent CLS. For usage tracking, I used Plausible Analytics to gather lightweight, cookie-less usage data while honoring user privacy and keeping the script size under 1KB.

Outcome

UnifyUnits launched with an ultra-lightweight footprint, a 100/100 Lighthouse score, and zero Cumulative Layout Shift. Deployed on Cloudflare Pages, the site serves static HTML globally from the edge, resulting in time-to-first-byte (TTFB) metrics under 50ms and complete client-side conversion latency of under 5ms.

By pre-rendering dedicated landing pages for every unit combination and injecting automated, highly structured JSON-LD schema markup, the site ranks exceptionally well for long-tail search queries. It has scaled to thousands of monthly users while operating on a near-zero hosting budget.

What I’d do differently

Although using React for individual interactive converter widgets is highly productive, loading the React runtime and components accounts for nearly 85% of the page’s active JavaScript bundle. In a future refactor, I would replace React with solid.js or raw vanilla TypeScript. This transition would reduce the hydrated bundle size to less than 5KB, further improving performance on low-end mobile devices and securing a completely uncompromised loading experience.