How I hit 100/100 Lighthouse score with React: My journey and tech stack

Hi Product Hunt community! 👋

I’ve spent the last few weeks obsessed with one goal: making a React-based site that doesn't feel "heavy". We all know that React can be a beast when it comes to mobile performance, so I decided to push it to the absolute limit.

I’m happy to share that my portfolio project, WebDev Compass, finally hit a stable 100/100 on Desktop and 95+ on Mobile. 🚀

Here is the "Recipe" I used to get there:

The Foundation: React 18 + Vite + TypeScript. Vite’s build process is a game-changer for keeping the bundle lean.

Critical Path: Used link rel="preload" with fetchpriority="high" for the LCP images. It shaved off about 400ms from the initial paint.

Layout Stability: Solved CLS (Cumulative Layout Shift) by using CSS aspect-ratio for every single container. Zero shifts during loading.

Web Fonts: Self-hosted WOFF2 files with font-display: swap to prevent "invisible text" flashes.

Zero-Dependency Logic: I tried to keep the package.json as light as possible, avoiding heavy UI libraries where simple CSS would do.

Why I did this:

As a developer, I believe that performance is a feature, not an afterthought. It's about better SEO, better UX, and proving that React apps can be lightning-fast.

I’d love for you to check it out and give me some feedback on the UI or technical implementation!

Check it out here: https://www.webdevcompass.com/

Question for the makers: Do you prioritize a perfect Lighthouse score, or do you think 90+ is "good enough" for production?