How I Achieved 100/100 Lighthouse Score with React & TypeScript: A Performance Deep Dive

Every developer wants their website to be fast. But achieving a perfect 100/100 score on Google PageSpeed Insights while using a modern library like React is a challenge that requires more than just "clean code." In this post, I’ll share how I built my portfolio and the specific steps I took to ensure it flies on both Desktop and Mobile. 🖼 The Proof I didn't just aim for green zones; I aimed for perfection. Here are my latest Lighthouse results: Desktop: 100/100 across the board. Mobile: 95+ Efficiency, with 0ms Total Blocking Time. 🛠 My Technical Stack Framework: React 18 Language: TypeScript (Strict mode) Build Tool: Vite (for lightning-fast HMR and optimized builds) Styling: SCSS Modules + BEM Deployment: High-speed hosting with global CDN 🚀 Key Optimization Strategies Zero Layout Shift (CLS) One of the hardest metrics to master. I used CSS aspect-ratio and reserved space for my profile image before it even loaded. This ensured that the content didn't "jump" when the photo appear